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/docs/kempo-ui/components/dialog.html ADDED Viewed

@@ -0,0 +1,339 @@
+<!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" />
+  <script>window.litDisableBundleWarning = true;</script>
+</head>
+<body>
+  <k-import src="/kempo-ui/nav.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>
+    <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>
+    <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">"d1"</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">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</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('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d1" slot="right">Open Dialog</button>
+    <k-dialog id="d1">
+      <p class="p">Hello World</p>
+    </k-dialog>
+    <h3 id="titles"><a href="#titles" class="no-link">Titles</a></h3>
+    <p>Assign an element to the <code>title</code> slot to have it appear as the dialog title.</p>
+    <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">"d2"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span><br />    <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span><br />    <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span><br />  &gt;</span>This is a fact<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>A hotdog is a sandwhich<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d2" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d2"
+    >
+      <h6
+        class="m0 px"
+        slot="title"
+      >This is a fact</h6>
+      <p class="p">A hotdog is a sandwhich</p>
+    </k-dialog>
+    <h3 id="actionButtons"><a href="#actionButtons" class="no-link">Action Buttons</a></h3>
+    <p>Add a cancel button using the <code>cancel-text</code> attribute.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"d4"</span><br />  <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Absolutly Not"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Mint and Chocolate belong together<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d4" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d4"
+      cancel-text="Absolutly Not"
+    >
+      <p class="p">Mint and Chocolate belong together</p>
+    </k-dialog>
+    <p>Add a confirm button using the <code>confirm-text</code> attribute.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"d5"</span><br />  <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Confirm"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Spaghetti is the greatest food<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d5" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d5"
+      confirm-text="Confirm"
+    >
+      <p class="p">Spaghetti is the greatest food</p>
+    </k-dialog>
+    <p>Try it with both a cancel and confirm button.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"d6"</span><br />  <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"It should be outlawed"</span><br />  <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Of course it is"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Ranch is gross<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d6" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d6"
+      cancel-text="It should be outlawed"
+      confirm-text="Of course it is"
+    >
+      <p class="p">Ranch is gross</p>
+    </k-dialog>
+    <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>
+    <button id="d7" class="mb">Open Dialog</button>
+    <script type="module">
+      import Dialog from '/kempo-ui/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>
+    <button id="d7b" class="mb">Open Dialog with Title</button>
+    <script type="module">
+      import Dialog from '/kempo-ui/src/components/Dialog.js';
+      document.getElementById('d7b').addEventListener('click', () => {
+        Dialog.create('This is the dialog content', {
+          title: 'My Dialog Title'
+        });
+      });
+    </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>
+    <button id="d8" class="mb">Open Dialog</button>
+    <script type="module">
+      import Dialog from '/kempo-ui/src/components/Dialog.js';
+      document.getElementById('d8').addEventListener('click', () => {
+        Dialog.error("Oh no, don't do that!");
+      });
+    </script>
+    <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>
+    <button id="d9" class="mb">Open Confirm Dialog</button>
+    <script type="module">
+      import Dialog from '/kempo-ui/src/components/Dialog.js';
+      document.getElementById('d9').addEventListener('click', () => {
+        Dialog.confirm("Are you sure you want to proceed?", response => {
+          console.log("User response:", response);
+        });
+      });
+    </script>
+    <h2 id="jsRef">JavaScript Reference</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>
+    <h5>
+      <code>new Dialog()</code><br />
+      <code>new Dialog(<i>object</i> options)</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>
+    <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>
+    </ul>
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the dialog is opened.</p>
+    <h5><code>close-btn<i>: boolean</i></code></h5>
+    <p>Whether to show the close button. Default is <code>true</code>.</p>
+    <h5><code>overlay-close<i>: boolean</i></code></h5>
+    <p>Whether clicking the overlay closes the dialog. Default is <code>true</code>.</p>
+    <h5><code>confirm-text<i>: string</i></code></h5>
+    <p>Text for the confirm button.</p>
+    <h5><code>confirm-classes<i>: string</i></code></h5>
+    <p>Classes for the confirm button. Default is <code>'success ml'</code>.</p>
+    <h5><code>cancel-text<i>: string</i></code></h5>
+    <p>Text for the cancel button.</p>
+    <h5><code>cancel-classes<i>: string</i></code></h5>
+    <p>Classes for the cancel button.</p>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>confirmAction<i>: function</i></code></h5>
+    <p>Action to perform on confirm. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
+    <h5><code>cancelAction<i>: function</i></code></h5>
+    <p>Action to perform on cancel. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
+    <h5><code>closeCallback<i>: function</i></code></h5>
+    <p>Callback to execute when the dialog is closed.</p>
+    <h5><code>previousFocus<i>: HTMLElement</i></code></h5>
+    <p>Reference to the element that had focus before the dialog was opened.</p>
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>open()<i>: void</i></code></h5>
+    <p>Opens the dialog and sets focus to the first focusable element or an element with the <code>autofocus</code> attribute.</p>
+    <h5><code>close()<i>: void</i></code></h5>
+    <p>Closes the dialog and calls the <code>closeCallback</code>.</p>
+    <h5><code>toggle()<i>: void</i></code></h5>
+    <p>Toggles the dialog open or closed.</p>
+    <h5><code>focus()<i>: void</i></code></h5>
+    <p>Focuses the first focusable element in the dialog and saves the previously focused element.</p>
+    <h5><code>blur()<i>: void</i></code></h5>
+    <p>Returns focus to the element that had focus before the dialog was opened.</p>
+    <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <h5><code>Dialog.create(contents, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a new dialog with the specified contents and options. Returns the created Dialog instance.</p>
+    <p>If <code>contents</code> is plain text (no HTML tags), it will automatically be wrapped in a <code>&lt;p class="p"&gt;</code> tag. If it contains HTML, it will be inserted as-is. If it's an HTMLElement or DocumentFragment, it will be appended directly.</p>
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>contents<i>: string | HTMLElement | DocumentFragment</i></code> - The content to display in the dialog. Plain text will be wrapped in a paragraph tag automatically.</li>
+      <li><code>options<i>: object</i></code> - Configuration options for the dialog.</li>
+    </ul>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string | HTMLElement</i> - The title to display in the dialog header. Will be wrapped in an <code>&lt;h5&gt;</code> tag with the <code>title</code> slot.</li>
+      <li><code>titleClasses</code>: <i>string</i> - CSS classes for the title element. Default is <code>'pyh px m0'</code>.</li>
+      <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened. Default is <code>true</code>.</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>
+      <li><code>removeOnClose</code>: <i>boolean</i> - Whether to remove the dialog from the DOM when closed. Default is <code>true</code>.</li>
+      <li><code>closeExisting</code>: <i>boolean</i> - Whether to close existing dialogs before opening this one. Default is <code>true</code>.</li>
+      <li><code>width</code>: <i>string</i> - CSS width value for the dialog.</li>
+      <li><code>minWidth</code>: <i>string</i> - CSS min-width value for the dialog.</li>
+      <li><code>maxWidth</code>: <i>string</i> - CSS max-width value for the dialog.</li>
+      <li><code>height</code>: <i>string</i> - CSS height value for the dialog.</li>
+      <li><code>minHeight</code>: <i>string</i> - CSS min-height value for the dialog.</li>
+      <li><code>maxHeight</code>: <i>string</i> - CSS max-height value for the dialog.</li>
+    </ul>
+    <h5><code>Dialog.confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a confirmation dialog with the specified text and options. The response callback receives a boolean value indicating whether the user confirmed (<code>true</code>) or canceled (<code>false</code>).</p>
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called with the user's response (<code>true</code> for confirm, <code>false</code> for cancel).</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Confirm'</code>.</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button. Default is <code>'Yes'</code>.</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button. Default is <code>'success ml'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button. Default is <code>'No'</code>.</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button. Default is <code>'danger'</code>.</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button. Default is <code>false</code>.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog. Default is <code>false</code>.</li>
+    </ul>
+    <h5><code>Dialog.alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an alert dialog with the specified text and options.</p>
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Alert'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+    <h5><code>Dialog.error(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an error dialog with the specified text and options. The title is displayed in red.</p>
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The error message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Error'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+    <h5><code>Dialog.success(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a success dialog with the specified text and options. The title is displayed in green.</p>
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The success message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Success'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+  </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>
+    document.querySelectorAll('.openDialog').forEach( $btn => {
+      $btn.addEventListener('click', () => {
+        const $dialog = document.getElementById($btn.dataset.dialog);
+        if($dialog) $dialog.open();
+      });
+    });
+  </script>
+</body>
+</html>

package/docs/{components → kempo-ui/components}/focus-capture.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>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 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">FocusCapture</h1>
   <main>
     <details class="b r mb">
@@ -102,8 +103,8 @@
   </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>
+  <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>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/hybrid-component.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>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 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">HybridComponent</h1>
   <main>
     <details class="b r mb">
@@ -104,6 +105,6 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/icon.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>Icon - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <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" />
   <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">Icon</h1>
   <main>
     <details class="b r mb">
@@ -145,8 +146,8 @@
   </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="../src/components/Icon.js"></script>
+  <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>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/import.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>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" />
+  <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">Import</h1>
   <main>
     <details class="b r mb">
@@ -63,7 +64,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}/light-component.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>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 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">LightComponent</h1>
   <main>
     <details class="b r mb">
@@ -91,6 +92,6 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/photo-viewer.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>PhotoViewer - 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>
   <main>
     <h1 class="ta-center">PhotoViewer</h1>
@@ -214,7 +215,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/PhotoViewer.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/PhotoViewer.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/resize.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>Resize - 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">Resize</h1>
   <main>
     <details class="b r mb">
@@ -167,7 +168,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Resize.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Resize.js"></script>
 </body>
 </html>