npm - kempo-ui - Versions diffs - 0.0.16 → 0.0.18 - Mend

kempo-ui 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

package/docs/{kempo-ui/components → components}/hybrid-component.html RENAMED Viewed

@@ -1,44 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <base href="/kempo-ui/">
   <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="kempo-vars.css" />
-  <link rel="stylesheet" href="kempo.min.css" />
-  <link rel="stylesheet" href="kempo-hljs.css" />
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
-  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <k-import src="../nav-1.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">
+    <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 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>
+        <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 />
       </div>
-    </details>
+    </k-accordion-panel>
+    </k-accordion>
     <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>
+    <p>HybridComponent is a base class that extends <a href="./components/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>
@@ -64,10 +65,10 @@
       <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>
+    <p>Use <a href="./components/shadow-component.html">ShadowComponent</a> instead when you only need shadow DOM.</p>
+    <p>Use <a href="./components/light-component.html">LightComponent</a> instead when you only need light DOM.</p>
-    <h2 id="jsRef">JavaScript Reference</h2>
+    <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 ShadowComponent</h6>
@@ -105,6 +106,8 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
 </body>
 </html>

package/docs/{kempo-ui/components → components}/icon.html RENAMED Viewed

@@ -1,48 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Icon - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="/kempo-ui/kempo-vars.css" />
-  <link rel="stylesheet" href="/kempo-ui/kempo.min.css" />
-  <link rel="stylesheet" href="/kempo-ui/kempo-hljs.css" />
-  <link rel="stylesheet" href="/kempo-ui/styles.css" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
-  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Icon</h1>
   <main>
-    <details class="b r mb">
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
-        <h6>Examples</h6>
-        <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#explicitSource">Explicitly Set the Source</a><br />
-        <a href="#fallbackIcon">Fallback Icon</a><br />
-        <a href="#changingIconDirectory">Changing the Icon Directory Location</a><br />
-        <a href="#addingIcons">Adding Icons</a><br />
-        <a href="#updatingIconDirectoryPath">Updating the Icon Directory Path</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>
+    <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="#explicitSource">Explicitly Set the Source</a><br />
+          <a href="#fallbackIcon">Fallback Icon</a><br />
+          <a href="#changingIconDirectory">Changing the Icon Directory Location</a><br />
+          <a href="#addingIcons">Adding Icons</a><br />
+          <a href="#updatingIconDirectoryPath">Updating the Icon Directory 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="#properties">Properties</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Create an icon using the <code>k-icon</code> component. You can specify the icon by setting the <code>name</code> or <code>src</code> attribute.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"folder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/icon.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
-        <k-icon name="folder"></k-icon>
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"folder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/icon.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
+        </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
-        <k-icon src="/path/to/icon.svg"></k-icon>
+        <k-card label="Results">
+          <k-icon name="folder"></k-icon>
+          <k-icon src="/path/to/icon.svg"></k-icon>
+        </k-card>
       </div>
     </div>
@@ -53,7 +59,7 @@
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
-        <k-card label="Output*">
+        <k-card label="Results">
           <k-icon name="menu"></k-icon>
           <k-icon name="close"></k-icon>
           <k-icon name="play"></k-icon>
@@ -71,7 +77,7 @@
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
-        <k-card label="Output*">
+        <k-card label="Results">
           <k-icon src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"></k-icon>
         </k-card>
       </div>
@@ -86,7 +92,7 @@
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
-        <k-card label="Output*">
+        <k-card label="Results">
           <k-icon name="invalid"></k-icon>
           <k-icon name="invalid">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"/></svg>
@@ -118,7 +124,7 @@
     <p>To change the location of the directory holding the icons, import the <code>Icon</code> class, and set the static member <code>pathToIcons</code> to point to the correct location. Do this before icons are loaded (for example, in the head of the document).</p>
     <pre><code class="hljs xml"><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> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Icon.js'</span>;<br />  Icon.pathToIcons = [<span class="hljs-string">'./pathTo/icons'</span>];<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-    <h2 id="jsRef">JavaScript Reference</h2>
+    <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="./component.html">Component</a></h6>
@@ -146,8 +152,10 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
-  <script type="module" src="/kempo-ui/src/components/Card.js"></script>
-  <script type="module" src="/kempo-ui/src/components/Icon.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Icon.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
 </body>
-</html>
+</html>

package/docs/components/import.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Import - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Import</h1>
+  <main>
+    <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 />
+          <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 />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+    <h3 class="basicUsage">Basic Usage</h3>
+    <p>Import an external HTML snippets.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="import-me.html">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
+        </k-card>
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span> <span class="hljs-attr">rendered</span>=<span class="hljs-string">"true"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
+        </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="./component.html">Component</a></h6>
+    <h5>
+      <code>new Import()</code>
+    </h5>
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./component.html">Component</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 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>
+    <p>Loads the HTML snippet from the specified source URL.</p>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+</body>
+</html>

package/docs/{kempo-ui/components → components}/light-component.html RENAMED Viewed

@@ -1,51 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>LightComponent - Base Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="kempo-vars.css" />
-  <link rel="stylesheet" href="kempo.min.css" />
-  <link rel="stylesheet" href="kempo-hljs.css" />
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
-  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">LightComponent</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>
+    <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="#whenToUse">When to Use</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 />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
     <h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
-    <p>LightComponent is a base class that extends LitElement and renders directly to the light DOM instead of shadow DOM. Use this when you want your component to:</p>
+    <p>LightComponent is a base class that extends LitElement and renders directly to the light DOM instead of shadow
+      DOM. Use this when you want your component to:</p>
     <ul>
       <li>Render content in the light DOM (no shadow DOM encapsulation)</li>
       <li>Allow global CSS to style component content</li>
       <li>Interact naturally with parent page styles</li>
       <li>Support natural children alongside rendered content</li>
     </ul>
-    <p>Components like <a href="persistant-collapsible.html">PersistantCollapsible</a> and <a href="theme-switcher.html">ThemeSwitcher</a> extend LightComponent.</p>
+    <p>Components like <a href="persistant-collapsible.html">PersistantCollapsible</a> and <a
+        href="theme-switcher.html">ThemeSwitcher</a> extend LightComponent.</p>
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Create a custom component by extending LightComponent and implementing <code>renderLightDom()</code>:</p>
     <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> LightComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./LightComponent.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_">MyLightComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">LightComponent</span> {<br />  <span class="hljs-keyword">static</span> properties = {<br />    <span class="hljs-attr">message</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br />  };<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>.message = <span class="hljs-string">'Hello'</span>;<br />  }<br /><br />  <span class="hljs-title function_">renderLightDom</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br />      &lt;div class="card p"&gt;<br />        &lt;p&gt;<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.message}</span> from Light DOM!&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-light-component'</span>, MyLightComponent);</code></pre>
-    <p><strong>Important:</strong> Always call <code>super.updated()</code> when overriding the <code>updated()</code> lifecycle method:</p>
+    <p><strong>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 />  <span class="hljs-keyword">if</span>(changedProperties.<span class="hljs-title function_">has</span>(<span class="hljs-string">'message'</span>)) {<br />    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Message changed'</span>);<br />  }<br />}</code></pre>
     <h3 id="whenToUse"><a href="#whenToUse" class="no-link">When to Use</a></h3>
@@ -56,10 +61,12 @@
       <li>Shadow DOM encapsulation would interfere with your component's purpose</li>
       <li>You're working with third-party libraries that expect light DOM</li>
     </ul>
-    <p>Use <a href="shadow-component.html">ShadowComponent</a> instead when you need style encapsulation and scoped CSS.</p>
-    <p>Use <a href="hybrid-component.html">HybridComponent</a> when you need both shadow DOM styles and light DOM rendering.</p>
+    <p>Use <a href="./components/shadow-component.html">ShadowComponent</a> instead when you need style encapsulation and scoped CSS.
+    </p>
+    <p>Use <a href="./components/hybrid-component.html">HybridComponent</a> when you need both shadow DOM styles and light DOM
+      rendering.</p>
-    <h2 id="jsRef">JavaScript Reference</h2>
+    <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>
@@ -73,7 +80,8 @@
     <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. Created automatically by <code>createRenderRoot()</code>.</p>
+    <p>A container element with <code>display: contents</code> that holds the rendered light DOM content. 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>
@@ -85,13 +93,24 @@
     </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>
+    <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>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_">LightComponent</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>
     <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.</p>
+    <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.</p>
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
 </body>
-</html>
+</html>