kempo 1.5.0 → 2.0.1

package/dist/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:l="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:l}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:c="",cancelAction:a=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:a,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);

package/dist/kempo-styles.css

@@ -1 +1 @@
-/* Reset*/*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--input_padding);margin-bottom:var(--spacer);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
+/* Reset*/*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}

package/docs/components/show-more.html

@@ -64,20 +64,7 @@
         </k-card>
       </div>
     </div>
-
-    <h3>Try It Yourself</h3>
-    <k-web-snippet-editor
-      show-css="false"
-      show-js="false"
-      use-kempo="true"
-      scripts="../kempo/components/ShowMore.js"
-    >
-      <pre for="html">&lt;k-show-more style="--closed_height: 10rem">
-  &lt;p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eum pariatur voluptas aspernatur ad laborum nostrum deserunt quo consequuntur, molestias id quos rem cum, distinctio quam obcaecati recusandae ut quod non vel ipsam architecto fuga. Tempore placeat quidem aperiam consectetur optio beatae assumenda dolor corrupti saepe eum, natus doloremque reprehenderit sequi laboriosam suscipit eos esse dolore facilis alias. Pariatur beatae ex suscipit nulla voluptate nobis quisquam alias. Nesciunt unde asperiores iste, praesentium quod cumque. Quos numquam sunt quisquam enim explicabo nobis fugiat, distinctio illum et corporis necessitatibus, ab ullam nesciunt tempora quas totam odio autem. Similique maiores facilis saepe exercitationem dolores, quisquam consequuntur atque in molestiae sint voluptatem. Eveniet vel recusandae sit. Doloribus eum magni cumque animi tempore error dicta dignissimos repellat porro, recusandae iusto quas? Soluta explicabo vitae cupiditate repellat magnam blanditiis, quam animi nihil, totam similique est eum, magni impedit deleniti! Laboriosam explicabo libero laudantium reiciendis autem officia obcaecati eius incidunt earum quibusdam, cumque quasi aspernatur quod at, placeat dolorum, vel illum commodi odit non. Iure adipisci, unde assumenda laboriosam quaerat beatae optio, aliquid tenetur ex nemo velit earum tempore nulla, animi neque nam ipsam quia accusantium enim et quis reprehenderit quas? Labore modi maiores in suscipit laboriosam.&lt;/p>
-  &lt;span slot="more">Show me all the text&lt;/span>
-  &lt;span slot="less">Whoa, that's too much text, hide some&lt;/span>
-&lt;/k-show-more></pre>
-    </k-web-snippet-editor>
+    
   </main>
   <div style="height:33vh"></div>
   

package/docs/kempo/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:l="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:l}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:c="",cancelAction:a=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:a,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);

package/docs/kempo/kempo-styles.css

@@ -1 +1 @@
-/* Reset*/*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--input_padding);margin-bottom:var(--spacer);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
+/* Reset*/*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}

package/docs/search.json

@@ -1,15 +1,4 @@
 {
-  "/components/codeeditor.html": {
-    "name": "Components > Code Editor",
-    "terms": [
-      "component",
-      "code",
-      "editor",
-      "html",
-      "css",
-      "js"
-    ]
-  },
   "/components/resize.html": {
     "name": "Components > Resize",
     "terms": [
@@ -48,19 +37,6 @@
       "content"
     ]
   },
-  "/components/websnippeteditor.html": {
-    "name": "Components > Web Snippet Editor",
-    "terms": [
-      "component",
-      "web",
-      "snippet",
-      "editor",
-      "code",
-      "html",
-      "css",
-      "js"
-    ]
-  },
   "/styles/borders-spacing.html": {
     "name": "Styles > Borders and Spacing",
     "terms": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "1.5.0",
+  "version": "2.0.1",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/Dialog.js

@@ -72,7 +72,7 @@ export default class Dialog extends Component {
   attributeChangedCallback(n, oV, nV){
     super.attributeChangedCallback(n, oV, nV);
     if(name === 'opened'){
-      dispatchEvent(this, nV?'opened':'closed');
+      dispatchEvent(this, nV?'opened':'close');
     }
   }
   open(){
@@ -161,6 +161,7 @@ export default class Dialog extends Component {
         position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/
         top: 0;
         left: 0;
+        z-index: 100;
       }
       :host(:not([opened])){
         display: none;
@@ -242,6 +243,7 @@ export default class Dialog extends Component {
   ];
 
   static create(contents = '', options = {}){
+    if(options.closeExisting!==false)document.querySelectorAll('k-dialog').forEach(d=>d.close());
     const $dialog = new Dialog({
       opened: true,
       ...options 

package/src/kempo-styles.css

@@ -647,7 +647,6 @@ textarea {
   color: var(--input_tc);
   border: var(--input_border_width) solid var(--c_border);
   padding: var(--input_padding);
-  margin-bottom: var(--spacer);
   border-radius: var(--radius);
   outline: none;
   transition: box-shadow var(--animation_ms);

package/docs/components/codeeditor.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Code Editor - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
-  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
-</head>
-<body>
-  <k-import src="../nav-1.inc.html"></k-import>
-  <h1 class="ta-center">Code Editor</h1>
-  <main>
-    <p>Use the <code>&lt;k-code-editor></code> to create a code text editor. Put your initial code within the the tag, for HTML you should escape the open tags (<code>&lt;</code> should be <code>&amp;lt;</code>) so the code is not treated as real HTML.</p>
-    <p>This is a very simple code editor, it is not intended to be full featured, just the basics, it's like a textarea with line numbers and highlighting. If you want a full featured editor please use <a href="https://ace.c9.io/" target="_blank">Ace Editor</a>, <a href="https://codemirror.net/" target="_blank">Code Mirror</a>, or <a href="https://microsoft.github.io/monaco-editor/" target="_blank">Monaco</a></p>
-    <k-code-editor>
-&lt;k-code-editor>
-  &lt;!-- Init Code Here !-->
-&lt;/k-code-editor>
-    </k-code-editor>
-  </main>
-  <script type="module" src="../kempo/components/Import.js"></script> 
-  <script type="module" src="../kempo/components/CodeEditor.js"></script> 
-</body>
-</html>

package/docs/components/websnippeteditor.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Web Snippet Editor - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
-  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
-</head>
-<body>
-  <k-import src="../nav-1.inc.html"></k-import>
-  <h1 class="ta-center">Web Snippet Editor</h1>
-  <main>
-    <k-web-snippet-editor
-      use-kempo="false"
-    >
-      <pre for="html">
-&lt;button id="hello">
-  Click Me
-&lt;/button>
-</pre>
-      <pre for="css">
-#hello {
-  color: blue;
-}
-</pre>
-      <pre for="js">
-document.getElementById('hello').addEventListener('click', () => {
-  alert('Hello World');
-});
-</pre>
-    </k-web-snippet-editor>
-  </main>
-  <div style="height:33vh"></div>
-  <script type="module" src="../kempo/components/Import.js"></script> 
-  <script type="module" src="../kempo/components/WebSnippetEditor.js"></script> 
-</body>
-</html>