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/components/accordion.html DELETED Viewed

@@ -1,161 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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>
-  <script type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../nav.inc.html"></k-import>
-  <h1 class="ta-center">Accordion</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="#defaultOpen">Default Open Panel</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 />
-        <a href="#events">Events</a><br />
-      </div>
-    </details>
-    <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">Basic Usage</a></h3>
-    <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-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>
-    <h3 id="defaultOpen"><a href="#defaultOpen" class="no-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 the header and the panel.</p>
-    <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-accordion
-      class="mb"
-    >
-      <k-accordion-header for-panel="panel1" active="true">Panel 1</k-accordion-header>
-      <k-accordion-panel name="panel1" active="true">
-        <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>
-    <h2 id="jsRef">JavaScript Reference</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 Accordion()</code><br />
-    </h5>
-    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
-    <ul>
-      <li><a href="./component.html">ShadowComponent</a></li>
-    </ul>
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h4>Accordion (Main Component)</h4>
-    <h5><code>activeHeader<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the currently active header element, or <code>null</code> if no panel is open.</p>
-    <h5><code>activePanel<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the currently active panel element, or <code>null</code> if no panel is open.</p>
-    <h4>AccordionHeader</h4>
-    <h5><code>forPanel<i>: string</i></code></h5>
-    <p>The panel name that this header controls. Syncs with the <code>for-panel</code> attribute.</p>
-    <h5><code>active<i>: boolean</i></code></h5>
-    <p>Whether this header is currently active (its associated panel is open). Syncs with the <code>active</code> attribute.</p>
-    <h5><code>accordion<i>: Accordion | null</i></code></h5>
-    <p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
-    <h4>AccordionPanel</h4>
-    <h5><code>name<i>: string</i></code></h5>
-    <p>Unique identifier for this panel. Must match the <code>for-panel</code> attribute of its associated header. Syncs with the <code>name</code> attribute.</p>
-    <h5><code>active<i>: boolean</i></code></h5>
-    <p>Whether this panel is currently open. Syncs with the <code>active</code> attribute.</p>
-    <h5><code>transitioning<i>: boolean</i></code></h5>
-    <p>Whether this panel is currently animating (opening or closing). Syncs with the <code>transitioning</code> attribute.</p>
-    <h5><code>accordion<i>: Accordion | null</i></code></h5>
-    <p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
-    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h4>Accordion (Main Component)</h4>
-    <h5><code>getHeader(panelName)<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the header element associated with the specified panel name, or <code>null</code> if not found.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel whose header to retrieve</li>
-    </ul>
-    <h5><code>getPanel(panelName)<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the panel element with the specified name, or <code>null</code> if not found.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to retrieve</li>
-    </ul>
-    <h5><code>openPanel(panelName)<i>: void</i></code></h5>
-    <p>Opens the panel with the specified name. Closes any currently open panel first. Dispatches an <code>openpanel</code> event.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to open</li>
-    </ul>
-    <h5><code>closePanel(panelName)<i>: void</i></code></h5>
-    <p>Closes the panel with the specified name. Dispatches a <code>closepanel</code> event.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to close</li>
-    </ul>
-    <h5><code>togglePanel(panelName)<i>: void</i></code></h5>
-    <p>Toggles the panel with the specified name (opens if closed, closes if open). Dispatches a <code>togglepanel</code> event.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to toggle</li>
-    </ul>
-    <h3 id="events"><a href="#events" class="no-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>
-  </main>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Accordion.js"></script>
-</body>
-</html>

package/docs/components/collapsible.html DELETED Viewed

@@ -1,193 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Collapsible - 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 type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../nav.inc.html"></k-import>
-  <h1 class="ta-center">Collapsible</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="#defaultOpen">Default Open</a><br />
-        <a href="#customLabel">Custom Label</a><br />
-        <a href="#customIcon">Custom Icon</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 />
-        <a href="#events">Events</a><br />
-        <a href="#slots">Slots</a><br />
-      </div>
-    </details>
-    <h3>Description</h3>
-    <p>The Collapsible component provides a way to show/hide content with a clickable label header. It features a rotating chevron icon and smooth transitions. The component extends the <a href="./component.html">ShadowComponent</a> class and supports customizable labels and icons through slots.</p>
-    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Use the collapsible component to create expandable content sections. Click the label to toggle the content visibility.</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-collapsible</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>Click to expand<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>This content can be collapsed or expanded.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Add any content here that you want to show/hide.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">k-collapsible</span>&gt;</span></code></pre>
-        </k-card>
-      </div>
-      <div class="col d-span-6 m-span-12 px">
-        <k-card label="Output">
-          <k-collapsible>
-            <span slot="label">Click to expand</span>
-            <p>This content can be collapsed or expanded.</p>
-            <p>Add any content here that you want to show/hide.</p>
-          </k-collapsible>
-        </k-card>
-      </div>
-    </div>
-    <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link">Default Open</a></h3>
-    <p>Set the <code>opened</code> attribute to have the collapsible start in an expanded state.</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-collapsible</span> <span class="hljs-attr">opened</span>=<span class="hljs-string">"true"</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>Already expanded<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>This collapsible starts in an open state.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">k-collapsible</span>&gt;</span></code></pre>
-        </k-card>
-      </div>
-      <div class="col d-span-6 m-span-12 px">
-        <k-card label="Output">
-          <k-collapsible opened="true">
-            <span slot="label">Already expanded</span>
-            <p>This collapsible starts in an open state.</p>
-          </k-collapsible>
-        </k-card>
-      </div>
-    </div>
-    <h3 id="customLabel"><a href="#customLabel" class="no-link">Custom Label</a></h3>
-    <p>You can put any content in the label slot, including formatted text, icons, or even other components.</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-collapsible</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Advanced Settings<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"opacity-50 ml"</span>&gt;</span>(Optional)<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
-  <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>Configure advanced options here.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">k-collapsible</span>&gt;</span></code></pre>
-        </k-card>
-      </div>
-      <div class="col d-span-6 m-span-12 px">
-        <k-card label="Output">
-          <k-collapsible>
-            <div slot="label">
-              <strong>Advanced Settings</strong>
-              <small class="opacity-50 ml">(Optional)</small>
-            </div>
-            <p>Configure advanced options here.</p>
-          </k-collapsible>
-        </k-card>
-      </div>
-    </div>
-    <h3 id="customIcon"><a href="#customIcon" class="no-link">Custom Icon</a></h3>
-    <p>Replace the default chevron icon with your own content using the <code>labelIcon</code> slot.</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-collapsible</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>Custom Icon<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"labelIcon"</span>&gt;</span>▼<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Using a custom arrow icon.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">k-collapsible</span>&gt;</span></code></pre>
-        </k-card>
-      </div>
-      <div class="col d-span-6 m-span-12 px">
-        <k-card label="Output">
-          <k-collapsible>
-            <span slot="label">Custom Icon</span>
-            <span slot="labelIcon">▼</span>
-            <p>Using a custom arrow icon.</p>
-          </k-collapsible>
-        </k-card>
-      </div>
-    </div>
-    <h2 id="jsRef">JavaScript Reference</h2>
-    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
-    <h5>
-      <code>new Collapsible()</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>opened<i>: boolean</i></code></h5>
-    <p>Gets or sets whether the collapsible is currently expanded. Changing this property will trigger the appropriate events and visual state changes. Syncs to <code>opened</code> attribute. Default value is <code>false</code>.</p>
-    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h5><code>open()<i>: void</i></code></h5>
-    <p>Expands the collapsible to show its content. Sets <code>opened</code> to <code>true</code>.</p>
-    <h5><code>close()<i>: void</i></code></h5>
-    <p>Collapses the collapsible to hide its content. Sets <code>opened</code> to <code>false</code>.</p>
-    <h5><code>toggle()<i>: void</i></code></h5>
-    <p>Toggles the collapsible state (expands if collapsed, collapses if expanded). Dispatches an <code>openedtoggled</code> event.</p>
-    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
-    <h5><code>openedchanged</code></h5>
-    <p>Fired when the opened state changes. The event detail contains the string <code>"open"</code> or <code>"close"</code>.</p>
-    <h5><code>open</code></h5>
-    <p>Fired when the collapsible is expanded.</p>
-    <h5><code>close</code></h5>
-    <p>Fired when the collapsible is collapsed.</p>
-    <h5><code>openedtoggled</code></h5>
-    <p>Fired when the <code>toggle()</code> method is called (typically when the label is clicked).</p>
-    <h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
-    <h5><code>Default Slot</code></h5>
-    <p>The main content area that can be collapsed or expanded.</p>
-    <h5><code>label</code></h5>
-    <p>The clickable label content. This is what users click to toggle the collapsible state.</p>
-    <h5><code>labelIcon</code></h5>
-    <p>Custom content for the toggle icon. Defaults to a right-pointing chevron that rotates when expanded. The icon automatically gets hover effects and rotation animations.</p>
-  </main>
-	<div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Collapsible.js"></script>
-</body>
-</html>

package/docs/components/dialog.html DELETED Viewed

@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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>
-  <script type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../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 />
-        <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 />
-        <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">"doument.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">'/src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'&lt;p&gt;Hello World&lt;/p&gt;'</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-    <button id="d7" class="mb">Open Dialog</button>
-    <script type="module" src="./init.js"></script>
-  <script type="module" src="../src/components/Dialog.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/init.js DELETED Viewed

@@ -1,7 +0,0 @@
-import Import from '../src/components/Import.js';
-import Icon from '../src/components/Icon.js';
-import ShadowComponent from '../src/components/ShadowComponent.js';
-Import.replacements.root = '../';
-Icon.pathToIcons = ['../icons'];
-ShadowComponent.stylesheetPath = '../kempo.min.css';