kempo-ui 0.4.21 → 0.4.23

package/dist/components/PhotoViewer.js

@@ -1,4 +1,4 @@
-import e from"./ShadowComponent.js";import{html as t,css as n}from"../lit-all.min.js";import{boolExists as o}from"../utils/propConverters.js";import"./Icon.js";export default class i extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:o},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:o},global:{type:Boolean,reflect:!0,converter:o}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=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())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-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")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+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(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
+import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from"../lit-all.min.js";import{boolExists as i}from"../utils/propConverters.js";import"./Icon.js";export default class l extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:i},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:i},global:{type:Boolean,reflect:!0,converter:i}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=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())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}static open(e,t=0,n={}){const{keyboardControls:i=!0,onClose:l}=n,s=document.createElement("div");s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.zIndex="80";const r=e.map(e=>{const t=document.createElement("k-photo-viewer");return t.src=e.src,t.alt=e.alt||"",t.keyboardControls=i,void 0!==e.caption&&("string"==typeof e.caption?t.innerHTML=e.caption:o(e.caption,t)),s.appendChild(t),t});document.body.appendChild(s);const a=()=>{r.some(e=>e.fullscreen)||(r.forEach(e=>e.removeEventListener("fullscreenclose",a)),s.remove(),l?.())};r.forEach(e=>e.addEventListener("fullscreenclose",a));const c=Math.min(Math.max(t,0),r.length-1);return r[c].open(),r[c]}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-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")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+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(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
 		:host {
 			display: block;
 		}
@@ -132,4 +132,4 @@ import e from"./ShadowComponent.js";import{html as t,css as n}from"../lit-all.mi
 					</div>
 				</div>
 			</div>
-		`}}customElements.define("k-photo-viewer",i);
+		`}}customElements.define("k-photo-viewer",l);

package/docs/components/photo-viewer.html

@@ -506,9 +506,11 @@
           <a href="#globalNavigation">Global Navigation</a><br />
           <a href="#customControls">Custom Controls</a><br />
           <a href="#captions">Captions</a><br />
-          
+          <a href="#programmaticGallery">Programmatic Gallery</a><br />
+
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
+          <a href="#staticMethods">Static Methods</a><br />
           <a href="#requirements">Requirements</a><br />
           <a href="#properties">Properties</a><br />
           <a href="#methods">Methods</a><br />
@@ -665,6 +667,34 @@
       </div>
     </div>
 
+    <h3 id="programmaticGallery"><a href="#programmaticGallery" class="no-link">Programmatic Gallery</a></h3>
+    <p>Use the static <code>PhotoViewer.open(content, openIndex, options)</code> method to launch a fullscreen gallery popup directly from JavaScript, without needing any <code>k-photo-viewer</code> thumbnails in the page. <code>content</code> is an array of <code>{ src, caption }</code> objects, where <code>caption</code> can be an HTML string or a lit <code>html</code> template. <code>openIndex</code> (optional, default <code>0</code>) is the index of the photo to open first, and navigation wraps within the array.</p>
+
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"galleryBtn"</span>&gt;</span>Open Gallery<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-title class_">PhotoViewer</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/PhotoViewer.js'</span>;<br />  <span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/lit-all.min.js'</span>;<br /><br />  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'galleryBtn'</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, () =&gt; {<br />    <span class="hljs-title class_">PhotoViewer</span>.<span class="hljs-title function_">open</span>([<br />      { <span class="hljs-attr">src</span>: <span class="hljs-string">'../media/civic.jpg'</span>, <span class="hljs-attr">caption</span>: <span class="hljs-string">'&lt;h6&gt;Honda Civic Type R&lt;/h6&gt;'</span> },<br />      { <span class="hljs-attr">src</span>: <span class="hljs-string">'../media/corvette.jpg'</span>, <span class="hljs-attr">caption</span>: html`<span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Chevrolet Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>` },<br />      { <span class="hljs-attr">src</span>: <span class="hljs-string">'../media/evo.jpg'</span>, <span class="hljs-attr">caption</span>: <span class="hljs-string">'&lt;h6&gt;Mitsubishi Lancer Evolution&lt;/h6&gt;'</span> }<br />    ], <span class="hljs-number">1</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <button id="galleryBtn" class="mb">Open Gallery</button>
+          <script type="module">
+            import PhotoViewer from '../src/components/PhotoViewer.js';
+            import { html } from '../src/lit-all.min.js';
+
+            document.getElementById('galleryBtn').addEventListener('click', () => {
+              PhotoViewer.open([
+                { src: '../media/civic.jpg', caption: '<h6>Honda Civic Type R</h6>' },
+                { src: '../media/corvette.jpg', caption: html`<h6>Chevrolet Corvette C8</h6>` },
+                { src: '../media/evo.jpg', caption: '<h6>Mitsubishi Lancer Evolution</h6>' }
+              ], 1);
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -674,6 +704,17 @@
     </h5>
     <p>Creates a new PhotoViewer instance. Configuration is done through attributes or properties.</p>
 
+    <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <h5><code>PhotoViewer.open(content<i>: Array&lt;{ src, caption }&gt;</i>, openIndex<i>?: number</i>, options<i>?: object</i>)<i>: PhotoViewer</i></code></h5>
+    <p>Opens a fullscreen gallery popup without needing any <code>k-photo-viewer</code> elements on the page. Creates a hidden, isolated set of PhotoViewers, opens the one at <code>openIndex</code>, and removes them all from the DOM once the gallery is fully closed.</p>
+    <ul>
+      <li><strong>content</strong>: Array of <code>{ src, caption, alt }</code> objects. <code>src</code> is the image URL. <code>caption</code> is optional and may be an HTML string or a lit <code>html</code> template result; it's used as both the default caption and the fullscreen caption. <code>alt</code> is optional alt text for the image.</li>
+      <li><strong>openIndex</strong>: Index within <code>content</code> to open first. Defaults to <code>0</code>.</li>
+      <li><strong>options.keyboardControls</strong>: Whether keyboard controls (Escape, Arrow Left/Right) are enabled for the popup. Defaults to <code>true</code>.</li>
+      <li><strong>options.onClose</strong>: Callback invoked after the gallery is fully closed and removed from the DOM.</li>
+    </ul>
+    <p>Returns the <code>PhotoViewer</code> instance that was opened.</p>
+
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
       <li><a href="./ShadowComponent.html">ShadowComponent</a></li>

package/docs/src/components/PhotoViewer.js

@@ -1,4 +1,4 @@
-import e from"./ShadowComponent.js";import{html as t,css as n}from"../lit-all.min.js";import{boolExists as o}from"../utils/propConverters.js";import"./Icon.js";export default class i extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:o},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:o},global:{type:Boolean,reflect:!0,converter:o}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=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())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-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")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+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(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
+import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from"../lit-all.min.js";import{boolExists as i}from"../utils/propConverters.js";import"./Icon.js";export default class l extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:i},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:i},global:{type:Boolean,reflect:!0,converter:i}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=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())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}static open(e,t=0,n={}){const{keyboardControls:i=!0,onClose:l}=n,s=document.createElement("div");s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.zIndex="80";const r=e.map(e=>{const t=document.createElement("k-photo-viewer");return t.src=e.src,t.alt=e.alt||"",t.keyboardControls=i,void 0!==e.caption&&("string"==typeof e.caption?t.innerHTML=e.caption:o(e.caption,t)),s.appendChild(t),t});document.body.appendChild(s);const a=()=>{r.some(e=>e.fullscreen)||(r.forEach(e=>e.removeEventListener("fullscreenclose",a)),s.remove(),l?.())};r.forEach(e=>e.addEventListener("fullscreenclose",a));const c=Math.min(Math.max(t,0),r.length-1);return r[c].open(),r[c]}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-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")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+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(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
 		:host {
 			display: block;
 		}
@@ -132,4 +132,4 @@ import e from"./ShadowComponent.js";import{html as t,css as n}from"../lit-all.mi
 					</div>
 				</div>
 			</div>
-		`}}customElements.define("k-photo-viewer",i);
+		`}}customElements.define("k-photo-viewer",l);

package/docs-src/components/photo-viewer.page.html

@@ -13,9 +13,11 @@
           <a href="#globalNavigation">Global Navigation</a><br />
           <a href="#customControls">Custom Controls</a><br />
           <a href="#captions">Captions</a><br />
-          
+          <a href="#programmaticGallery">Programmatic Gallery</a><br />
+
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
+          <a href="#staticMethods">Static Methods</a><br />
           <a href="#requirements">Requirements</a><br />
           <a href="#properties">Properties</a><br />
           <a href="#methods">Methods</a><br />
@@ -172,6 +174,34 @@
       </div>
     </div>
 
+    <h3 id="programmaticGallery"><a href="#programmaticGallery" class="no-link">Programmatic Gallery</a></h3>
+    <p>Use the static <code>PhotoViewer.open(content, openIndex, options)</code> method to launch a fullscreen gallery popup directly from JavaScript, without needing any <code>k-photo-viewer</code> thumbnails in the page. <code>content</code> is an array of <code>{ src, caption }</code> objects, where <code>caption</code> can be an HTML string or a lit <code>html</code> template. <code>openIndex</code> (optional, default <code>0</code>) is the index of the photo to open first, and navigation wraps within the array.</p>
+
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"galleryBtn"</span>&gt;</span>Open Gallery<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-title class_">PhotoViewer</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/PhotoViewer.js'</span>;<br />  <span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/lit-all.min.js'</span>;<br /><br />  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'galleryBtn'</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, () =&gt; {<br />    <span class="hljs-title class_">PhotoViewer</span>.<span class="hljs-title function_">open</span>([<br />      { <span class="hljs-attr">src</span>: <span class="hljs-string">'../media/civic.jpg'</span>, <span class="hljs-attr">caption</span>: <span class="hljs-string">'&lt;h6&gt;Honda Civic Type R&lt;/h6&gt;'</span> },<br />      { <span class="hljs-attr">src</span>: <span class="hljs-string">'../media/corvette.jpg'</span>, <span class="hljs-attr">caption</span>: html`<span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Chevrolet Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>` },<br />      { <span class="hljs-attr">src</span>: <span class="hljs-string">'../media/evo.jpg'</span>, <span class="hljs-attr">caption</span>: <span class="hljs-string">'&lt;h6&gt;Mitsubishi Lancer Evolution&lt;/h6&gt;'</span> }<br />    ], <span class="hljs-number">1</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <button id="galleryBtn" class="mb">Open Gallery</button>
+          <script type="module">
+            import PhotoViewer from '{{pathToRoot}}src/components/PhotoViewer.js';
+            import { html } from '{{pathToRoot}}src/lit-all.min.js';
+
+            document.getElementById('galleryBtn').addEventListener('click', () => {
+              PhotoViewer.open([
+                { src: '{{pathToRoot}}media/civic.jpg', caption: '<h6>Honda Civic Type R</h6>' },
+                { src: '{{pathToRoot}}media/corvette.jpg', caption: html`<h6>Chevrolet Corvette C8</h6>` },
+                { src: '{{pathToRoot}}media/evo.jpg', caption: '<h6>Mitsubishi Lancer Evolution</h6>' }
+              ], 1);
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -181,6 +211,17 @@
     </h5>
     <p>Creates a new PhotoViewer instance. Configuration is done through attributes or properties.</p>
 
+    <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <h5><code>PhotoViewer.open(content<i>: Array&lt;{ src, caption }&gt;</i>, openIndex<i>?: number</i>, options<i>?: object</i>)<i>: PhotoViewer</i></code></h5>
+    <p>Opens a fullscreen gallery popup without needing any <code>k-photo-viewer</code> elements on the page. Creates a hidden, isolated set of PhotoViewers, opens the one at <code>openIndex</code>, and removes them all from the DOM once the gallery is fully closed.</p>
+    <ul>
+      <li><strong>content</strong>: Array of <code>{ src, caption, alt }</code> objects. <code>src</code> is the image URL. <code>caption</code> is optional and may be an HTML string or a lit <code>html</code> template result; it's used as both the default caption and the fullscreen caption. <code>alt</code> is optional alt text for the image.</li>
+      <li><strong>openIndex</strong>: Index within <code>content</code> to open first. Defaults to <code>0</code>.</li>
+      <li><strong>options.keyboardControls</strong>: Whether keyboard controls (Escape, Arrow Left/Right) are enabled for the popup. Defaults to <code>true</code>.</li>
+      <li><strong>options.onClose</strong>: Callback invoked after the gallery is fully closed and removed from the DOM.</li>
+    </ul>
+    <p>Returns the <code>PhotoViewer</code> instance that was opened.</p>
+
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
       <li><a href="./ShadowComponent.html">ShadowComponent</a></li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.21",
+  "version": "0.4.23",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/PhotoViewer.js

@@ -1,5 +1,5 @@
 import ShadowComponent from './ShadowComponent.js';
-import { html, css } from '../lit-all.min.js';
+import { html, css, render } from '../lit-all.min.js';
 import { boolExists } from '../utils/propConverters.js';
 import './Icon.js';
 
@@ -138,6 +138,54 @@ export default class PhotoViewer extends ShadowComponent {
 		this.fullscreen = !this.fullscreen;
 	}
 
+	/*
+		Static Methods
+	*/
+	static open(content, openIndex = 0, options = {}) {
+		const { keyboardControls = true, onClose } = options;
+
+		const container = document.createElement('div');
+		container.style.position = 'fixed';
+		container.style.top = '0';
+		container.style.left = '0';
+		container.style.width = '0';
+		container.style.height = '0';
+		container.style.overflow = 'hidden';
+		container.style.zIndex = '80';
+
+		const viewers = content.map(item => {
+			const viewer = document.createElement('k-photo-viewer');
+			viewer.src = item.src;
+			viewer.alt = item.alt || '';
+			viewer.keyboardControls = keyboardControls;
+			if(item.caption !== undefined) {
+				if(typeof item.caption === 'string') {
+					viewer.innerHTML = item.caption;
+				} else {
+					render(item.caption, viewer);
+				}
+			}
+			container.appendChild(viewer);
+			return viewer;
+		});
+
+		document.body.appendChild(container);
+
+		const handleClose = () => {
+			if(!viewers.some(viewer => viewer.fullscreen)) {
+				viewers.forEach(viewer => viewer.removeEventListener('fullscreenclose', handleClose));
+				container.remove();
+				onClose?.();
+			}
+		};
+		viewers.forEach(viewer => viewer.addEventListener('fullscreenclose', handleClose));
+
+		const startIndex = Math.min(Math.max(openIndex, 0), viewers.length - 1);
+		viewers[startIndex].open();
+
+		return viewers[startIndex];
+	}
+
 	/*
 		Private Methods
 	*/

package/tests/components/Chat.browser-test.js

@@ -182,29 +182,6 @@ export default {
 		pass('Send button has padding defined via theme custom property');
 	},
 
-	'send button should be circular': async ({pass, fail}) => {
-		const { container, chat } = await createChat();
-
-		const sendBtn = chat.shadowRoot?.querySelector('.send-btn');
-		if(!sendBtn){
-			cleanup(container);
-			fail('Send button not found in shadow DOM');
-			return;
-		}
-
-		const styles = getComputedStyle(sendBtn);
-		const borderRadius = styles.borderRadius;
-
-		if(borderRadius !== '50%'){
-			cleanup(container);
-			fail(`Expected border-radius 50%, got ${borderRadius}`);
-			return;
-		}
-
-		cleanup(container);
-		pass('Send button is circular');
-	},
-
 	/*
 		Chat Component - Message Management Tests
 	*/

package/tests/components/PhotoViewer.browser-test.js

@@ -1,4 +1,5 @@
 import PhotoViewer from '../../src/components/PhotoViewer.js';
+import { html } from '../../src/lit-all.min.js';
 
 const createPhotoViewer = async (options = {}) => {
 	const container = document.createElement('div');
@@ -636,5 +637,199 @@ export default {
 
 		cleanup(container);
 		pass('Caption content slotted correctly');
+	},
+
+	/*
+		Static open() Tests
+	*/
+	'should create and open a viewer with PhotoViewer.open': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300', caption: '<span>Photo 1</span>' },
+			{ src: 'https://picsum.photos/200/301', caption: '<span>Photo 2</span>' }
+		]);
+		await viewer.updateComplete;
+
+		if(!(viewer instanceof PhotoViewer)){
+			viewer.close();
+			fail('open() should return a PhotoViewer instance');
+			return;
+		}
+
+		if(viewer.fullscreen !== true){
+			viewer.close();
+			fail('open() should open the viewer in fullscreen');
+			return;
+		}
+
+		viewer.close();
+		pass('PhotoViewer.open() creates and opens a viewer');
+	},
+
+	'should open at the given openIndex': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300', caption: 'Photo 1' },
+			{ src: 'https://picsum.photos/200/301', caption: 'Photo 2' },
+			{ src: 'https://picsum.photos/200/302', caption: 'Photo 3' }
+		], 1);
+		await viewer.updateComplete;
+
+		if(viewer.src !== 'https://picsum.photos/200/301'){
+			viewer.close();
+			fail(`Expected src for index 1, got "${viewer.src}"`);
+			return;
+		}
+
+		viewer.close();
+		pass('PhotoViewer.open() opens at the given openIndex');
+	},
+
+	'should default to openIndex 0': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300' },
+			{ src: 'https://picsum.photos/200/301' }
+		]);
+		await viewer.updateComplete;
+
+		if(viewer.src !== 'https://picsum.photos/200/300'){
+			viewer.close();
+			fail(`Expected src for index 0, got "${viewer.src}"`);
+			return;
+		}
+
+		viewer.close();
+		pass('PhotoViewer.open() defaults to openIndex 0');
+	},
+
+	'should remove the gallery from the DOM after closing': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300' }
+		]);
+		await viewer.updateComplete;
+
+		viewer.close();
+		await viewer.updateComplete;
+
+		if(document.body.contains(viewer)){
+			fail('Gallery should be removed from the DOM after closing');
+			return;
+		}
+
+		pass('Gallery removed from the DOM after closing');
+	},
+
+	'should not remove the gallery from the DOM while navigating': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300' },
+			{ src: 'https://picsum.photos/200/301' }
+		], 0);
+		await viewer.updateComplete;
+
+		const next = viewer.getNextSibling();
+		viewer.handleNextClick({ stopPropagation: () => {} });
+		await next.updateComplete;
+
+		if(!document.body.contains(next)){
+			next.close();
+			fail('Gallery should remain in the DOM while navigating between photos');
+			return;
+		}
+
+		if(next.fullscreen !== true){
+			next.close();
+			fail('Next photo should be opened after navigating');
+			return;
+		}
+
+		next.close();
+		pass('Gallery remains in the DOM while navigating');
+	},
+
+	'should call onClose when the gallery is fully closed': async ({pass, fail}) => {
+		let closed = false;
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300' }
+		], 0, { onClose: () => { closed = true; } });
+		await viewer.updateComplete;
+
+		viewer.close();
+		await viewer.updateComplete;
+
+		if(!closed){
+			fail('onClose callback should be called after the gallery closes');
+			return;
+		}
+
+		pass('onClose callback called after gallery closes');
+	},
+
+	'should render string captions in the opened viewer': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300', caption: '<span class="open-test-caption">Hello</span>' }
+		]);
+		await viewer.updateComplete;
+
+		const caption = viewer.querySelector('.open-test-caption');
+		if(!caption || caption.textContent !== 'Hello'){
+			viewer.close();
+			fail('String caption should be rendered as HTML content');
+			return;
+		}
+
+		viewer.close();
+		pass('String caption rendered correctly');
+	},
+
+	'should render lit html template captions in the opened viewer': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300', caption: html`<span class="open-test-lit-caption">Lit Hello</span>` }
+		]);
+		await viewer.updateComplete;
+
+		const caption = viewer.querySelector('.open-test-lit-caption');
+		if(!caption || caption.textContent !== 'Lit Hello'){
+			viewer.close();
+			fail('Lit html caption should be rendered as content');
+			return;
+		}
+
+		viewer.close();
+		pass('Lit html template caption rendered correctly');
+	},
+
+	'should keep multiple opened photos isolated as siblings': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300' },
+			{ src: 'https://picsum.photos/200/301' }
+		]);
+		await viewer.updateComplete;
+
+		const hasSiblings = viewer.hasPhotoSiblings();
+		if(!hasSiblings){
+			viewer.close();
+			fail('Opened gallery photos should detect each other as siblings');
+			return;
+		}
+
+		viewer.close();
+		pass('Opened gallery photos are isolated siblings');
+	},
+
+	'should have z-index to prevent stacking context issues': async ({pass, fail}) => {
+		const viewer = PhotoViewer.open([
+			{ src: 'https://picsum.photos/200/300' }
+		]);
+		await viewer.updateComplete;
+
+		const container = viewer.parentElement;
+		const zIndex = window.getComputedStyle(container).zIndex;
+
+		if(zIndex !== '80'){
+			viewer.close();
+			fail(`Expected container z-index 80, got ${zIndex}`);
+			return;
+		}
+
+		viewer.close();
+		pass('Container has correct z-index elevation');
 	}
 };

package/tests/components/controls/Control.browser-test.js

@@ -114,19 +114,19 @@ export default {
 	},
 
 	/*
-		invokeHost Tests
+		Host Method Invocation Tests
 	*/
-	'should invoke host method via invokeHost': async ({pass, fail}) => {
+	'should invoke host method directly via host getter': async ({pass, fail}) => {
 		const { container, table, control } = await createTableWithControl();
 		const newRecords = [{ id: 99, name: 'Zara', age: 22 }];
-		control.invokeHost('setRecords', newRecords);
+		control.host?.setRecords(newRecords);
 		await table.updateComplete;
 		if(table.records.length !== 1 || table.records[0].name !== 'Zara'){
 			cleanup(container);
-			return fail('invokeHost should call host method');
+			return fail('Host method should be callable via control.host');
 		}
 		cleanup(container);
-		pass('invokeHost calls host method correctly');
+		pass('Host method invoked correctly via control.host');
 	},
 
 	/*