npm - kempo-ui - Versions diffs - 0.0.3 → 0.0.4 - Mend

kempo-ui 0.0.3 → 0.0.4

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

package/.github/workflows/publish-major.yml +39 -0
package/.github/workflows/publish-minor.yml +39 -0
package/.github/workflows/{publish-npm.yml → publish-patch.yml} +1 -1
package/.vscode/settings.json +2 -0
package/dist/kempo-hljs.css +1 -0
package/dist/src/components/Accordion.js +36 -0
package/dist/src/components/Card.js +37 -0
package/dist/src/components/Collapsible.js +41 -0
package/dist/src/components/ContentSlider.js +44 -0
package/dist/src/components/Dialog.js +113 -0
package/dist/src/components/Icon.js +2 -2
package/dist/src/components/PersistantCollapsible.js +1 -0
package/dist/src/components/PhotoViewer.js +135 -0
package/dist/src/components/Resize.js +96 -0
package/dist/src/components/ShowMore.js +42 -0
package/dist/src/components/SideMenu.js +1 -1
package/dist/src/components/Split.js +84 -0
package/dist/src/components/Tabs.js +155 -0
package/dist/src/components/Tags.js +69 -0
package/dist/src/components/ThemeSwitcher.js +23 -0
package/dist/src/components/Timestamp.js +1 -0
package/dist/src/utils/debounce.js +1 -0
package/dist/src/utils/drag.js +1 -0
package/dist/src/utils/formatTimestamp.js +1 -0
package/dist/src/utils/propConverters.js +1 -0
package/dist/src/utils/watchWindowSize.js +1 -0
package/docs/components/accordion.html +69 -25
package/docs/components/card.html +6 -5
package/docs/components/collapsible.html +198 -0
package/docs/components/content-slider.html +56 -26
package/docs/components/dialog.html +54 -48
package/docs/components/focus-capture.html +2 -3
package/docs/components/icon.html +5 -8
package/docs/components/import.html +1 -6
package/docs/components/persistant-collapsible.html +123 -0
package/docs/components/photo-viewer.html +226 -0
package/docs/components/resize.html +44 -18
package/docs/components/show-more.html +12 -6
package/docs/components/side-menu.html +3 -12
package/docs/components/split.html +26 -5
package/docs/components/tablePagination.html +4 -4
package/docs/components/tableRecordFiltering.html +16 -3
package/docs/components/tableRecordSelection.html +2 -2
package/docs/components/tabs.html +24 -7
package/docs/components/tags.html +24 -8
package/docs/components/theme-switcher.html +3 -6
package/docs/components/timestamp.html +20 -24
package/docs/components/toast.html +23 -32
package/docs/components/toggle.html +4 -3
package/docs/kempo-hljs.css +1 -0
package/docs/media/civic.jpg +0 -0
package/docs/media/corvette.jpg +0 -0
package/docs/media/evo.jpg +0 -0
package/docs/media/gtr.jpg +0 -0
package/docs/media/nsx.jpg +0 -0
package/docs/nav.inc.html +11 -17
package/docs/src/components/Accordion.js +36 -0
package/docs/src/components/Card.js +37 -0
package/docs/src/components/Collapsible.js +41 -0
package/docs/src/components/ContentSlider.js +44 -0
package/docs/src/components/Dialog.js +113 -0
package/docs/src/components/Icon.js +2 -2
package/docs/src/components/PersistantCollapsible.js +1 -0
package/docs/src/components/PhotoViewer.js +135 -0
package/docs/src/components/Resize.js +96 -0
package/docs/src/components/ShowMore.js +42 -0
package/docs/src/components/SideMenu.js +1 -1
package/docs/src/components/Split.js +84 -0
package/docs/src/components/Tabs.js +155 -0
package/docs/src/components/Tags.js +69 -0
package/docs/src/components/ThemeSwitcher.js +23 -0
package/docs/src/components/Timestamp.js +1 -0
package/docs/src/utils/debounce.js +1 -0
package/docs/src/utils/drag.js +1 -0
package/docs/src/utils/formatTimestamp.js +1 -0
package/docs/src/utils/propConverters.js +1 -0
package/docs/src/utils/watchWindowSize.js +1 -0
package/docs/utils/debounce.html +78 -0
package/docs/utils/drag.html +104 -0
package/docs/utils/formatTimestamp.html +114 -0
package/docs/utils/propConverters.html +132 -0
package/docs/utils/watchWindowSize.html +166 -0
package/icons/error.svg +1 -1
package/icons/warning.svg +1 -1
package/package.json +1 -1
package/scripts/build.js +1 -1
package/scripts/docs.js +4 -2
package/src/components/Accordion.js +229 -0
package/src/components/Collapsible.js +109 -0
package/src/components/ContentSlider.js +205 -0
package/src/components/Dialog.js +368 -0
package/src/components/PersistantCollapsible.js +69 -0
package/src/components/PhotoViewer.js +368 -0
package/src/components/Resize.js +210 -0
package/src/components/ShadowComponent.js +3 -1
package/src/components/ShowMore.js +109 -0
package/src/components/Sortable.js +193 -0
package/src/components/Split.js +192 -0
package/src/components/Table.js +1202 -0
package/src/components/Tabs.js +428 -0
package/src/components/Tags.js +253 -0
package/src/components/Timestamp.js +31 -0
package/src/components/Toast.js +454 -0
package/src/components/Toggle.js +173 -0
package/src/components/tableControls/DeleteRecord.js +29 -0
package/src/components/tableControls/Edit.js +88 -0
package/src/components/tableControls/ExportCSV.js +71 -0
package/src/components/tableControls/ExportJson.js +55 -0
package/src/components/tableControls/FieldSortHide.js +76 -0
package/src/components/tableControls/Filters.js +114 -0
package/src/components/tableControls/FirstPage.js +65 -0
package/src/components/tableControls/HiddenCount.js +45 -0
package/src/components/tableControls/Hide.js +34 -0
package/src/components/tableControls/LastPage.js +65 -0
package/src/components/tableControls/NextPage.js +65 -0
package/src/components/tableControls/PageSelect.js +109 -0
package/src/components/tableControls/PageSize.js +68 -0
package/src/components/tableControls/PrevPage.js +65 -0
package/src/components/tableControls/Search.js +58 -0
package/src/components/tableControls/ShowAll.js +34 -0
package/src/components/tableControls/TableControl.js +105 -0
package/src/utils/debounce.js +9 -0
package/src/utils/drag.js +80 -0
package/src/utils/formatTimestamp.js +27 -0
package/src/utils/toTitleCase.js +9 -0
package/src/utils/watchWindowSize.js +16 -0
package/dist/src/utils/cli.js +0 -1
package/dist/src/utils/fs-utils.js +0 -1
package/docs/components/component.html +0 -90
package/docs/components/directory-viewer.html +0 -90
package/docs/components/lazy-component.html +0 -84
package/docs/components/reactive-component.html +0 -69
package/docs/components/reactive-lazy-component.html +0 -69
package/docs/components/search.html +0 -102
package/docs/components/sortable.html +0 -96
package/src/utils/cli.js +0 -43
package/src/utils/fs-utils.js +0 -41

package/docs/components/collapsible.html ADDED Viewed

@@ -0,0 +1,198 @@
+<!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="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module">
+    import ShadowComponent from '../src/components/ShadowComponent.js';
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </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/content-slider.html CHANGED Viewed

@@ -7,8 +7,10 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
   <script type="module">
+    import ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -31,14 +33,15 @@
         <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="#events">Events</a><br />
+        <a href="#slots">Slots</a><br />
       </div>
     </details>
     <h3>Description</h3>
-    <p>description</p>
+    <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">
@@ -141,50 +144,77 @@
     <h2 id="jsRef">JavaScript Refrerence</h2>
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
+    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
     <h5>
-      <code>new ContentSlider()</code><br />
-      <code>new ContentSlider(<i>&lt;Array>HTMLElement</i> content)</code><br/>
-      <code>new ContentSlider(<i>&lt;Array>HTMLElement</i> content, <i>Object</i> init_attrs)</code>
+      <code>new ContentSlider()</code>
     </h5>
-    <h4>Paramters</h4>
-    <h5><code>content<i>: &lt;Array>HTMLElement></i></code></h5>
-    <p>An array of <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a>s that will be the contents of this slider.</p>
-    <h5><code>init_attrs<i>: Object</i></code></h5>
-    <p>An options object that may contain the initial values of the attributes (see attributes below).</p>
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="">LazyComponent Class</a></li>
-      <li><a href="">elements.js Util</a></li>
+      <li><a href="./component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a></li>
     </ul>
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>index<i>: number</i></code></h5>
-    <p>The index of the currently active slide (base <code>0</code>). The default value is <code>0</code>.</p>
+    <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>A boolean that indicates if the control buttons should be shown. The default value is <code>true</code>.</p>
+    <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>A boolean that indicates if the left and right arrows should be used to control the slider. The default value is <code>true</code>.</p>
+    <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>A boolean that indicates if the left and right arrows should be used to control the slider even when it is not focused (the listener is on the window). The default value is <code>false</code>.</p>
+    <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>A boolean that indicates index should loop. When true, after the last side it will go back to the first, and when on the first slide the previous slide will be the last. The default value is <code>false</code>.</p>
+    <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>: undefined</i></code></h5>
-    <p>Goes to the previous slide.</p>
+    <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>: undefined</i></code></h5>
-    <p>Goes to the next slide.</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>goto(<i>number<i> index)<i>: undefined</i></code></h5>
-    <p>Goes to the specified slide. If the index is more than the number of slides the last side will be shown. If the index is below 0, the first slide will be shown.</p>
+    <h5><code>next</code></h5>
+    <p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
   </main>
   <script type="module" src="../src/components/Import.js"></script>

package/docs/components/dialog.html CHANGED Viewed

@@ -7,8 +7,10 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
   <script type="module">
+    import ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -30,7 +32,6 @@
         <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 />
@@ -93,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/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>
+    <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">
-      import Dialog from '/kempo/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d7').addEventListener('click', () => {
         Dialog.create('<p>Hello World</p>');
       });
     </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/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">"&lt;p&gt;Oh no, don't do that!&lt;/p&gt;"</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">"&lt;p&gt;Oh no, don't do that!&lt;/p&gt;"</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/components/Dialog.js';
+      import Dialog from '/src/components/Dialog.js';
       document.getElementById('d8').addEventListener('click', () => {
         Dialog.error("Oh no, don't do that!");
       });
@@ -114,10 +115,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/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/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);
@@ -128,55 +129,43 @@
     <h2 id="jsRef">JavaScript Reference</h2>
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
     <h5>
-      <code>new Dialog(options)</code>
+      <code>new Dialog()</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>
+    <p>The Dialog constructor takes no parameters. Configuration is done through attributes or properties after instantiation.</p>
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a></li>
     </ul>
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>opened<i>: boolean</i></code></h5>
-    <p>Whether the dialog is opened.</p>
+    <p>Whether the dialog is opened. Syncs with the <code>opened</code> attribute.</p>
     <h5><code>closeBtn<i>: boolean</i></code></h5>
-    <p>Whether to show the close button.</p>
+    <p>Whether to show the close button. Syncs with the <code>close-btn</code> attribute.</p>
     <h5><code>overlayClose<i>: boolean</i></code></h5>
-    <p>Whether clicking the overlay closes the dialog.</p>
+    <p>Whether clicking the overlay closes the dialog. Syncs with the <code>overlay-close</code> attribute.</p>
     <h5><code>confirmText<i>: string</i></code></h5>
-    <p>Text for the confirm button.</p>
+    <p>Text for the confirm button. Syncs with the <code>confirm-text</code> attribute.</p>
     <h5><code>confirmClasses<i>: string</i></code></h5>
-    <p>Classes for the confirm button.</p>
+    <p>Classes for the confirm button. Syncs with the <code>confirm-classes</code> attribute.</p>
     <h5><code>cancelText<i>: string</i></code></h5>
-    <p>Text for the cancel button.</p>
+    <p>Text for the cancel button. Syncs with the <code>cancel-text</code> attribute.</p>
     <h5><code>cancelClasses<i>: string</i></code></h5>
-    <p>Classes for the cancel button.</p>
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <p>Classes for the cancel button. Syncs with the <code>cancel-classes</code> attribute.</p>
     <h5><code>confirmAction<i>: function</i></code></h5>
-    <p>Action to perform on confirm.</p>
+    <p>Action to perform when the confirm button is clicked. Not reflected as an attribute.</p>
     <h5><code>cancelAction<i>: function</i></code></h5>
-    <p>Action to perform on cancel.</p>
+    <p>Action to perform when the cancel button is clicked. Not reflected as an attribute.</p>
     <h5><code>closeCallback<i>: function</i></code></h5>
-    <p>Callback to execute when the dialog is closed.</p>
+    <p>Callback to execute when the dialog is closed. Not reflected as an attribute.</p>
+    <h5><code>previousFocus<i>: Element</i></code></h5>
+    <p>Reference to the element that had focus before the dialog was opened. Not reflected as an attribute.</p>
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>open()<i>: void</i></code></h5>
@@ -206,25 +195,42 @@
       <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>
-    <h5><code>confirm(text, responseCallback, options)<i>: void</i></code></h5>
-    <p>Creates and opens a confirmation dialog with the specified text and options.</p>
+    <h5><code>confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a confirmation dialog with the specified text and options. The responseCallback receives a boolean indicating the user's choice.</p>
     <h6>Options</h6>
     <ul>
-      <li><code>title</code>: <i>string</i> - The title of 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>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>title</code>: <i>string</i> - The title of the dialog (default: "Confirm").</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button (default: "Yes").</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button (default: "success ml").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button (default: "No").</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button (default: "danger").</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button (default: false).</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog (default: false).</li>
+    </ul>
+    <h5><code>alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an alert dialog with the specified text and options.</p>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Alert").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</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>
     </ul>
-    <h5><code>error(text, responseCallback, options)<i>: void</i></code></h5>
+    <h5><code>error(text, responseCallback, options)<i>: Dialog</i></code></h5>
     <p>Creates and opens an error dialog with the specified text and options.</p>
     <h6>Options</h6>
     <ul>
-      <li><code>title</code>: <i>string</i> - The title of the dialog.</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>title</code>: <i>string</i> - The title of the dialog (default: "Error").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</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>
+    </ul>
+    <h5><code>success(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a success dialog with the specified text and options.</p>
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Success").</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</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>
     </ul>

package/docs/components/focus-capture.html CHANGED Viewed

@@ -26,7 +26,6 @@
         <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 />
       </div>
@@ -56,8 +55,8 @@
       <li><a href="./lazy-component.html">LazyComponent</a></li>
     </ul>
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
-    <p>The <code>FocusCapture</code> class does not introduce any new attributes beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <p>The <code>FocusCapture</code> class does not introduce any new properties beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <p>The <code>FocusCapture</code> class does not introduce any new methods beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>

package/docs/components/icon.html CHANGED Viewed

@@ -34,7 +34,6 @@
         <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 />
       </div>
@@ -139,18 +138,16 @@
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>name<i>: string</i></code></h5>
-    <p>The name of the icon.</p>
+    <p>The name of the icon. Syncs with the <code>name</code> attribute.</p>
     <h5><code>src<i>: string</i></code></h5>
-    <p>The source URL of the icon.</p>
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <p>The source URL of the icon. Syncs with the <code>src</code> attribute.</p>
     <h5><code>pathToIcons<i>: Array</i></code></h5>
-    <p>An array of paths to directories containing icons.</p>
+    <p>An array of paths to directories containing icons. This is a static property that affects all icon instances.</p>
   </main>
   <div style="height:33vh"></div>