kempo-ui 0.0.3 → 0.0.5

package/docs/components/dialog.html

@@ -7,8 +7,10 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
   <script type="module">
+    import ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -30,7 +32,6 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
-        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
         <a href="#staticMethods">Static Methods</a><br />
@@ -93,20 +94,20 @@
 
     <h3 id="jsUsage"><a href="#jsUsage" class="no-link">JavaScript Usage</a></h3>
     <h5>Create Dialog</h5>
-    <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">"d7"</span>&gt;</span>Open Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'&lt;p&gt;Hello World&lt;/p&gt;'</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <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">"d7"</span>&gt;</span>Open Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'&lt;p&gt;Hello World&lt;/p&gt;'</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <button id="d7" class="mb">Open Dialog</button>
     <script type="module">
-      import Dialog from '/kempo/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d7').addEventListener('click', () => {
         Dialog.create('<p>Hello World</p>');
       });
     </script>
 
     <h5>Error Dialog</h5>
-    <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">"d8"</span>&gt;</span>Open Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d8'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.error(<span class="hljs-string">"&lt;p&gt;Oh no, don't do that!&lt;/p&gt;"</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <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">"d8"</span>&gt;</span>Open Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d8'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.error(<span class="hljs-string">"&lt;p&gt;Oh no, don't do that!&lt;/p&gt;"</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <button id="d8" class="mb">Open Dialog</button>
     <script type="module">
-      import Dialog from '/kempo/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d8').addEventListener('click', () => {
         Dialog.error("Oh no, don't do that!");
       });
@@ -114,10 +115,10 @@
 
     <h3 id="confirmDialog"><a href="#confirmDialog" class="no-link">Confirm Dialog</a></h3>
     <p>Use the <code>Dialog.confirm</code> static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.</p>
-    <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">"d9"</span>&gt;</span>Open Confirm Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d9'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.confirm(<span class="hljs-string">"Are you sure you want to proceed?"</span>, <span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {<br />      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"User response:"</span>, response);<br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <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">"d9"</span>&gt;</span>Open Confirm Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d9'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.confirm(<span class="hljs-string">"Are you sure you want to proceed?"</span>, <span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {<br />      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"User response:"</span>, response);<br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <button id="d9" class="mb">Open Confirm Dialog</button>
     <script type="module">
-      import Dialog from '/kempo/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d9').addEventListener('click', () => {
         Dialog.confirm("Are you sure you want to proceed?", response => {
           console.log("User response:", response);
@@ -128,55 +129,43 @@
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
     <h5>
-      <code>new Dialog(options)</code>
+      <code>new Dialog()</code>
     </h5>
 
     <h4>Parameters</h4>
-    <h5><code>options<i>: object</i></code></h5>
-    <p>An object containing the initial configuration for the dialog. The options object can contain the following properties:</p>
-    <ul>
-      <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened.</li>
-      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
-      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
-      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
-      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
-      <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
-      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
-      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
-      <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
-      <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
-    </ul>
+    <p>The Dialog constructor takes no parameters. Configuration is done through attributes or properties after instantiation.</p>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>opened<i>: boolean</i></code></h5>
-    <p>Whether the dialog is opened.</p>
+    <p>Whether the dialog is opened. Syncs with the <code>opened</code> attribute.</p>
     <h5><code>closeBtn<i>: boolean</i></code></h5>
-    <p>Whether to show the close button.</p>
+    <p>Whether to show the close button. Syncs with the <code>close-btn</code> attribute.</p>
     <h5><code>overlayClose<i>: boolean</i></code></h5>
-    <p>Whether clicking the overlay closes the dialog.</p>
+    <p>Whether clicking the overlay closes the dialog. Syncs with the <code>overlay-close</code> attribute.</p>
     <h5><code>confirmText<i>: string</i></code></h5>
-    <p>Text for the confirm button.</p>
+    <p>Text for the confirm button. Syncs with the <code>confirm-text</code> attribute.</p>
     <h5><code>confirmClasses<i>: string</i></code></h5>
-    <p>Classes for the confirm button.</p>
+    <p>Classes for the confirm button. Syncs with the <code>confirm-classes</code> attribute.</p>
     <h5><code>cancelText<i>: string</i></code></h5>
-    <p>Text for the cancel button.</p>
+    <p>Text for the cancel button. Syncs with the <code>cancel-text</code> attribute.</p>
     <h5><code>cancelClasses<i>: string</i></code></h5>
-    <p>Classes for the cancel button.</p>
-
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <p>Classes for the cancel button. Syncs with the <code>cancel-classes</code> attribute.</p>
     <h5><code>confirmAction<i>: function</i></code></h5>
-    <p>Action to perform on confirm.</p>
+    <p>Action to perform when the confirm button is clicked. Not reflected as an attribute.</p>
     <h5><code>cancelAction<i>: function</i></code></h5>
-    <p>Action to perform on cancel.</p>
+    <p>Action to perform when the cancel button is clicked. Not reflected as an attribute.</p>
     <h5><code>closeCallback<i>: function</i></code></h5>
-    <p>Callback to execute when the dialog is closed.</p>
+    <p>Callback to execute when the dialog is closed. Not reflected as an attribute.</p>
+    <h5><code>previousFocus<i>: Element</i></code></h5>
+    <p>Reference to the element that had focus before the dialog was opened. Not reflected as an attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>open()<i>: void</i></code></h5>
@@ -206,25 +195,42 @@
       <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
       <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
     </ul>
-    <h5><code>confirm(text, responseCallback, options)<i>: void</i></code></h5>
-    <p>Creates and opens a confirmation dialog with the specified text and options.</p>
+    <h5><code>confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a confirmation dialog with the specified text and options. The responseCallback receives a boolean indicating the user's choice.</p>
     <h6>Options</h6>
     <ul>
-      <li><code>title</code>: <i>string</i> - The title of the dialog.</li>
-      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
-      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
-      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
-      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
+      <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Confirm").</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button (default: "Yes").</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button (default: "success ml").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button (default: "No").</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button (default: "danger").</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button (default: false).</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog (default: false).</li>
+    </ul>
+    <h5><code>alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an alert dialog with the specified text and options.</p>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Alert").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</li>
       <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
       <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
     </ul>
-    <h5><code>error(text, responseCallback, options)<i>: void</i></code></h5>
+    <h5><code>error(text, responseCallback, options)<i>: Dialog</i></code></h5>
     <p>Creates and opens an error dialog with the specified text and options.</p>
     <h6>Options</h6>
     <ul>
-      <li><code>title</code>: <i>string</i> - The title of the dialog.</li>
-      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
-      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
+      <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Error").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
+    </ul>
+    <h5><code>success(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a success dialog with the specified text and options.</p>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Success").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</li>
       <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
       <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
     </ul>

package/docs/components/focus-capture.html

@@ -22,47 +22,91 @@
       <div class="m mt0 pl">
         <h6>Examples</h6>
         <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#dialogExample">Dialog Example</a><br />
         
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
-        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
       </div>
     </details>
 
-    <h3>Description</h3>
-    <p>The <code>FocusCapture</code> class extends the <a href="./lazy-component.html">LazyComponent</a> class and provides functionality to capture focus within the component.</p>
-
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Use the <code>FocusCapture</code> component to capture focus within the component. When the focus moves out of the component, it will automatically move back to the first focusable element inside the component.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-focus-capture</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Button 1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Button 2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-focus-capture</span>&gt;</span></code></pre>
-    <k-focus-capture>
-      <button>Button 1</button>
-      <button>Button 2</button>
-    </k-focus-capture>
+    <p>The <code>k-focus-capture</code> component traps focus within its children. When focus reaches the end of the focusable elements, it cycles back to the first focusable element. This is useful for modal dialogs, side menus, or any UI where you want to keep focus contained within a specific area.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-focus-capture</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>First Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Input field"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>Second Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-b mb"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</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-focus-capture</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <p class="mb"><em>Tab through the elements below. Focus will cycle back to the first element after the last one.</em></p>
+          <k-focus-capture>
+            <div class="card">
+              <button class="mb">First Button</button>
+              <input type="text" placeholder="Input field" class="mb" />
+              <button class="mb">Second Button</button>
+              <a href="#" class="d-b mb">Link</a>
+            </div>
+          </k-focus-capture>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="dialogExample"><a href="#dialogExample" class="no-link">Dialog Example</a></h3>
+    <p>FocusCapture is used internally by the <a href="dialog.html">Dialog</a> and <a href="side-menu.html">SideMenu</a> components. You do not need to add it yourself. Open the dialog below and tab through the elements to see how focus is trapped within the dialog.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"focusDialog"</span> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Submit"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span>&gt;</span>Focus Capture Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Tab through the elements. Focus stays trapped in the dialog.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</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-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('focusDialog').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <button onclick="document.getElementById('focusDialog').open()">Open Dialog</button>
+          <k-dialog
+            id="focusDialog"
+            cancel-text="Close"
+            confirm-text="Submit"
+          >
+            <h6 slot="title" class="m0 px">Focus Capture Dialog</h6>
+            <div class="p">
+              <p>Tab through the elements. Focus stays trapped in the dialog.</p>
+              <input type="text" placeholder="Name" class="mb" />
+              <input type="email" placeholder="Email" class="mb" />
+            </div>
+          </k-dialog>
+        </k-card>
+      </div>
+    </div>
 
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
+    <h6>Extends LitElement</h6>
     <h5>
       <code>new FocusCapture()</code>
     </h5>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./lazy-component.html">LazyComponent</a></li>
+      <li>Lit</li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
-    <p>The <code>FocusCapture</code> class does not introduce any new attributes beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>afterFocus<i>: function</i></code></h5>
+    <p>A method that is called when focus reaches the end capture element. By default, it finds the first focusable element within the component and focuses it. Focusable elements include: <code>button</code>, <code>[href]</code>, <code>input</code>, <code>select</code>, <code>textarea</code>, and <code>[tabindex]:not([tabindex="-1"])</code>.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <p>The <code>FocusCapture</code> class does not introduce any new methods beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
+    <h5><code>render()<i>: TemplateResult</i></code></h5>
+    <p>Renders the component with a slot for children and an invisible div with <code>tabindex="0"</code> that captures focus and cycles it back to the beginning.</p>
 
   </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script> 
+  <script type="module" src="../src/components/FocusCapture.js"></script> 
+  <script type="module" src="../src/components/Dialog.js"></script> 
 </body>
 </html>

package/docs/components/hybrid-component.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">HybridComponent</h1>
+  <main>
+    <details class="b r mb">
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Guide</h6>
+        <a href="#overview">Overview</a><br />
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#whenToUse">When to Use</a><br />
+        
+        <h6 class="mt">JavaScript Reference</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 />
+      </div>
+    </details>
+
+    <h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
+    <p>HybridComponent is a base class that extends <a href="shadow-component.html">ShadowComponent</a> and provides both shadow DOM rendering with Kempo CSS styles AND light DOM rendering. Use this when you want your component to:</p>
+    <ul>
+      <li>Have shadow DOM with Kempo CSS for internal UI elements</li>
+      <li>Also render content to the light DOM alongside natural children</li>
+      <li>Combine the benefits of both shadow and light DOM</li>
+    </ul>
+    <p>Components like <a href="collapsible.html">Collapsible</a>, <a href="dialog.html">Dialog</a>, and <a href="side-menu.html">SideMenu</a> extend HybridComponent.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create a custom component by extending HybridComponent and implementing both <code>render()</code> for shadow DOM and <code>renderLightDom()</code> for light DOM:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> HybridComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./HybridComponent.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_">MyHybridComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">HybridComponent</span> {<br />  <span class="hljs-keyword">static</span> properties = {<br />    <span class="hljs-attr">title</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br />  };<br /><br />  <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br />    :host {<br />      display: block;<br />    }<br />    .shadow-content {<br />      background: var(--c_primary);<br />      color: var(--tc_on_primary);<br />      padding: var(--spacer);<br />    }<br />  `</span>;<br /><br />  <span class="hljs-title function_">constructor</span>() {<br />    <span class="hljs-variable language_">super</span>();<br />    <span class="hljs-variable language_">this</span>.title = <span class="hljs-string">'Hybrid'</span>;<br />  }<br /><br />  <span class="hljs-comment">// Shadow DOM content with Kempo CSS styles</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="shadow-content"&gt;<br />        &lt;h3&gt;<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.title}</span> Component&lt;/h3&gt;<br />        &lt;slot name="lightRoot"&gt;&lt;/slot&gt;<br />      &lt;/div&gt;<br />    `</span>;<br />  }<br /><br />  <span class="hljs-comment">// Light DOM content alongside natural children</span><br />  <span class="hljs-title function_">renderLightDom</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br />      &lt;p class="p"&gt;This is rendered to light DOM&lt;/p&gt;<br />      &lt;slot&gt;&lt;/slot&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-hybrid-component'</span>, MyHybridComponent);</code></pre>
+
+    <p><strong>Important:</strong> The default <code>render()</code> method includes <code>&lt;slot name="lightRoot"&gt;&lt;/slot&gt;</code> which is where the light DOM content appears. If you override <code>render()</code>, make sure to include this slot.</p>
+
+    <p><strong>Also Important:</strong> Always call <code>super.updated()</code> when overriding the <code>updated()</code> lifecycle method:</p>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">updated</span>(changedProperties) {<br />  <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">updated</span>(); <span class="hljs-comment">// Required!</span><br />  <br />  <span class="hljs-comment">// Your custom logic here</span><br />}</code></pre>
+
+    <h3 id="whenToUse"><a href="#whenToUse" class="no-link">When to Use</a></h3>
+    <p>Use HybridComponent when:</p>
+    <ul>
+      <li>You need styled internal UI elements (buttons, headers, etc.) in shadow DOM</li>
+      <li>You also need to render content to light DOM alongside natural children</li>
+      <li>You want Kempo CSS styles for your component UI but need flexibility for user content</li>
+    </ul>
+    
+    <p><strong>Example use cases:</strong></p>
+    <ul>
+      <li><strong>Dialog:</strong> Shadow DOM for styled dialog chrome (header, footer, overlay), light DOM for user content</li>
+      <li><strong>Collapsible:</strong> Shadow DOM for toggle button, light DOM for collapsible content</li>
+      <li><strong>SideMenu:</strong> Shadow DOM for menu structure and styling, light DOM for menu items</li>
+    </ul>
+
+    <p>Use <a href="shadow-component.html">ShadowComponent</a> instead when you only need shadow DOM.</p>
+    <p>Use <a href="light-component.html">LightComponent</a> instead when you only need light DOM.</p>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends ShadowComponent</h6>
+    <h5><code>new HybridComponent()</code></h5>
+    <p>Creates a new HybridComponent instance with both shadow DOM (with Kempo CSS) and light DOM rendering.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Lit (html, render)</li>
+      <li><a href="shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>lightRoot<i>: HTMLElement</i></code></h5>
+    <p>A container element with <code>display: contents</code> that holds the rendered light DOM content. It has <code>slot="lightRoot"</code> to connect it to the shadow DOM slot. Created automatically by <code>createRenderRoot()</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>createRenderRoot()<i>: Element</i></code></h5>
+    <p>Creates both shadow DOM (via <code>super.createRenderRoot()</code>) and light DOM render containers. This method:</p>
+    <ul>
+      <li>Calls the parent ShadowComponent's <code>createRenderRoot()</code> to set up shadow DOM with Kempo CSS</li>
+      <li>Creates a <code>lightRoot</code> div with <code>display: contents</code> and <code>slot="lightRoot"</code></li>
+      <li>Appends <code>lightRoot</code> to the component element</li>
+      <li>Returns the shadow render container</li>
+    </ul>
+
+    <h5><code>updated()<i>: void</i></code></h5>
+    <p>Called automatically by Lit when the component updates. Renders the result of <code>renderLightDom()</code> into <code>lightRoot</code>. Override this method if needed, but always call <code>super.updated()</code>.</p>
+
+    <h5><code>renderLightDom()<i>: TemplateResult</i></code></h5>
+    <p>Override this method to define what should be rendered to the light DOM. Returns an empty template by default. Use Lit's <code>html</code> tagged template literal to return your content. Typically includes a <code>&lt;slot&gt;&lt;/slot&gt;</code> for natural children.</p>
+
+    <h5><code>render()<i>: TemplateResult</i></code></h5>
+    <p>Override this method to define what should be rendered to the shadow DOM. The default implementation returns <code>html`&lt;slot name="lightRoot"&gt;&lt;/slot&gt;`</code> which displays the light DOM content. When overriding, make sure to include this slot where you want the light DOM content to appear.</p>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/icon.html

@@ -10,10 +10,8 @@
   <script type="module">
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
-    // import Search from '../src/components/Search.js';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
-    // Search.searchDataUrl = '../search.json';
   </script>
 </head>
 <body>
@@ -34,7 +32,6 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
-        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
       </div>
@@ -139,18 +136,16 @@
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>name<i>: string</i></code></h5>
-    <p>The name of the icon.</p>
+    <p>The name of the icon. Syncs with the <code>name</code> attribute.</p>
     <h5><code>src<i>: string</i></code></h5>
-    <p>The source URL of the icon.</p>
-
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <p>The source URL of the icon. Syncs with the <code>src</code> attribute.</p>
     <h5><code>pathToIcons<i>: Array</i></code></h5>
-    <p>An array of paths to directories containing icons.</p>
+    <p>An array of paths to directories containing icons. This is a static property that affects all icon instances.</p>
 
   </main>
   <div style="height:33vh"></div>

package/docs/components/import.html

@@ -27,7 +27,6 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
-        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
       </div>
@@ -58,13 +57,9 @@
       <li><a href="./component.html">Component</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
-    <h5><code>src<i>: string</i></code></h5>
-    <p>The source URL of the HTML snippet to import.</p>
-
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>src<i>: string</i></code></h5>
-    <p>The source URL of the HTML snippet to import.</p>
+    <p>The source URL of the HTML snippet to import. Syncs to <code>src</code> attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>load()<i>: Promise</i></code></h5>