npm - kempo - Versions diffs - 2.9.2 → 2.10.0 - Mend

kempo 2.9.2 → 2.10.0

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

package/dist/components/Accordion.js +1 -1
package/dist/components/Dialog.js +1 -1
package/dist/components/DirectoryViewer.js +1 -1
package/dist/components/FocusCapture.js +1 -1
package/dist/components/Icon.js +1 -1
package/dist/components/Search.js +1 -1
package/dist/components/Table.js +1 -1
package/dist/components/Timestamp.js +1 -1
package/dist/components/Toggle.js +1 -1
package/dist/components/tableControls/DeleteSelected.js +1 -1
package/dist/components/tableControls/Edit.js +1 -0
package/dist/components/tableControls/Filters.js +1 -0
package/dist/components/tableControls/HiddenCount.js +1 -0
package/dist/components/tableControls/Hide.js +1 -0
package/dist/components/tableControls/PageSelect.js +1 -1
package/dist/components/tableControls/PageSize.js +1 -1
package/dist/components/tableControls/ShowAll.js +1 -0
package/dist/index.js +1 -1
package/dist/kempo-styles.css +1 -1
package/dist/kempo-vars.css +1 -1
package/dist/utils/formatTimestamp.js +1 -1
package/docs/components/_template.html +9 -0
package/docs/components/accordion.html +52 -12
package/docs/components/card.html +68 -8
package/docs/components/component.html +6 -0
package/docs/components/content-slider.html +8 -0
package/docs/components/dialog.html +145 -5
package/docs/components/directory-viewer.html +51 -40
package/docs/components/focus-capture.html +68 -0
package/docs/components/icon.html +76 -5
package/docs/components/import.html +47 -0
package/docs/components/lazy-component.html +45 -15
package/docs/components/reactive-component.html +69 -0
package/docs/components/reactive-lazy-component.html +69 -0
package/docs/components/resize.html +52 -3
package/docs/components/search.html +102 -0
package/docs/components/show-more.html +54 -5
package/docs/components/{sidemenu.html → side-menu.html} +56 -3
package/docs/components/split.html +57 -16
package/docs/components/table.html +90 -189
package/docs/components/tableControls.html +91 -0
package/docs/components/tableCustomFields.html +112 -0
package/docs/components/tablePagination.html +92 -0
package/docs/components/tableRecordEditing.html +144 -0
package/docs/components/tableRecordFiltering.html +82 -0
package/docs/components/tableRecordHiding.html +84 -0
package/docs/components/tableRecordSelection.html +86 -0
package/docs/components/tableRowControls.html +103 -0
package/docs/components/tabs.html +72 -4
package/docs/components/tags.html +94 -0
package/docs/components/theme-switcher.html +74 -0
package/docs/components/timestamp.html +86 -0
package/docs/components/toggle.html +37 -34
package/docs/icons/check.svg +1 -0
package/docs/icons/hide.svg +1 -0
package/docs/icons/show.svg +1 -0
package/docs/index.html +5 -0
package/docs/kempo/components/Accordion.js +1 -1
package/docs/kempo/components/Dialog.js +1 -1
package/docs/kempo/components/DirectoryViewer.js +1 -1
package/docs/kempo/components/FocusCapture.js +1 -1
package/docs/kempo/components/Icon.js +1 -1
package/docs/kempo/components/Search.js +1 -1
package/docs/kempo/components/Table.js +1 -1
package/docs/kempo/components/Timestamp.js +1 -1
package/docs/kempo/components/Toggle.js +1 -1
package/docs/kempo/components/tableControls/DeleteSelected.js +1 -1
package/docs/kempo/components/tableControls/Edit.js +1 -0
package/docs/kempo/components/tableControls/Filters.js +1 -0
package/docs/kempo/components/tableControls/HiddenCount.js +1 -0
package/docs/kempo/components/tableControls/Hide.js +1 -0
package/docs/kempo/components/tableControls/PageSelect.js +1 -1
package/docs/kempo/components/tableControls/PageSize.js +1 -1
package/docs/kempo/components/tableControls/ShowAll.js +1 -0
package/docs/kempo/index.js +1 -1
package/docs/kempo/kempo-styles.css +1 -1
package/docs/kempo/kempo-vars.css +1 -1
package/docs/kempo/utils/formatTimestamp.js +1 -1
package/docs/nav-1.inc.html +16 -2
package/docs/nav.inc.html +10 -2
package/docs/search.json +281 -23
package/docs/styles/_template.html +6 -0
package/docs/styles/borders-spacing.html +6 -0
package/docs/styles/buttons.html +6 -0
package/docs/styles/colors.html +6 -0
package/docs/styles/displays-layouts.html +6 -0
package/docs/styles/embed-1.html +6 -0
package/docs/styles/inputs.html +6 -0
package/docs/styles/tables.html +6 -0
package/docs/styles/typography.html +6 -0
package/docs/{components/stacks.html → utils/_template.html} +11 -30
package/docs/utils/cli.html +84 -0
package/docs/utils/cookie.html +87 -0
package/docs/utils/debounce.html +61 -0
package/docs/utils/drag.html +85 -0
package/docs/utils/element.html +124 -0
package/docs/utils/format-timestamp.html +64 -0
package/docs/utils/fuzzy-match.html +60 -0
package/icons/check.svg +1 -0
package/icons/hide.svg +1 -0
package/icons/show.svg +1 -0
package/package.json +1 -1
package/src/components/Accordion.js +0 -1
package/src/components/Dialog.js +15 -6
package/src/components/DirectoryViewer.js +21 -92
package/src/components/FocusCapture.js +2 -1
package/src/components/Icon.js +3 -1
package/src/components/Search.js +4 -1
package/src/components/Table.js +469 -139
package/src/components/Timestamp.js +7 -4
package/src/components/Toggle.js +3 -0
package/src/components/tableControls/DeleteSelected.js +36 -22
package/src/components/tableControls/Edit.js +88 -0
package/src/components/tableControls/Filters.js +128 -0
package/src/components/tableControls/HiddenCount.js +42 -0
package/src/components/tableControls/Hide.js +43 -0
package/src/components/tableControls/PageSelect.js +54 -30
package/src/components/tableControls/PageSize.js +33 -16
package/src/components/tableControls/ShowAll.js +40 -0
package/src/kempo-styles.css +7 -0
package/src/kempo-vars.css +2 -0
package/src/utils/formatTimestamp.js +26 -10
package/docs/table.html +0 -0
package/src/components/Stacks.js +0 -79
package/src/utils/files.js +0 -15

package/docs/components/accordion.html CHANGED Viewed

@@ -6,6 +6,12 @@
   <title>Accordion - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
@@ -16,7 +22,10 @@
     >
       <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="#attributes">Attributes</a><br />
@@ -29,6 +38,7 @@
     <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"
     >
@@ -46,7 +56,27 @@
       </k-accordion-panel>
     </k-accordion>
-    <h2 id="jsRef">JavaScript Refrerence</h2>
+    <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">Component</a></h6>
@@ -54,26 +84,36 @@
       <code>new Accordion()</code><br />
     </h5>
-    <h4>Paramters</h4>
-    <h5><code>param<i>: type</i></code></h5>
-    <p>param_description</p>
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href=""></a></li>
+      <li><a href="../utils/element.html">utils/element.js</a></li>
     </ul>
     <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
-    <h5><code>attr<i>: type</i></code></h5>
-    <p>attr_description</p>
+    <h5><code>forPanel: string</code></h5>
+    <p>Specifies the panel associated with the header.</p>
+    <h5><code>active: boolean</code></h5>
+    <p>Indicates whether the panel or header is active.</p>
+    <h5><code>transitioning: boolean</code></h5>
+    <p>Indicates whether the panel is in the process of transitioning.</p>
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h5><code>prop<i>: type</i></code></h5>
-    <p>prop_description</p>
+    <h5><code>activeHeader: HTMLElement</code></h5>
+    <p>Returns the currently active header element.</p>
+    <h5><code>activePanel: HTMLElement</code></h5>
+    <p>Returns the currently active panel element.</p>
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h5><code>method(<i>type<i> arg)<i>: return_type</i></code></h5>
-    <p>method_description</p>
+    <h5><code>getHeader(panelName: string): HTMLElement</code></h5>
+    <p>Returns the header element associated with the specified panel name.</p>
+    <h5><code>getPanel(panelName: string): HTMLElement</code></h5>
+    <p>Returns the panel element associated with the specified panel name.</p>
+    <h5><code>openPanel(panelName: string): void</code></h5>
+    <p>Opens the panel associated with the specified panel name.</p>
+    <h5><code>closePanel(panelName: string): void</code></h5>
+    <p>Closes the panel associated with the specified panel name.</p>
+    <h5><code>togglePanel(panelName: string): void</code></h5>
+    <p>Toggles the panel associated with the specified panel name.</p>
   </main>
   <script type="module" src="../kempo/components/Import.js"></script>

package/docs/components/card.html CHANGED Viewed

@@ -6,22 +6,82 @@
   <title>Card - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Card</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 />
+        <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>
+    </details>
     <p>A card is a "box" around some content with a border, padding and margins that make it stand out.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
-    <k-card>
-      This is a card
-    </k-card>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card>
+          This is a card
+        </k-card>
+      </div>
+    </div>
-    <h3>Labels</h3>
+    <h3 id="labels"><a href="#labels" class="no-link">Labels</a></h3>
     <p>A label gives some text in a box on the top border of the card, helping identify the purpose of the contents.</p>
-    <k-card label="I'm a Label">
-      This is a card
-    </k-card>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"I'm a Label"</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="I'm a Label">
+          This is a card
+        </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">Component</a></h6>
+    <h5>
+      <code>new Card()</code><br />
+      <code>new Card(<i>string</i> label)</code>
+    </h5>
+    <h4>Parameters</h4>
+    <h5><code>label<i>: string</i></code></h5>
+    <p>The label for the card.</p>
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./component.html">Component</a></li>
+    </ul>
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>label<i>: string</i></code></h5>
+    <p>The label for the card.</p>
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>setLabel(<i>string</i> label)<i>: void</i></code></h5>
+    <p>Sets the label for the card.</p>
   </main>
   <div style="height:33vh"></div>

package/docs/components/component.html CHANGED Viewed

@@ -6,6 +6,12 @@
   <title>Component - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/components/content-slider.html CHANGED Viewed

@@ -6,6 +6,12 @@
   <title>Content Slider - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
@@ -16,11 +22,13 @@
     >
       <summary class="p">Table of Contents</summary>
       <div class="m mt0 pl">
+        <h6>Examples</h6>
         <a href="#basicUsage">Basic Usage</a><br />
         <a href="#keyboardControls">Keyboard Controls</a><br />
         <a href="#globalControls">Global Controls</a><br />
         <a href="#controls">Controls</a><br />
         <a href="#loop">Loop</a><br />
+        <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
         <a href="#attributes">Attributes</a><br />

package/docs/components/dialog.html CHANGED Viewed

@@ -6,21 +6,46 @@
   <title>Dialog - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <main>
     <h1 class="ta-center">Dialog</h1>
-    <h5>Basic Dialog</h5>
-    <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 closed using the dialogs GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).</p>
+    <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="#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">"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>
-    <h5>Titles</h5>
+    <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>
@@ -34,7 +59,7 @@
       <p class="p">A hotdog is a sandwhich</p>
     </k-dialog>
-    <h5>Action Buttons</h5>
+    <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>
@@ -66,7 +91,7 @@
       <p class="p">Ranch is gross</p>
     </k-dialog>
-    <h3>JavaScript Usage</h3>
+    <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>
     <button id="d7" class="mb">Open Dialog</button>
@@ -87,7 +112,122 @@
       });
     </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/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';
+      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="./component.html">Component</a></h6>
+    <h5>
+      <code>new Dialog(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="./component.html">Component</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>closeBtn<i>: boolean</i></code></h5>
+    <p>Whether to show the close button.</p>
+    <h5><code>overlayClose<i>: boolean</i></code></h5>
+    <p>Whether clicking the overlay closes the dialog.</p>
+    <h5><code>confirmText<i>: string</i></code></h5>
+    <p>Text for the confirm button.</p>
+    <h5><code>confirmClasses<i>: string</i></code></h5>
+    <p>Classes for the confirm button.</p>
+    <h5><code>cancelText<i>: string</i></code></h5>
+    <p>Text for the cancel button.</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>
+    <h5><code>confirmAction<i>: function</i></code></h5>
+    <p>Action to perform on confirm.</p>
+    <h5><code>cancelAction<i>: function</i></code></h5>
+    <p>Action to perform on cancel.</p>
+    <h5><code>closeCallback<i>: function</i></code></h5>
+    <p>Callback to execute when the dialog is closed.</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.</p>
+    <h5><code>close()<i>: void</i></code></h5>
+    <p>Closes the dialog.</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.</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>create(contents, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a new dialog with the specified contents and options.</p>
+    <h6>Options</h6>
+    <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>
+    <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>
+    <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>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>
+    <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>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>
   </main>
   <div style="height:33vh"></div>

package/docs/components/directory-viewer.html CHANGED Viewed

@@ -6,17 +6,24 @@
   <title>Directory Viewer - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Directory Viewer</h1>
   <main>
-    <details
-      class="b r mb"
-    >
+    <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 />
+        <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
         <a href="#attributes">Attributes</a><br />
@@ -25,55 +32,59 @@
       </div>
     </details>
-    <h3>Description</h3>
-    <p>The directory viewer allows the user to select a directory from their local filesystem, and the component allows them to open/close subdirectories and select files.</p>
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <div class="row -mx">
-      <div class="col d-span-6 t-span-6 m-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-directory-viewer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-directory-viewer</span>&gt;</span></code></pre>
-      </div>
-      <div class="col d-span-6 t-span-6 m-span-12 px">
-        <k-directory-viewer id="dv"></k-directory-viewer>
-        <script type="module">
-          await window.customElements.whenDefined('k-directory-viewer');
-          document.getElementById('dv').addFilter(({kind})=>kind!='file');
-          document.getElementById('dv').addFilter(({name})=>!name.startsWith('.')&&!name.startsWith('_'));
-        </script>
-      </div>
-    </div>
+    <p>Create a directory viewer using the <code>k-directory-viewer</code> component. Load a directory by calling the <code>loadDirectory()</code> method.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-directory-viewer</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dv1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-directory-viewer</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> DirectoryViewer <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/DirectoryViewer.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'dv1'</span>).loadDirectory();<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-directory-viewer id="dv1"></k-directory-viewer>
+    <script type="module">
+      import DirectoryViewer from '/kempo/components/DirectoryViewer.js';
+      // document.getElementById('dv1').loadDirectory();
+    </script>
+    <h2 id="jsRef">JavaScript Reference</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">Component</a></h6>
     <h5>
-      <code>new DirectoryViewer()</code><br />
+      <code>new DirectoryViewer(handle)</code>
     </h5>
+    <h4>Parameters</h4>
+    <h5><code>handle<i>: FileSystemDirectoryHandle</i></code></h5>
+    <p>The handle to the directory.</p>
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="">class <code>LazyComponent</code></a></li>
-      <li><a href="">class <code>Component</code></a></li>
-      <li><a href="">class <code>Icon</code></a></li>
-      <li><a href="">util <code>element.js</code></a></li>
-      <li><a href="">util <code>watchDirectoryHandle.js</code></a></li>
+      <li><a href="./component.html">Component</a></li>
     </ul>
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>hasHandle<i>: boolean</i></code></h5>
+    <p>Whether the directory viewer has a handle.</p>
+    <h5><code>selected<i>: boolean</i></code></h5>
+    <p>Whether the directory viewer is selected.</p>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>handle<i>: FileSystemDirectoryHandle</i></code></h5>
+    <p>The handle to the directory.</p>
+    <h5><code>filters<i>: Array</i></code></h5>
+    <p>An array of filters applied to the directory viewer.</p>
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h5><code>async selectDirectory()<i>: undefined</i></code></h5>
-    <p>Opens the directory selection dialog. When a dialog is selected it will render the directory's contents.</p>
-    <h5><code>open()<i>: undefined</i></code></h5>
-    <p>Opens the directory, this should only be called on auto-generated sub-directories.</p>
-    <h5><code>close()<i>: undefined</i></code></h5>
-    <p>Closes the directory, this should only be called on auto-generated sub-directories.</p>
-    <h5><code>toggleOpen()<i>: undefined</i></code></h5>
-    <p>Opens/Closes the directory, this should only be called on auto-generated sub-directories.</p>
-    <h5><code>clearDirectoryHandle()<i>: undefined</i></code></h5>
-    <p>Clears the handle that represents the user selected directory, allowing the user to choose a new directory.</p>
+    <h5><code>loadDirectory()<i>: Promise</i></code></h5>
+    <p>Loads a directory using the file picker API.</p>
+    <h5><code>clearDirectoryHandle()<i>: void</i></code></h5>
+    <p>Clears the directory handle.</p>
+    <h5><code>updateContents()<i>: void</i></code></h5>
+    <p>Updates the contents of the directory viewer.</p>
+    <h5><code>select()<i>: void</i></code></h5>
+    <p>Selects the directory viewer.</p>
+    <h5><code>addFilter(filter)<i>: void</i></code></h5>
+    <p>Adds a filter to the directory viewer.</p>
   </main>
-  <script type="module" src="../kempo/components/Import.js"></script>
-  <script type="module" src="../kempo/components/DirectoryViewer.js"></script>
+  <div style="height:33vh"></div>
+  <script type="module" src="../kempo/components/Import.js"></script>
+  <script type="module" src="../kempo/components/DirectoryViewer.js"></script>
 </body>
 </html>