kempo 3.0.0 → 3.1.0

package/dist/components/Import.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Import extends Component{constructor(e=""){super(),this.registerAttribute("src",e)}attributeChangedCallback(e,t,r){"src"===e&&t!==r&&this.render(!0)}async render(e){const t=this.src;if(t&&await super.render(e)){let e=await(await fetch(t)).text();for(const[t,r]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),r);const r=document.createElement("template");r.innerHTML=e;const n=Array.from(r.content.querySelectorAll("script[src]"));n.forEach((e=>e.remove())),this.innerHTML=r.innerHTML;for(const e of n){const t=document.createElement("script");Array.from(e.attributes).forEach((e=>{t.setAttribute(e.name,e.value)})),console.log("Adding script with src:",t.src),await new Promise(((e,r)=>{t.onload=e,t.onerror=r,this.appendChild(t)}))}return!0}return!1}get shadowStyles(){return"\n      :host {\n        display: contents;\n      }\n    "}static replacements={root:"./"};static addReplacement(e,t){this.replacements={...this.replacements,[e]:t}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);
+import Component from"./Component.js";export default class Import extends Component{constructor(e=""){super(),this.registerAttribute("src",e)}attributeChangedCallback(e,t,r){"src"===e&&t!==r&&this.render(!0)}async render(e){const t=this.src;if(t&&await super.render(e)){let e=await(await fetch(t)).text();for(const[t,r]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),r);const r=document.createElement("template");r.innerHTML=e;const s=Array.from(r.content.querySelectorAll("script[src]"));s.forEach((e=>e.remove())),this.innerHTML=r.innerHTML;for(const e of s){const t=document.createElement("script");Array.from(e.attributes).forEach((e=>{t.setAttribute(e.name,e.value)})),await new Promise(((e,r)=>{t.onload=e,t.onerror=r,this.appendChild(t)}))}return!0}return!1}get shadowStyles(){return":host{display:contents;}"}static replacements={root:"./"};static addReplacement(e,t){this.replacements={...this.replacements,[e]:t}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);

package/dist/components/PhotoViewer.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const openHandler=Symbol(),closeHandler=Symbol(),overlayHandler=Symbol(),prevHandler=Symbol(),nextHandler=Symbol(),keyboardHandler=Symbol(),imgKeyboardHandler=Symbol();export default class PhotoViewer extends Component{constructor(e="",n="",t={}){super();const{keyboardControls:o=!0,global:s=!1}=t;this.registerAttributes({src:e,alt:n,fullscreen:!1,keyboardControls:o,global:s})}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),this.rendered&&"src"===e&&n!==t?(this.shadowRoot.getElementById("img").src=t,this.shadowRoot.getElementById("fullscreen-img").src=t):this.rendered&&"alt"===e&&n!==t?(this.shadowRoot.getElementById("img").alt=t,this.shadowRoot.getElementById("fullscreen-img").alt=t):this.rendered&&"fullscreen"===e&&n!==t&&(dispatchEvent(this,"fullscreenchange "+(t?" fullscreen":" fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(t?document.addEventListener("keydown",this[keyboardHandler]):document.removeEventListener("keydown",this[keyboardHandler])))}async render(e){if(await super.render(e)){const e=this.shadowRoot.getElementById("img");e.src=this.src,e.alt=this.alt;const n=this.shadowRoot.getElementById("fullscreen-img");n.src=this.src,n.alt=this.alt;const t=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(t&&!t.assignedNodes().length){this.shadowRoot.querySelector("slot:not([name])").assignedNodes().forEach((e=>{const n=e.cloneNode(!0);this.appendChild(n).slot="fullscreen-caption"}))}return onEvent(e,"click",this[openHandler]),onEvent(e,"keydown",this[imgKeyboardHandler]),onEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),onEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),onEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),onEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.updateNavigationState(),!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("img"),"click",this[openHandler]),offEvent(this.shadowRoot.getElementById("img"),"keydown",this[imgKeyboardHandler]),offEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),offEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),offEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),offEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.keyboardControls&&document.removeEventListener("keydown",this[keyboardHandler])}[imgKeyboardHandler]=e=>{"Enter"!==e.key||this.fullscreen||this.open()};[openHandler]=()=>{this.open()};[closeHandler]=()=>{this.close()};[overlayHandler]=e=>{e.target===e.currentTarget&&this.close()};[prevHandler]=e=>{e.stopPropagation();const n=this.getPrevSibling();n&&(this.close(),n.open())};[nextHandler]=e=>{e.stopPropagation();const n=this.getNextSibling();n&&(this.close(),n.open())};[keyboardHandler]=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[0===n?e.length-1:n-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[n===e.length-1?0:n+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter((e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName)).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach((n=>n.classList.toggle("d-n",!e)))}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}get shadowTemplate(){return'\n      <div id="wrapper">\n        <img id="img" tabindex="0" />\n        <div class="caption">\n          <slot></slot>\n        </div>\n        <div id="fullscreen-overlay">\n          <button id="close" class="no-btn">\n            <slot name="close">\n              <k-icon name="close"></k-icon>\n            </slot>\n          </button>\n          <button id="prev" class="nav-btn no-btn">\n            <slot name="prev">\n              <k-icon name="chevron-left"></k-icon>\n            </slot>\n          </button>\n          <button id="next" class="nav-btn no-btn">\n            <slot name="next">\n              <k-icon name="chevron-right"></k-icon>\n            </slot>\n          </button>\n          <div class="content">\n            <img id="fullscreen-img" />\n            <div class="caption">\n              <slot name="fullscreen-caption"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #wrapper {\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n      #img {\n        max-width: 100%;\n        height: auto;\n        cursor: pointer;\n        outline: none;\n        border-radius: var(--img_radius, 0);\n      }\n      #img:focus {\n        box-shadow: var(--focus_shadow);\n      }\n      #fullscreen-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 9999;\n        background: rgba(0,0,0,0.9);\n        padding: 2rem;\n        display: none;\n      }\n      :host([fullscreen]) #fullscreen-overlay {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .content {\n        position: relative;\n        max-width: 100%;\n        max-height: 90vh;\n      }\n      #fullscreen-img {\n        max-height: 75vh;\n        max-width: 100%;\n        object-fit: contain;\n        cursor: default;\n      }\n      #close {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n      }\n      .nav-btn {\n        position: fixed;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 1rem;\n        opacity: 0.7;\n        font-size: 3rem;\n        -webkit-text-stroke: 1px black;\n        text-stroke: 1px black;\n        text-shadow: 0 0 3px rgba(0,0,0,0.8);\n      }\n      .nav-btn::slotted(*),\n      .nav-btn k-icon {\n        filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));\n      }\n      .nav-btn:hover {\n        opacity: 1;\n      }\n      #prev {\n        left: 1rem;\n      }\n      #next {\n        right: 1rem;\n      }\n      .caption {\n        text-align: center;\n        max-width: 600px;\n        width: fit-content;\n        margin: 1rem auto 0;\n      }\n      #fullscreen-overlay .caption {\n        color: white;\n      }\n      :host([fullscreen]) .caption {\n        color: white;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"src","alt","fullscreen","keyboard-controls","global"]}window.customElements.define("k-photo-viewer",PhotoViewer);

package/dist/kempo-vars.css

@@ -1 +1 @@
-:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--c_input_border:var(--c_border);--btn_padding:var(--spacer_h) var(--spacer);--date_picker_icon_filter:invert(0)}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:var(--c_bg__alt);--input_tc:var(--tc);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--date_picker_icon_filter:invert(1)}
+:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--c_input_border:var(--c_border);--btn_padding:var(--spacer_h) var(--spacer);--date_picker_icon_filter:invert(0)}:root,[theme="light"]{color-scheme:light;--c_bg:rgb(249, 249, 249);--c_bg__inv:rgb(51, 51, 51);--c_bg__alt:rgb(238, 238, 238);--c_overscroll:rgb(255, 255, 255);--c_border:rgb(204, 204, 204);--c_border__inv:var(--d_c_bg_border);--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:rgb(221, 221, 221);--btn_bg__hover:rgb(204, 204, 204);--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:rgb(51, 51, 51);--c_bg__inv:rgb(249, 249, 249);--c_bg__alt:rgb(34, 34, 34);--c_overscroll:rgb(0, 0, 0);--c_border:rgb(119, 119, 119);--c_border__inv:rgb(204, 204, 204);--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:rgb(138, 180, 248);--tc_secondary:rgb(187, 102, 255);--tc_success:rgb(102, 187, 102);--tc_warning:rgb(255, 153, 51);--tc_danger:rgb(255, 85, 119);--btn_bg:rgb(170, 170, 170);--btn_bg__hover:rgb(187, 187, 187);--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:var(--c_bg__alt);--input_tc:var(--tc);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--date_picker_icon_filter:invert(1)}

package/docs/kempo/components/Import.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Import extends Component{constructor(e=""){super(),this.registerAttribute("src",e)}attributeChangedCallback(e,t,r){"src"===e&&t!==r&&this.render(!0)}async render(e){const t=this.src;if(t&&await super.render(e)){let e=await(await fetch(t)).text();for(const[t,r]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),r);const r=document.createElement("template");r.innerHTML=e;const n=Array.from(r.content.querySelectorAll("script[src]"));n.forEach((e=>e.remove())),this.innerHTML=r.innerHTML;for(const e of n){const t=document.createElement("script");Array.from(e.attributes).forEach((e=>{t.setAttribute(e.name,e.value)})),console.log("Adding script with src:",t.src),await new Promise(((e,r)=>{t.onload=e,t.onerror=r,this.appendChild(t)}))}return!0}return!1}get shadowStyles(){return"\n      :host {\n        display: contents;\n      }\n    "}static replacements={root:"./"};static addReplacement(e,t){this.replacements={...this.replacements,[e]:t}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);
+import Component from"./Component.js";export default class Import extends Component{constructor(e=""){super(),this.registerAttribute("src",e)}attributeChangedCallback(e,t,r){"src"===e&&t!==r&&this.render(!0)}async render(e){const t=this.src;if(t&&await super.render(e)){let e=await(await fetch(t)).text();for(const[t,r]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),r);const r=document.createElement("template");r.innerHTML=e;const s=Array.from(r.content.querySelectorAll("script[src]"));s.forEach((e=>e.remove())),this.innerHTML=r.innerHTML;for(const e of s){const t=document.createElement("script");Array.from(e.attributes).forEach((e=>{t.setAttribute(e.name,e.value)})),await new Promise(((e,r)=>{t.onload=e,t.onerror=r,this.appendChild(t)}))}return!0}return!1}get shadowStyles(){return":host{display:contents;}"}static replacements={root:"./"};static addReplacement(e,t){this.replacements={...this.replacements,[e]:t}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);

package/docs/kempo/components/PhotoViewer.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const openHandler=Symbol(),closeHandler=Symbol(),overlayHandler=Symbol(),prevHandler=Symbol(),nextHandler=Symbol(),keyboardHandler=Symbol(),imgKeyboardHandler=Symbol();export default class PhotoViewer extends Component{constructor(e="",n="",t={}){super();const{keyboardControls:o=!0,global:s=!1}=t;this.registerAttributes({src:e,alt:n,fullscreen:!1,keyboardControls:o,global:s})}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),this.rendered&&"src"===e&&n!==t?(this.shadowRoot.getElementById("img").src=t,this.shadowRoot.getElementById("fullscreen-img").src=t):this.rendered&&"alt"===e&&n!==t?(this.shadowRoot.getElementById("img").alt=t,this.shadowRoot.getElementById("fullscreen-img").alt=t):this.rendered&&"fullscreen"===e&&n!==t&&(dispatchEvent(this,"fullscreenchange "+(t?" fullscreen":" fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(t?document.addEventListener("keydown",this[keyboardHandler]):document.removeEventListener("keydown",this[keyboardHandler])))}async render(e){if(await super.render(e)){const e=this.shadowRoot.getElementById("img");e.src=this.src,e.alt=this.alt;const n=this.shadowRoot.getElementById("fullscreen-img");n.src=this.src,n.alt=this.alt;const t=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(t&&!t.assignedNodes().length){this.shadowRoot.querySelector("slot:not([name])").assignedNodes().forEach((e=>{const n=e.cloneNode(!0);this.appendChild(n).slot="fullscreen-caption"}))}return onEvent(e,"click",this[openHandler]),onEvent(e,"keydown",this[imgKeyboardHandler]),onEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),onEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),onEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),onEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.updateNavigationState(),!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("img"),"click",this[openHandler]),offEvent(this.shadowRoot.getElementById("img"),"keydown",this[imgKeyboardHandler]),offEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),offEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),offEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),offEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.keyboardControls&&document.removeEventListener("keydown",this[keyboardHandler])}[imgKeyboardHandler]=e=>{"Enter"!==e.key||this.fullscreen||this.open()};[openHandler]=()=>{this.open()};[closeHandler]=()=>{this.close()};[overlayHandler]=e=>{e.target===e.currentTarget&&this.close()};[prevHandler]=e=>{e.stopPropagation();const n=this.getPrevSibling();n&&(this.close(),n.open())};[nextHandler]=e=>{e.stopPropagation();const n=this.getNextSibling();n&&(this.close(),n.open())};[keyboardHandler]=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[0===n?e.length-1:n-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[n===e.length-1?0:n+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter((e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName)).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach((n=>n.classList.toggle("d-n",!e)))}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}get shadowTemplate(){return'\n      <div id="wrapper">\n        <img id="img" tabindex="0" />\n        <div class="caption">\n          <slot></slot>\n        </div>\n        <div id="fullscreen-overlay">\n          <button id="close" class="no-btn">\n            <slot name="close">\n              <k-icon name="close"></k-icon>\n            </slot>\n          </button>\n          <button id="prev" class="nav-btn no-btn">\n            <slot name="prev">\n              <k-icon name="chevron-left"></k-icon>\n            </slot>\n          </button>\n          <button id="next" class="nav-btn no-btn">\n            <slot name="next">\n              <k-icon name="chevron-right"></k-icon>\n            </slot>\n          </button>\n          <div class="content">\n            <img id="fullscreen-img" />\n            <div class="caption">\n              <slot name="fullscreen-caption"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #wrapper {\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n      #img {\n        max-width: 100%;\n        height: auto;\n        cursor: pointer;\n        outline: none;\n        border-radius: var(--img_radius, 0);\n      }\n      #img:focus {\n        box-shadow: var(--focus_shadow);\n      }\n      #fullscreen-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 9999;\n        background: rgba(0,0,0,0.9);\n        padding: 2rem;\n        display: none;\n      }\n      :host([fullscreen]) #fullscreen-overlay {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .content {\n        position: relative;\n        max-width: 100%;\n        max-height: 90vh;\n      }\n      #fullscreen-img {\n        max-height: 75vh;\n        max-width: 100%;\n        object-fit: contain;\n        cursor: default;\n      }\n      #close {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n      }\n      .nav-btn {\n        position: fixed;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 1rem;\n        opacity: 0.7;\n        font-size: 3rem;\n        -webkit-text-stroke: 1px black;\n        text-stroke: 1px black;\n        text-shadow: 0 0 3px rgba(0,0,0,0.8);\n      }\n      .nav-btn::slotted(*),\n      .nav-btn k-icon {\n        filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));\n      }\n      .nav-btn:hover {\n        opacity: 1;\n      }\n      #prev {\n        left: 1rem;\n      }\n      #next {\n        right: 1rem;\n      }\n      .caption {\n        text-align: center;\n        max-width: 600px;\n        width: fit-content;\n        margin: 1rem auto 0;\n      }\n      #fullscreen-overlay .caption {\n        color: white;\n      }\n      :host([fullscreen]) .caption {\n        color: white;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"src","alt","fullscreen","keyboard-controls","global"]}window.customElements.define("k-photo-viewer",PhotoViewer);

package/docs/kempo/kempo-vars.css

@@ -1 +1 @@
-:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--c_input_border:var(--c_border);--btn_padding:var(--spacer_h) var(--spacer);--date_picker_icon_filter:invert(0)}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:var(--c_bg__alt);--input_tc:var(--tc);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--date_picker_icon_filter:invert(1)}
+:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--c_input_border:var(--c_border);--btn_padding:var(--spacer_h) var(--spacer);--date_picker_icon_filter:invert(0)}:root,[theme="light"]{color-scheme:light;--c_bg:rgb(249, 249, 249);--c_bg__inv:rgb(51, 51, 51);--c_bg__alt:rgb(238, 238, 238);--c_overscroll:rgb(255, 255, 255);--c_border:rgb(204, 204, 204);--c_border__inv:var(--d_c_bg_border);--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:rgb(221, 221, 221);--btn_bg__hover:rgb(204, 204, 204);--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:rgb(51, 51, 51);--c_bg__inv:rgb(249, 249, 249);--c_bg__alt:rgb(34, 34, 34);--c_overscroll:rgb(0, 0, 0);--c_border:rgb(119, 119, 119);--c_border__inv:rgb(204, 204, 204);--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:rgb(138, 180, 248);--tc_secondary:rgb(187, 102, 255);--tc_success:rgb(102, 187, 102);--tc_warning:rgb(255, 153, 51);--tc_danger:rgb(255, 85, 119);--btn_bg:rgb(170, 170, 170);--btn_bg__hover:rgb(187, 187, 187);--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:var(--c_bg__alt);--input_tc:var(--tc);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--date_picker_icon_filter:invert(1)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "description": "A web component library",
   "exports": {

package/src/components/Import.js

@@ -1,5 +1,4 @@
 import Component from './Component.js';
-
 export default class Import extends Component {
   constructor(src = ''){
     super();
@@ -13,59 +12,36 @@ export default class Import extends Component {
   async render(force){
     const src = this.src;
     if(src && await super.render(force)){
-      // Get raw text and process replacements first
       let contents = await (await fetch(src)).text();
       for (const [name, value] of Object.entries(Import.replacements)) {
         contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
       }
-      
-      // Now parse into template
       const temp = document.createElement('template');
       temp.innerHTML = contents;
-      
-      // Extract and handle scripts
       const scripts = Array.from(temp.content.querySelectorAll('script[src]'));
       scripts.forEach(script => script.remove());
-      
-      // Set content
       this.innerHTML = temp.innerHTML;
-      
-      // Add scripts back
       for (const script of scripts) {
         const newScript = document.createElement('script');
         Array.from(script.attributes).forEach(attr => {
           newScript.setAttribute(attr.name, attr.value);
         });
-        console.log('Adding script with src:', newScript.src); // Debug
         await new Promise((resolve, reject) => {
           newScript.onload = resolve;
           newScript.onerror = reject;
           this.appendChild(newScript);
         });
       }
-      
       return true;
     }
     return false;
   }
-
   get shadowStyles(){
-    return /*css*/`
-      :host {
-        display: contents;
-      }
-    `;
+    return /*css*/`:host{display:contents;}`;
   }
-
-  /* Static Members */
-  static replacements = {
-    root: './' 
-  };
+  static replacements = {root: './'};
   static addReplacement(name, value){
-    this.replacements = {
-      ...this.replacements,
-      [name]: value,
-    };
+    this.replacements = {...this.replacements,[name]: value};
   }
   static observedAttributes = [...super.observedAttributes, 'src'];
 }

package/src/components/PhotoViewer.js

@@ -0,0 +1,358 @@
+import Component from './Component.js';
+import './Icon.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const openHandler = Symbol(),
+      closeHandler = Symbol(),
+      overlayHandler = Symbol(),
+      prevHandler = Symbol(),
+      nextHandler = Symbol(),
+      keyboardHandler = Symbol(),
+      imgKeyboardHandler = Symbol();
+export default class PhotoViewer extends Component {
+  constructor(src = '', alt = '', options = {}){
+    super();
+    const {
+      keyboardControls = true,
+      global = false
+    } = options;
+    
+    this.registerAttributes({
+      src,
+      alt,
+      fullscreen: false,
+      keyboardControls,
+      global
+    });
+  }
+  /* Lifecycle Callbacks */
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(this.rendered && n === 'src' && oV !== nV){
+      this.shadowRoot.getElementById('img').src = nV;
+      this.shadowRoot.getElementById('fullscreen-img').src = nV;
+    } else if(this.rendered && n === 'alt' && oV !== nV){
+      this.shadowRoot.getElementById('img').alt = nV;
+      this.shadowRoot.getElementById('fullscreen-img').alt = nV;
+    } else if(this.rendered && n === 'fullscreen' && oV !== nV){
+      dispatchEvent(this, `fullscreenchange ${nV?' fullscreen':' fullscreenclose'}`);
+      this.updateNavigationState();
+      if(this.keyboardControls) {
+        if(nV) {
+          document.addEventListener('keydown', this[keyboardHandler]);
+        } else {
+          document.removeEventListener('keydown', this[keyboardHandler]);
+        }
+      }
+    }
+  }
+  async render(force){
+    if(await super.render(force)){
+      const $img = this.shadowRoot.getElementById('img')
+      $img.src = this.src;
+      $img.alt = this.alt;
+      const $fullImg = this.shadowRoot.getElementById('fullscreen-img')
+      $fullImg.src = this.src;
+      $fullImg.alt = this.alt;
+      
+      // Handle fullscreen caption
+      const fullscreenSlot = this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');
+      if (fullscreenSlot && !fullscreenSlot.assignedNodes().length) {
+        const defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+        const contents = defaultSlot.assignedNodes();
+        contents.forEach(node => {
+          const clone = node.cloneNode(true);
+          this.appendChild(clone).slot = 'fullscreen-caption';
+        });
+      }
+
+      onEvent($img, 'click', this[openHandler]);
+      onEvent($img, 'keydown', this[imgKeyboardHandler]);
+      onEvent(this.shadowRoot.getElementById('close'), 'click', this[closeHandler]);
+      onEvent(this.shadowRoot.getElementById('fullscreen-overlay'), 'click', this[overlayHandler]);
+      onEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevHandler]);
+      onEvent(this.shadowRoot.getElementById('next'), 'click', this[nextHandler]);
+      this.updateNavigationState();
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('img'), 'click', this[openHandler]);
+    offEvent(this.shadowRoot.getElementById('img'), 'keydown', this[imgKeyboardHandler]);
+    offEvent(this.shadowRoot.getElementById('close'), 'click', this[closeHandler]);
+    offEvent(this.shadowRoot.getElementById('fullscreen-overlay'), 'click', this[overlayHandler]);
+    offEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevHandler]);
+    offEvent(this.shadowRoot.getElementById('next'), 'click', this[nextHandler]);
+    if(this.keyboardControls) {
+      document.removeEventListener('keydown', this[keyboardHandler]);
+    }
+  }
+
+  /* Private Methods */
+  [imgKeyboardHandler] = (e) => {
+    if(e.key === 'Enter' && !this.fullscreen) {
+      this.open();
+    }
+  }
+  [openHandler] = () => {
+    this.open();
+  }
+  [closeHandler] = () => {
+    this.close();
+  }
+  [overlayHandler] = (e) => {
+    if (e.target === e.currentTarget) {
+      this.close();
+    }
+  }
+  [prevHandler] = (e) => {
+    e.stopPropagation();
+    const prev = this.getPrevSibling();
+    if(prev) {
+      this.close();
+      prev.open();
+    }
+  }
+  [nextHandler] = (e) => {
+    e.stopPropagation();
+    const next = this.getNextSibling();
+    if(next) {
+      this.close();
+      next.open();
+    }
+  }
+  [keyboardHandler] = (e) => {
+    if(e.key === 'Escape') {
+      this.close();
+    } else if(e.key === 'ArrowLeft') {
+      const prev = this.getPrevSibling();
+      if(prev) {
+        this.close();
+        prev.open();
+      }
+    } else if(e.key === 'ArrowRight') {
+      const next = this.getNextSibling();
+      if(next) {
+        this.close();
+        next.open();
+      }
+    }
+  }
+  getPrevSibling() {
+    if (this.global) {
+      // Find any PhotoViewer in document
+      const viewers = Array.from(document.getElementsByTagName('k-photo-viewer'));
+      const index = viewers.indexOf(this);
+      if (index === -1) return null;
+      return viewers[index === 0 ? viewers.length - 1 : index - 1];
+    } else {
+      // Only look at direct siblings
+      let prev = this.previousElementSibling;
+      while (prev && prev.tagName !== 'K-PHOTO-VIEWER') {
+        prev = prev.previousElementSibling;
+      }
+      if (!prev && this.hasPhotoSiblings()) {
+        prev = this.parentElement.lastElementChild;
+        while (prev && prev.tagName !== 'K-PHOTO-VIEWER') {
+          prev = prev.previousElementSibling;
+        }
+      }
+      return prev;
+    }
+  }
+
+  getNextSibling() {
+    if (this.global) {
+      // Find any PhotoViewer in document
+      const viewers = Array.from(document.getElementsByTagName('k-photo-viewer'));
+      const index = viewers.indexOf(this);
+      if (index === -1) return null;
+      return viewers[index === viewers.length - 1 ? 0 : index + 1];
+    } else {
+      // Only look at direct siblings
+      let next = this.nextElementSibling;
+      while (next && next.tagName !== 'K-PHOTO-VIEWER') {
+        next = next.nextElementSibling;
+      }
+      if (!next && this.hasPhotoSiblings()) {
+        next = this.parentElement.firstElementChild;
+        while (next && next.tagName !== 'K-PHOTO-VIEWER') {
+          next = next.nextElementSibling;
+        }
+      }
+      return next;
+    }
+  }
+
+  hasPhotoSiblings() {
+    if (this.global) {
+      return document.getElementsByTagName('k-photo-viewer').length > 1;
+    }
+    return Array.from(this.parentElement.children)
+      .filter(el => el !== this && el.tagName === 'K-PHOTO-VIEWER')
+      .length > 0;
+  }
+
+  updateNavigationState() {
+    const hasNavigation = this.fullscreen && this.hasPhotoSiblings();
+    const nav = this.shadowRoot.querySelectorAll('.nav-btn');
+    nav.forEach(btn => btn.classList.toggle('d-n', !hasNavigation));
+  }
+
+  /* Public Methods */
+  open(){
+    this.fullscreen = true;
+  }
+  close(){
+    this.fullscreen = false;
+  }
+  toggle(){
+    this.fullscreen = !this.fullscreen;
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="wrapper">
+        <img id="img" tabindex="0" />
+        <div class="caption">
+          <slot></slot>
+        </div>
+        <div id="fullscreen-overlay">
+          <button id="close" class="no-btn">
+            <slot name="close">
+              <k-icon name="close"></k-icon>
+            </slot>
+          </button>
+          <button id="prev" class="nav-btn no-btn">
+            <slot name="prev">
+              <k-icon name="chevron-left"></k-icon>
+            </slot>
+          </button>
+          <button id="next" class="nav-btn no-btn">
+            <slot name="next">
+              <k-icon name="chevron-right"></k-icon>
+            </slot>
+          </button>
+          <div class="content">
+            <img id="fullscreen-img" />
+            <div class="caption">
+              <slot name="fullscreen-caption"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+      }
+      #wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      #img {
+        max-width: 100%;
+        height: auto;
+        cursor: pointer;
+        outline: none;
+        border-radius: var(--img_radius, 0);
+      }
+      #img:focus {
+        box-shadow: var(--focus_shadow);
+      }
+      #fullscreen-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        background: rgba(0,0,0,0.9);
+        padding: 2rem;
+        display: none;
+      }
+      :host([fullscreen]) #fullscreen-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .content {
+        position: relative;
+        max-width: 100%;
+        max-height: 90vh;
+      }
+      #fullscreen-img {
+        max-height: 75vh;
+        max-width: 100%;
+        object-fit: contain;
+        cursor: default;
+      }
+      #close {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        z-index: 1;
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+      }
+      .nav-btn {
+        position: fixed;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 1rem;
+        opacity: 0.7;
+        font-size: 3rem;
+        -webkit-text-stroke: 1px black;
+        text-stroke: 1px black;
+        text-shadow: 0 0 3px rgba(0,0,0,0.8);
+      }
+      .nav-btn::slotted(*),
+      .nav-btn k-icon {
+        filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));
+      }
+      .nav-btn:hover {
+        opacity: 1;
+      }
+      #prev {
+        left: 1rem;
+      }
+      #next {
+        right: 1rem;
+      }
+      .caption {
+        text-align: center;
+        max-width: 600px;
+        width: fit-content;
+        margin: 1rem auto 0;
+      }
+      #fullscreen-overlay .caption {
+        color: white;
+      }
+      :host([fullscreen]) .caption {
+        color: white;
+      }
+    `;
+  }
+
+  /* Static Members */
+  static observedAttributes = [...super.observedAttributes, 'src', 'alt', 'fullscreen', 'keyboard-controls', 'global'];
+}
+window.customElements.define('k-photo-viewer', PhotoViewer);

package/src/kempo-vars.css

@@ -31,23 +31,23 @@
 :root,
 [theme="light"] {
   color-scheme: light;
-  --c_bg: #f9f9f9;
-  --c_bg__inv: #333;
-  --c_bg__alt: #eee;
-  --c_overscroll: white;
-  --c_border: #ccc;
+  --c_bg: rgb(249, 249, 249);
+  --c_bg__inv: rgb(51, 51, 51);
+  --c_bg__alt: rgb(238, 238, 238);
+  --c_overscroll: rgb(255, 255, 255);
+  --c_border: rgb(204, 204, 204);
   --c_border__inv: var(--d_c_bg_border);
-  --c_primary: #36f;
-  --c_primary__hover: #14d;
-  --c_secondary: #93f;
-  --c_secondary__hover: #71d;
-  --c_success: #080;
-  --c_success__hover: #060;
-  --c_warning: #f60;
-  --c_warning__hover: #d40;
-  --c_danger: #f03;
-  --c_danger__hover: #d01;
-  --c_input_accent: #36f;
+  --c_primary: rgb(51, 102, 255);
+  --c_primary__hover: rgb(17, 68, 221);
+  --c_secondary: rgb(153, 51, 255);
+  --c_secondary__hover: rgb(119, 17, 221);
+  --c_success: rgb(0, 136, 0);
+  --c_success__hover: rgb(0, 102, 0);
+  --c_warning: rgb(255, 102, 0);
+  --c_warning__hover: rgb(221, 68, 0);
+  --c_danger: rgb(255, 0, 51);
+  --c_danger__hover: rgb(221, 0, 17);
+  --c_input_accent: rgb(51, 102, 255);
   --c_highlight: rgba(41, 100, 210, 0.25);
   --tc: rgba(0, 0, 0, 0.93);
   --tc_dark: var(--tc);
@@ -68,8 +68,8 @@
   --btn_box_shadow: 0 0 0 transparent;
   --btn_box_shadow__hover: 0 0 0 transparent;
   --btn_border: transparent;
-  --btn_bg: #ddd;
-  --btn_bg__hover: #ccc;
+  --btn_bg: rgb(221, 221, 221);
+  --btn_bg__hover: rgb(204, 204, 204);
   --btn_tc: rgba(0, 0, 0, 0.93);
   --btn_transparent__hover: rgba(0, 0, 0, 0.05);
   --tc_link: var(--tc_primary);
@@ -85,23 +85,23 @@
 [auto-theme="dark"]:not([theme="light"]),
 [theme="dark"] {
   color-scheme: dark;
-  --c_bg: #333;
-  --c_bg__inv: #f9f9f9;
-  --c_bg__alt: #222;
-  --c_overscroll: black;
-  --c_border: #777;
-  --c_border__inv: #ccc;
-  --c_primary: #36f;
-  --c_primary__hover: #14d;
-  --c_secondary: #93f;
-  --c_secondary__hover: #71d;
-  --c_success: #080;
-  --c_success__hover: #060;
-  --c_warning: #f60;
-  --c_warning__hover: #d40;
-  --c_danger: #f03;
-  --c_danger__hover: #d01;
-  --c_input_accent: #36f;
+  --c_bg: rgb(51, 51, 51);
+  --c_bg__inv: rgb(249, 249, 249);
+  --c_bg__alt: rgb(34, 34, 34);
+  --c_overscroll: rgb(0, 0, 0);
+  --c_border: rgb(119, 119, 119);
+  --c_border__inv: rgb(204, 204, 204);
+  --c_primary: rgb(51, 102, 255);
+  --c_primary__hover: rgb(17, 68, 221);
+  --c_secondary: rgb(153, 51, 255);
+  --c_secondary__hover: rgb(119, 17, 221);
+  --c_success: rgb(0, 136, 0);
+  --c_success__hover: rgb(0, 102, 0);
+  --c_warning: rgb(255, 102, 0);
+  --c_warning__hover: rgb(221, 68, 0);
+  --c_danger: rgb(255, 0, 51);
+  --c_danger__hover: rgb(221, 0, 17);
+  --c_input_accent: rgb(51, 102, 255);
   --c_highlight: rgba(0, 89, 255, 0.25);
   --tc: rgba(255, 255, 255, 0.93);
   --tc_dark: rgba(0, 0, 0, 0.93);
@@ -114,13 +114,13 @@
   --tc_on_warning: var(--tc);
   --tc_on_danger: var(--tc);
   --c_overlay: rgba(0, 0, 0, 0.5);
-  --tc_primary: #8ab4f8;
-  --tc_secondary: #b6f;
-  --tc_success: #6b6;
-  --tc_warning: #f93;
-  --tc_danger: #f57;
-  --btn_bg: #aaa;
-  --btn_bg__hover: #bbb;
+  --tc_primary: rgb(138, 180, 248);
+  --tc_secondary: rgb(187, 102, 255);
+  --tc_success: rgb(102, 187, 102);
+  --tc_warning: rgb(255, 153, 51);
+  --tc_danger: rgb(255, 85, 119);
+  --btn_bg: rgb(170, 170, 170);
+  --btn_bg__hover: rgb(187, 187, 187);
   --btn_tc: rgba(0, 0, 0, 0.93);
   --btn_transparent__hover: rgba(255, 255, 255, 0.05);
   --btn_box_shadow: 0 0 0 transparent;