kempo-ui 0.3.4 → 0.3.6

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

@@ -0,0 +1,253 @@
+<page pageName="PhotoViewer" title="PhotoViewer - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">PhotoViewer</h1>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#gallery">Gallery Navigation</a><br />
+          <a href="#globalNavigation">Global Navigation</a><br />
+          <a href="#customControls">Custom Controls</a><br />
+          <a href="#captions">Captions</a><br />
+          
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#events">Events</a><br />
+          <a href="#slots">Slots</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>The <code>k-photo-viewer</code> component displays images with fullscreen viewing capabilities. Click on any image to open it in fullscreen mode.</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">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Honda Civic Type R - Track-focused hot hatch<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+        <div class="mb" style="max-width: 400px;">
+          <k-photo-viewer
+            src="{{pathToRoot}}media/civic.jpg"
+            alt="Honda Civic Type R"
+          >
+            <p>Honda Civic Type R - Track-focused hot hatch</p>
+          </k-photo-viewer>
+        </div>
+      </k-card>
+      </div>
+    </div>
+
+    <h3 id="gallery"><a href="#gallery" class="no-link">Gallery Navigation</a></h3>
+    <p>When multiple PhotoViewer components are siblings, you can navigate between them using the arrow buttons in fullscreen mode or keyboard arrow keys.</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"gallery"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda Civic Type R<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span>&gt;</span><br />    <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-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div class="gallery mb" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px;">
+            <k-photo-viewer
+              src="{{pathToRoot}}media/civic.jpg"
+              alt="Honda Civic Type R"
+            >
+              <h6 class="m0">Honda Civic Type R</h6>
+            </k-photo-viewer>
+            <k-photo-viewer
+              src="{{pathToRoot}}media/corvette.jpg"
+              alt="Chevrolet Corvette C8"
+            >
+              <h6 class="m0">Chevrolet Corvette C8</h6>
+            </k-photo-viewer>
+            <k-photo-viewer
+              src="{{pathToRoot}}media/evo.jpg"
+              alt="Mitsubishi Lancer Evolution"
+            >
+              <h6 class="m0">Mitsubishi Lancer Evolution</h6>
+            </k-photo-viewer>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="globalNavigation"><a href="#globalNavigation" class="no-link">Global Navigation</a></h3>
+    <p>With the <code>global</code> attribute, PhotoViewers can navigate between all instances on the page, not just siblings.</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">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/gtr.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br />  <span class="hljs-attr">global</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Nissan GT-R (Global Navigation)<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div class="mb" style="max-width: 300px;">
+            <k-photo-viewer
+              src="{{pathToRoot}}media/gtr.jpg"
+              alt="Nissan GT-R"
+              global
+            >
+              <h6 class="m0">Nissan GT-R (Global Navigation)</h6>
+              <p class="m0 small">This viewer can navigate to all photos on the page</p>
+            </k-photo-viewer>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customControls"><a href="#customControls" class="no-link">Custom Controls</a></h3>
+    <p>Customize the fullscreen controls using slots and disable keyboard controls if needed.</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">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/nsx.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br />  <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda NSX<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br />  <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div class="gallery mb" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px;">
+            <k-photo-viewer
+              src="{{pathToRoot}}media/nsx.jpg"
+              alt="Honda NSX"
+              keyboard-controls="false"
+            >
+              <span slot="close">✕</span>
+              <span slot="prev">◀</span>
+              <span slot="next">▶</span>
+              <h6 class="m0">Honda NSX</h6>
+              <p class="m0">Custom controls, keyboard disabled</p>
+            </k-photo-viewer>
+            <k-photo-viewer
+              src="{{pathToRoot}}media/evo.jpg"
+              alt="Mitsubishi Lancer Evolution"
+              keyboard-controls="false"
+            >
+              <span slot="close">✕</span>
+              <span slot="prev">◀</span>
+              <span slot="next">▶</span>
+              <h6 class="m0">Mitsubishi Lancer Evolution</h6>
+              <p class="m0">Custom controls, keyboard disabled</p>
+            </k-photo-viewer>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="captions"><a href="#captions" class="no-link">Captions</a></h3>
+    <p>Use different captions for thumbnail view and fullscreen view using slots.</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">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span><br />&gt;</span><br />  <span class="hljs-comment">&lt;!-- Default caption (thumbnail view) --&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <br />  <span class="hljs-comment">&lt;!-- Fullscreen caption --&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"fullscreen-caption"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>2020 Chevrolet Corvette C8 Stingray<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The first mid-engine Corvette featuring a 6.2L V8 engine<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div class="mb" style="max-width: 400px;">
+            <k-photo-viewer
+              src="{{pathToRoot}}media/corvette.jpg"
+              alt="Chevrolet Corvette C8"
+            >
+              <h6 class="m0">Corvette C8</h6>
+              <div slot="fullscreen-caption">
+                <h4>2020 Chevrolet Corvette C8 Stingray</h4>
+                <p>The first mid-engine Corvette featuring a 6.2L V8 engine producing 495 horsepower</p>
+              </div>
+            </k-photo-viewer>
+          </div>
+        </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>
+    <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new PhotoViewer()</code>
+    </h5>
+    <p>Creates a new PhotoViewer instance. Configuration is done through attributes or properties.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./ShadowComponent.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>src<i>: string</i></code></h5>
+    <p>The URL of the image to display. Syncs with the <code>src</code> attribute.</p>
+    <h5><code>alt<i>: string</i></code></h5>
+    <p>Alternative text for the image. Syncs with the <code>alt</code> attribute.</p>
+    <h5><code>fullscreen<i>: boolean</i></code></h5>
+    <p>Whether the photo viewer is currently in fullscreen mode. Syncs with the <code>fullscreen</code> attribute.</p>
+    <h5><code>keyboardControls<i>: boolean</i></code></h5>
+    <p>Whether keyboard controls are enabled (default: true). When enabled: Enter opens fullscreen, ESC closes, arrow keys navigate. Syncs with the <code>keyboard-controls</code> attribute.</p>
+    <h5><code>global<i>: boolean</i></code></h5>
+    <p>Whether navigation should include all PhotoViewers on the page (true) or just siblings (false, default). Syncs with the <code>global</code> attribute.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>open()<i>: void</i></code></h5>
+    <p>Opens the photo viewer in fullscreen mode.</p>
+    <h5><code>close()<i>: void</i></code></h5>
+    <p>Closes the fullscreen mode.</p>
+    <h5><code>toggle()<i>: void</i></code></h5>
+    <p>Toggles between fullscreen and normal mode.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>fullscreenchange</code></h5>
+    <p>Fired when the fullscreen state changes. Event detail contains <code>{ fullscreen: boolean }</code>.</p>
+    <h5><code>fullscreen</code></h5>
+    <p>Fired when entering fullscreen mode.</p>
+    <h5><code>fullscreenclose</code></h5>
+    <p>Fired when exiting fullscreen mode.</p>
+
+    <h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
+    <h5><code>default</code></h5>
+    <p>Caption content displayed below the thumbnail image.</p>
+    <h5><code>fullscreen-caption</code></h5>
+    <p>Caption content displayed in fullscreen mode. If not provided, the default slot content is cloned.</p>
+    <h5><code>close</code></h5>
+    <p>Custom close button content. Defaults to a close icon.</p>
+    <h5><code>prev</code></h5>
+    <p>Custom previous button content. Defaults to a chevron-left icon.</p>
+    <h5><code>next</code></h5>
+    <p>Custom next button content. Defaults to a chevron-right icon.</p>
+
+    <h4>Keyboard Controls</h4>
+    <p>When <code>keyboard-controls</code> is enabled (default):</p>
+    <ul>
+      <li><strong>Enter</strong>: Open fullscreen when focused on thumbnail</li>
+      <li><strong>Escape</strong>: Close fullscreen</li>
+      <li><strong>Arrow Left</strong>: Navigate to previous photo</li>
+      <li><strong>Arrow Right</strong>: Navigate to next photo</li>
+    </ul>
+
+    <h4>Navigation Behavior</h4>
+    <p>Navigation between photos works as follows:</p>
+    <ul>
+      <li><strong>Sibling mode</strong> (default): Navigate only between PhotoViewer components that are direct siblings</li>
+      <li><strong>Global mode</strong>: Navigate between all PhotoViewer components on the page</li>
+      <li><strong>Wrap-around</strong>: Navigation wraps from last to first photo and vice versa</li>
+      <li><strong>Auto-hide</strong>: Navigation buttons are hidden when only one photo is available</li>
+    </ul>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/PhotoViewer.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/components/resize.page.html

@@ -0,0 +1,161 @@
+<page pageName="Resize" title="Resize - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#resizeDimention">Resize Dimension</a><br />
+          
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#slots">Slots</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Set the initial height and width using normal styles.</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">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br />&gt;</span><br />  Resize Me<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results*" class="pb">
+          <k-resize
+            style="height: 200px; width: 200px;"
+          >
+            <p class="p">
+              Resize Me
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+    <p>Set the minimum and maximum height and width using normal styles. The default min-height and min-width is <code>10rem</code> and the default max-height and max-width is <code>100%</code>.</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">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"min-height: 100px; height: 200px; max-height: 300px; min-width: 100px; width: 200px; max-width: 300px;"</span><br />&gt;</span><br />  Resize Me<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results*" class="pb">
+          <k-resize
+            style="min-height: 100px; height: 200px; max-height: 300px; min-width: 100px; width: 200px; max-width: 300px;"
+          >
+            <p class="p">
+              Resize Me
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="resizeDimention"><a href="#resizeDimention" class="no-link">Resize Dimension</a></h3>
+    <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">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br />  <span class="hljs-attr">dimension</span>=<span class="hljs-string">"width"</span><br />&gt;</span><br />  Resize Width<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results*" class="pb">
+          <k-resize
+            style="height: 200px; width: 200px;"
+            dimension="width"
+          >
+            <p class="p">
+              Resize Width
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+    <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">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br />  <span class="hljs-attr">dimension</span>=<span class="hljs-string">"height"</span><br />&gt;</span><br />  Resize Height<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results*" class="pb">
+          <k-resize
+            style="height: 200px; width: 200px;"
+            dimension="height"
+          >
+            <p class="p">
+              Resize Height
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+
+
+    <h3>* Notes</h3>
+    <p><i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i></p>
+
+    <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>
+    <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new Resize()</code>
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="{{pathToRoot}}utils/drag.js">drag Utility Function</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>resizing<i>: string</i></code></h5>
+    <p>Indicates which handle is currently being used to resize the element. Values can be <code>"side"</code>, <code>"bottom"</code>, <code>"corner"</code>, or empty string. Syncs with the <code>resizing</code> attribute.</p>
+    <h5><code>dimension<i>: string</i></code></h5>
+    <p>Restricts resizing to a specific dimension. Possible values are <code>"width"</code> (horizontal only) or <code>"height"</code> (vertical only). If not specified, both dimensions can be resized. Syncs with the <code>dimension</code> attribute.</p>
+
+    <h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
+    <h5><code>default</code></h5>
+    <p>The main content area that will be resizable. Content automatically gets scroll behavior when it overflows the container.</p>
+
+    <h4>Resize Handles</h4>
+    <p>The resize component provides three types of handles:</p>
+    <ul>
+      <li><strong>Side Handle</strong>: Allows horizontal resizing (width adjustment)</li>
+      <li><strong>Bottom Handle</strong>: Allows vertical resizing (height adjustment)</li>
+      <li><strong>Corner Handle</strong>: Allows diagonal resizing (both width and height)</li>
+    </ul>
+
+    <h4>CSS Custom Properties</h4>
+    <p>The component respects the following CSS custom properties:</p>
+    <ul>
+      <li><code>--handle_size</code>: Size of the resize handles (default: 1rem)</li>
+      <li><code>--c_border</code>: Border color of the container</li>
+      <li><code>--c_highlight</code>: Background color of active handles during resize</li>
+      <li><code>--radius</code>: Border radius of the container</li>
+    </ul>
+
+    <h4>Touch and Mouse Support</h4>
+    <p>The component supports both mouse and touch interactions for resizing on desktop and mobile devices.</p>
+
+    <h4>Behavior Notes</h4>
+    <ul>
+      <li>During resize operations, pointer events on the main content are disabled to prevent interference</li>
+      <li>The component enforces minimum dimensions of 10rem × 10rem and maximum dimensions of 100%</li>
+      <li>Active resize handles are highlighted with the theme's highlight color</li>
+      <li>Content automatically scrolls when it exceeds the container dimensions</li>
+    </ul>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Resize.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/components/shadow-component.page.html

@@ -0,0 +1,84 @@
+<page pageName="ShadowComponent" title="ShadowComponent - Base Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Guide</h6>
+          <a href="#overview">Overview</a><br />
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#customStyles">Custom Styles</a><br />
+          <a href="#pathToStylesheet">Changing Stylesheet Path</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#staticProperties">Static Properties</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
+    <p>ShadowComponent is a base class that extends LitElement and provides automatic shadow DOM encapsulation with
+      Kempo CSS stylesheet injection. Use this when you want your component to have:</p>
+    <ul>
+      <li>Shadow DOM for style encapsulation</li>
+      <li>Automatic access to Kempo CSS styles</li>
+      <li>Scoped component-specific styles</li>
+    </ul>
+    <p>Most Kempo UI components extend ShadowComponent, including <a href="./components/dialog.html">Dialog</a>,
+      <a href="./kempo-/components/card.html">Card</a>, <a href="./components/accordion.html">Accordion</a>, and
+      many others.
+    </p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create a custom component by extending ShadowComponent:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br />  <span class="hljs-title function_">render</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br />      &lt;div class="p b r"&gt;<br />        &lt;h3&gt;My Component&lt;/h3&gt;<br />        &lt;p&gt;This has shadow DOM with Kempo CSS styles.&lt;/p&gt;<br />      &lt;/div&gt;<br />    `</span>;<br />  }<br />}<br /><br /><span class="hljs-variable language_">customElements</span>.<span class="hljs-title function_">define</span>(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
+    <p>Add component-specific styles using the static <code>styles</code> property:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyStyledComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br />  <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br />    :host {<br />      display: block;<br />      padding: var(--spacer);<br />    }<br />    .custom-element {<br />      background-color: var(--c_primary);<br />      color: var(--tc_on_primary);<br />      border-radius: var(--radius);<br />    }<br />  `</span>;<br /><br />  <span class="hljs-title function_">render</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br />      &lt;div class="custom-element p"&gt;<br />        Custom styled content<br />      &lt;/div&gt;<br />    `</span>;<br />  }<br />}</code></pre>
+
+    <h3 id="pathToStylesheet"><a href="#pathToStylesheet" class="no-link">Changing Stylesheet Path</a></h3>
+    <p>By default, ShadowComponent loads <code>/kempo.min.css</code>. Change this globally by setting the <code>kempo.pathToStylesheet</code> config before any components are loaded:</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br />  window.kempo = {<br />    pathToStylesheet: <span class="hljs-string">'/custom-path/kempo.min.css'</span><br />  };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+
+    <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>
+    <h6>Extends LitElement</h6>
+    <h5><code>new ShadowComponent()</code></h5>
+    <p>Creates a new ShadowComponent instance with shadow DOM and automatic Kempo CSS stylesheet injection.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Lit (LitElement)</li>
+    </ul>
+
+    <h3 id="staticProperties"><a href="#staticProperties" class="no-link">Static Properties</a></h3>
+    <h5><code>pathToStylesheet<i>: string</i></code></h5>
+    <p>The path to the Kempo CSS stylesheet to inject into the shadow DOM. Default is <code>'/kempo.min.css'</code>.
+      This is configured via the global <code>window.kempo.pathToStylesheet</code> config object.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>createRenderRoot()<i>: Element</i></code></h5>
+    <p>Creates the shadow root and injects the Kempo CSS stylesheet. This method:</p>
+    <ul>
+      <li>Attaches a shadow DOM with <code>mode: 'open'</code></li>
+      <li>Injects a <code>&lt;link&gt;</code> element pointing to the Kempo CSS stylesheet</li>
+      <li>Injects component-specific styles from the static <code>styles</code> property if defined</li>
+      <li>Creates a render container with <code>display: contents</code> for layout transparency</li>
+    </ul>
+
+    <h5><code>childrenUpdated()<i>: void</i></code></h5>
+    <p>A custom lifecycle callback that is automatically triggered whenever a child element is added or removed from the
+      component. After this callback returns, <code>requestUpdate()</code> is automatically called to trigger a
+      re-render.</p>
+    <p>Override this method to react to child changes:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br />  <span class="hljs-title function_">childrenUpdated</span>() {<br />    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Children changed!'</span>);<br />    <span class="hljs-variable language_">this</span>.validateChildren();<br />  }<br />}</code></pre>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>