npm - kempo-ui - Versions diffs - 0.0.13 → 0.0.15 - Mend

kempo-ui 0.0.13 → 0.0.15

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 (181) hide show

package/dist/kempo-vars.css CHANGED Viewed

	@@ -0,0 +1 @@
1	+ /* Define Kempo Vars Here */

package/docs/dev.config.json CHANGED Viewed

@@ -1,15 +1,11 @@
 {
   "customRoutes": {
-    "/": "./index.html",
-    "/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css",
-    "/kempo-vars.css": "../kempo-vars.css",
-    "/kempo-hljs.css": "../src/kempo-hljs.css",
+    "/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css",
+    "/kempo-ui/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css",
+    "/kempo-ui/kempo-vars.css": "../src/kempo-vars.css",
+    "/kempo-ui/kempo-hljs.css": "../src/kempo-hljs.css",
     "/icons/**": "../icons/**",
-    "/src/**": "../src/**"
-  },
-  "mimeTypes": {
-    ".js": "application/javascript",
-    ".mjs": "application/javascript"
+    "/kempo-ui/src/**": "../src/**"
   },
   "middleware": {
     "logging": {

package/docs/kempo-ui/components/accordion.html ADDED Viewed

@@ -0,0 +1,236 @@
+<!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>Accordion - 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>
+</head>
+<body>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <h1 class="ta-center">Accordion</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 pl">
+          <h6>Examples</h6>
+          <a href="#basicUsage" class="scroll-link">Basic Usage</a><br />
+          <a href="#defaultOpen" class="scroll-link">Default Open Panel</a><br />
+          <a href="#multiple" class="scroll-link">Multiple Panels Mode</a><br />
+          <a href="#persistent" class="scroll-link">Persistent State Example</a><br />
+          <h6 class="mt"><a href="#jsRef" class="no-link scroll-link">JavaScript Reference</a></h6>
+          <a href="#accordion-ref" class="scroll-link">Accordion</a><br />
+          <a href="#accordion-header-ref" class="scroll-link">AccordionHeader</a><br />
+          <a href="#accordion-panel-ref" class="scroll-link">AccordionPanel</a><br />
+          <a href="#events" class="scroll-link">Events</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+    <h3>Description</h3>
+    <p>A widget that allows a single panel of content to be opened and closed.</p>
+  <h3 id="basicUsage"><a href="#basicUsage" class="no-link scroll-link">Basic Usage</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-accordion</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb">
+            <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1">
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+  <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link scroll-link">Default Open Panel</a></h3>
+    <p>You can have a panel open by default by setting the <code>active</code> attribute to <code>true</code> on both
+    <p>You can have a panel open by default by adding the <code>active</code> attribute to both the header and the
+      panel. The presence of the attribute means <code>true</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-accordion</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb">
+            <k-accordion-header for-panel="panel1" active>Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1" active>
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+  <h3 id="multiple"><a href="#multiple" class="no-link scroll-link">Multiple Panels Mode</a></h3>
+    <p>Add the <code>multiple</code> attribute to <code>k-accordion</code> to allow more than one panel to be open at a
+      time.</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-accordion</span> <span class="hljs-attr">multiple</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb" multiple>
+            <k-accordion-header for-panel="panel1" active>Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1" active>
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+  <h3 id="persistent"><a href="#persistent" class="no-link scroll-link">Persistent State Example</a></h3>
+    <p>Add the <code>persistent-id</code> attribute to <code>k-accordion</code> to save and restore open panels across
+      page reloads. The state is stored in <code>localStorage</code> (if available) using the provided ID.</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-accordion</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">"demo-accordion"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb" persistent-id="demo-accordion">
+            <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1">
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+  <h2 id="jsRef"><a href="#jsRef" class="no-link scroll-link">JavaScript Reference</a></h2>
+    <k-card>
+      <h3 id="accordion-ref" class="bb pb">Accordion</h3>
+      <h4>Properties</h4>
+      <ul>
+        <li><code>multiple: boolean</code> — If present, allows multiple panels to be open.</li>
+        <li><code>persistentId: string</code> — If set, open panel state is saved/restored via localStorage.</li>
+      </ul>
+      <h4>Methods</h4>
+      <ul>
+        <li><code>getHeader(panelName): HTMLElement | null</code></li>
+        <li><code>getPanel(panelName): HTMLElement | null</code></li>
+        <li><code>openPanel(panelName): void</code></li>
+        <li><code>closePanel(panelName): void</code></li>
+        <li><code>togglePanel(panelName): void</code></li>
+      </ul>
+      <h4>Lifecycle</h4>
+      <ul>
+        <li>State is restored in <code>updated()</code> when <code>persistentId</code> changes.</li>
+      </ul>
+    </k-card>
+    <k-card>
+      <h3 id="accordion-header-ref" class="bb pb">AccordionHeader</h3>
+      <h4>Properties</h4>
+      <ul>
+        <li><code>forPanel: string</code> — The panel name this header controls.</li>
+        <li><code>active: boolean</code> — Whether this header is active.</li>
+        <li><code>accordion: Accordion | null</code> <i>(read only)</i> — Parent accordion.</li>
+      </ul>
+      <h4>Event Handlers</h4>
+      <ul>
+        <li>Click: toggles associated panel.</li>
+      </ul>
+    </k-card>
+    <k-card>
+      <h3 id="accordion-panel-ref" class="bb pb">AccordionPanel</h3>
+      <h4>Properties</h4>
+      <ul>
+        <li><code>name: string</code> — Unique panel identifier.</li>
+        <li><code>active: boolean</code> — Whether this panel is open.</li>
+        <li><code>transitioning: boolean</code> — Whether this panel is animating.</li>
+      </ul>
+      <h4>Methods</h4>
+      <ul>
+        <li><code>accordion: Accordion | null</code> (getter) — Returns parent accordion.</li>
+      </ul>
+  <h3 id="events"><a href="#events" class="no-link scroll-link">Events</a></h3>
+      <h5><code>openpanel</code></h5>
+      <p>Fired when a panel is opened. The event detail contains <code>{ panelName }</code>.</p>
+      <h5><code>closepanel</code></h5>
+      <p>Fired when a panel is closed. The event detail contains <code>{ panelName }</code>.</p>
+      <h5><code>togglepanel</code></h5>
+      <p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
+    </k-card>
+  </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/Accordion.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Card.js"></script>
+  <script>
+    document.querySelectorAll('.scroll-link').forEach(link => {
+      link.addEventListener('click', function (e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href').replace('#', '');
+        const target = document.getElementById(targetId);
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth' });
+          const url = window.location.pathname + window.location.search + '#' + targetId;
+          history.replaceState(null, '', url);
+        }
+      });
+    });
+  </script>
+</body>
+</html>

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

@@ -1,17 +1,18 @@
 <!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>Card - 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 type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Card</h1>
   <main>
     <details class="b r mb">
@@ -81,7 +82,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Card.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Card.js"></script>
 </body>
 </html>

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

@@ -1,17 +1,18 @@
 <!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>Content Slider - 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 type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Content Slider</h1>
   <main>
     <details
@@ -212,7 +213,7 @@
     <p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
   </main>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/ContentSlider.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/ContentSlider.js"></script>
 </body>
 </html>