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/components/content-slider.html ADDED Viewed

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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" />
+  <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">Content Slider</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 />
+          <a href="#keyboardControls">Keyboard Controls</a><br />
+          <a href="#globalControls">Global Controls</a><br />
+          <a href="#controls">Controls</a><br />
+          <a href="#loop">Loop</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>Description</h3>
+    <p>The ContentSlider component provides a way to display multiple content slides with navigation controls. Users can
+      navigate through slides using previous/next buttons, keyboard arrows, or programmatically. It extends the <a
+        href="./component.html">ShadowComponent</a> class and supports looping, keyboard controls, and customizable
+      navigation.</p>
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="Results">
+          <k-content-slider class="bg-alt" style="height: 10rem">
+            <div>
+              <p>Slide 1</p>
+            </div>
+            <div>
+              <p>Slide 2</p>
+            </div>
+            <div>
+              <p>Slide 3</p>
+            </div>
+            <div>
+              <p>Slide 4</p>
+            </div>
+          </k-content-slider>
+        </k-card>
+      </div>
+    </div>
+    <h3 id="keyboardControls"><a href="#keyboardControls" class="no-link">Keyboard Controls</a></h3>
+    <p>By default the <code>keyboard-controls</code> attribute is set to <code>"true"</code>, which allows the left and
+      right keyboard buttons to change the slides when the component is focused. Set it to <code>"false"</code> to
+      disable this functionality.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</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">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="Results">
+          <k-content-slider class="bg-alt" style="height: 10rem" keyboard-controls="false">
+            <div>
+              <p>Slide 1</p>
+            </div>
+            <div>
+              <p>Slide 2</p>
+            </div>
+            <div>
+              <p>Slide 3</p>
+            </div>
+            <div>
+              <p>Slide 4</p>
+            </div>
+          </k-content-slider>
+        </k-card>
+      </div>
+    </div>
+    <h3 id="globalControls"><a href="#globalControls" class="no-link">Global Controls</a></h3>
+    <p>Use the <code>global-controls="true"</code> attribute to enable global controls (next and back arrows) anywhere
+      in the window, even when this component is not focused. This is suggested when there is only one content slider on
+      a page and it is of prominance (large slider on top of the page).</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />  <span class="hljs-attr">global-controls</span>=<span class="hljs-string">"true"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="Results">
+          <k-content-slider class="bg-alt" style="height: 10rem" global-controls="true">
+            <div>
+              <p>Slide 1</p>
+            </div>
+            <div>
+              <p>Slide 2</p>
+            </div>
+            <div>
+              <p>Slide 3</p>
+            </div>
+            <div>
+              <p>Slide 4</p>
+            </div>
+          </k-content-slider>
+        </k-card>
+      </div>
+    </div>
+    <h3 id="controls"><a href="#controls" class="no-link">Controls</a></h3>
+    <p>By default the <code>controls</code> attribute is set to <code>"true"</code>, this shows the previous and next
+      buttons. To hide them set <code>controls="false"</code>.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />  <span class="hljs-attr">controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="Results">
+          <k-content-slider class="bg-alt" style="height: 10rem" controls="false">
+            <div>
+              <p>Slide 1</p>
+            </div>
+            <div>
+              <p>Slide 2</p>
+            </div>
+            <div>
+              <p>Slide 3</p>
+            </div>
+            <div>
+              <p>Slide 4</p>
+            </div>
+          </k-content-slider>
+        </k-card>
+      </div>
+    </div>
+    <h3 id="loop"><a href="#loop" class="no-link">Loop</a></h3>
+    <p>To make the slider loop (go back to the beginning after it hits the last slide) use the <code>loop="true"</code>
+      attribute.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />  <span class="hljs-attr">loop</span>=<span class="hljs-string">"true"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-card label="Results">
+          <k-content-slider class="bg-alt" style="height: 10rem" loop="true">
+            <div>
+              <p>Slide 1</p>
+            </div>
+            <div>
+              <p>Slide 2</p>
+            </div>
+            <div>
+              <p>Slide 3</p>
+            </div>
+            <div>
+              <p>Slide 4</p>
+            </div>
+          </k-content-slider>
+        </k-card>
+      </div>
+    </div>
+    <h2 id="jsRef" class="mt"><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">ShadowComponent</a></h6>
+    <h5>
+      <code>new ContentSlider()</code>
+    </h5>
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./component.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>index<i>: number</i></code></h5>
+    <p>Gets or sets the current slide index. Automatically validates to stay within bounds. Syncs to <code>index</code>
+      attribute. Default value is <code>0</code>.</p>
+    <h5><code>controls<i>: boolean</i></code></h5>
+    <p>Gets or sets whether control buttons are visible. Syncs to <code>controls</code> attribute. Default value is
+      <code>true</code>.</p>
+    <h5><code>keyboardControls<i>: boolean</i></code></h5>
+    <p>Gets or sets whether keyboard controls are enabled. Syncs to <code>keyboard-controls</code> attribute. Default
+      value is <code>true</code>.</p>
+    <h5><code>globalControls<i>: boolean</i></code></h5>
+    <p>Gets or sets whether global keyboard controls are enabled. Use with caution - recommended only for prominent
+      sliders. Syncs to <code>global-controls</code> attribute. Default value is <code>false</code>.</p>
+    <h5><code>loop<i>: boolean</i></code></h5>
+    <p>Gets or sets whether the slider loops continuously (after the last slide, go to the first; before the first
+      slide, go to the last). Syncs to <code>loop</code> attribute. Default value is <code>false</code>.</p>
+    <h5><code>content<i>: Array&lt;HTMLElement&gt;</i></code></h5>
+    <p>Array of child elements that serve as slides. Automatically updated when the component is connected.</p>
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>previous()<i>: void</i></code></h5>
+    <p>Navigates to the previous slide. If <code>loop</code> is enabled and currently on the first slide, goes to the
+      last slide. Dispatches a <code>previous</code> event.</p>
+    <h5><code>next()<i>: void</i></code></h5>
+    <p>Navigates to the next slide. If <code>loop</code> is enabled and currently on the last slide, goes to the first
+      slide. Dispatches a <code>next</code> event.</p>
+    <h5><code>goto(index)<i>: void</i></code></h5>
+    <p>Navigates to the slide at the specified index. Index is automatically validated to stay within bounds. Dispatches
+      a <code>goto</code> event.</p>
+    <ul>
+      <li><strong>index</strong> <code>number</code> - The zero-based index of the slide to navigate to</li>
+    </ul>
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>change</code></h5>
+    <p>Fired when the active slide changes. The event detail contains <code>{ index }</code>.</p>
+    <h5><code>previous</code></h5>
+    <p>Fired when the previous button is clicked or previous navigation is triggered. The event detail contains
+      <code>{ index }</code> of the target slide.</p>
+    <h5><code>next</code></h5>
+    <p>Fired when the next button is clicked or next navigation is triggered. The event detail contains
+      <code>{ index }</code> of the target slide.</p>
+    <h5><code>goto</code></h5>
+    <p>Fired when programmatic navigation to a specific slide occurs. The event detail contains <code>{ index }</code>
+      of the target slide.</p>
+    <h5><code>keyleft</code></h5>
+    <p>Fired when the left arrow key is pressed (before triggering previous navigation).</p>
+    <h5><code>keyright</code></h5>
+    <p>Fired when the right arrow key is pressed (before triggering next navigation).</p>
+    <h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
+    <h5><code>Default Slot</code></h5>
+    <p>The main content area where slide elements are placed. Each direct child element becomes a slide.</p>
+    <h5><code>prev</code></h5>
+    <p>Custom content for the previous button. Defaults to a left chevron icon if not provided.</p>
+    <h5><code>next</code></h5>
+    <p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/ContentSlider.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}/dialog.html RENAMED Viewed

@@ -1,40 +1,42 @@
 <!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>Dialog - 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>
   <main>
     <h1 class="ta-center">Dialog</h1>
-    <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="#titles">Titles</a><br />
-        <a href="#actionButtons">Action Buttons</a><br />
-        <a href="#jsUsage">JavaScript Usage</a><br />
-        <a href="#confirmDialog">Confirm Dialog</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 />
-        <a href="#staticMethods">Static 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="#titles">Titles</a><br />
+          <a href="#actionButtons">Action Buttons</a><br />
+          <a href="#jsUsage">JavaScript Usage</a><br />
+          <a href="#confirmDialog">Confirm Dialog</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="#attributes">Attributes</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#staticMethods">Static Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Create dialogs using the <code>k-dialog</code> component. Open the dialog by calling the <code>open()</code> method, and close it by calling the <code>close()</code> method. Or it can be closed using the dialog's GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).</p>
@@ -92,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-ui/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">'Hello World'</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">'Hello World'</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-ui/src/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d7').addEventListener('click', () => {
         Dialog.create('Hello World');
       });
     </script>
     <h5>Dialog with Title</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">"d7b"</span>&gt;</span>Open Dialog with Title<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-ui/src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7b'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'This is the dialog content'</span>, {<br />      <span class="hljs-attr">title</span>: <span class="hljs-string">'My Dialog Title'</span><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">"d7b"</span>&gt;</span>Open Dialog with Title<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">'d7b'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'This is the dialog content'</span>, {<br />      <span class="hljs-attr">title</span>: <span class="hljs-string">'My Dialog Title'</span><br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <button id="d7b" class="mb">Open Dialog with Title</button>
     <script type="module">
-      import Dialog from '/kempo-ui/src/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d7b').addEventListener('click', () => {
         Dialog.create('This is the dialog content', {
           title: 'My Dialog Title'
@@ -114,10 +116,10 @@
     </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-ui/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">"Oh no, don't do that!"</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">"Oh no, don't do that!"</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-ui/src/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d8').addEventListener('click', () => {
         Dialog.error("Oh no, don't do that!");
       });
@@ -125,10 +127,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-ui/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>
+    <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-ui/src/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);
@@ -136,10 +138,10 @@
       });
     </script>
-    <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="/kempo-ui/components/shadow-component.html">ShadowComponent</a></h6>
+    <h6>Extends <a href="./components/shadow-component.html">ShadowComponent</a></h6>
     <h5>
       <code>new Dialog()</code><br />
       <code>new Dialog(<i>object</i> options)</code>
@@ -163,9 +165,9 @@
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="/kempo-ui/components/shadow-component.html">ShadowComponent</a></li>
-      <li><a href="/kempo-ui/components/icon.html">Icon</a></li>
-      <li><a href="/kempo-ui/components/focus-capture.html">FocusCapture</a></li>
+      <li><a href="./components/shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./components/icon.html">Icon</a></li>
+      <li><a href="./components/focus-capture.html">FocusCapture</a></li>
     </ul>
     <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
@@ -325,8 +327,10 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="/kempo-ui/src/components/Dialog.js"></script>
-  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="../src/components/Dialog.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>
   <script>
     document.querySelectorAll('.openDialog').forEach( $btn => {
       $btn.addEventListener('click', () => {

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

@@ -1,34 +1,36 @@
 <!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>FocusCapture - 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">FocusCapture</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="#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="#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="#dialogExample">Dialog Example</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="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <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>
@@ -103,8 +105,11 @@
   </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/FocusCapture.js"></script>
-  <script type="module" src="/kempo-ui/src/components/Dialog.js"></script>
+  <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>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
 </body>
 </html>