kempo 2.9.2 → 2.10.0

package/docs/search.json

@@ -10,20 +10,18 @@
       "header"
     ]
   },
-  "/components/component.html": {
-    "name": "Components > Component",
+  "/components/card.html": {
+    "name": "Components > Card",
     "terms": [
-      "component",
-      "base",
-      "root",
-      "framework",
-      "parent"
+      "card",
+      "box",
+      "content",
+      "panel"
     ]
   },
-  "/components/lazy-component.html": {
-    "name": "Components > LazyComponent",
+  "/components/component.html": {
+    "name": "Components > Component",
     "terms": [
-      "lazy",
       "component",
       "base",
       "root",
@@ -39,16 +37,86 @@
       "photos"
     ]
   },
-  "/components/directoryviewer.html": {
+  "/components/dialog.html": {
+    "name": "Components > Dialog",
+    "terms": [
+      "dialog",
+      "modal",
+      "popup",
+      "overlay",
+      "window"
+    ]
+  },
+  "/components/directory-viewer.html": {
     "name": "Components > DirectoryViewer",
     "terms": [
       "directory",
-      "viewer", 
+      "viewer",
       "pwa",
       "folder",
       "file"
     ]
   },
+  "/components/focus-capture.html": {
+    "name": "Components > FocusCapture",
+    "terms": [
+      "focus",
+      "capture",
+      "trap",
+      "keyboard",
+      "navigation"
+    ]
+  },
+  "/components/icon.html": {
+    "name": "Components > Icon",
+    "terms": [
+      "icon",
+      "symbol",
+      "image",
+      "graphic"
+    ]
+  },
+  "/components/import.html": {
+    "name": "Components > Import",
+    "terms": [
+      "import",
+      "html",
+      "snippet",
+      "include"
+    ]
+  },
+  "/components/lazy-component.html": {
+    "name": "Components > LazyComponent",
+    "terms": [
+      "lazy",
+      "component",
+      "base",
+      "root",
+      "framework",
+      "parent"
+    ]
+  },
+  "/components/reactive-component.html": {
+    "name": "Components > ReactiveComponent",
+    "terms": [
+      "reactive",
+      "component",
+      "dynamic",
+      "update",
+      "render"
+    ]
+  },
+  "/components/reactive-lazy-component.html": {
+    "name": "Components > ReactiveLazyComponent",
+    "terms": [
+      "reactive",
+      "lazy",
+      "component",
+      "dynamic",
+      "update",
+      "render"
+    ]
+  },
   "/components/resize.html": {
     "name": "Components > Resize",
     "terms": [
@@ -59,6 +127,36 @@
       "height"
     ]
   },
+  "/components/search.html": {
+    "name": "Components > Search",
+    "terms": [
+      "search",
+      "find",
+      "query",
+      "input",
+      "results"
+    ]
+  },
+  "/components/show-more.html": {
+    "name": "Components > ShowMore",
+    "terms": [
+      "show more",
+      "expand",
+      "collapse",
+      "toggle",
+      "content"
+    ]
+  },
+  "/components/side-menu.html": {
+    "name": "Components > SideMenu",
+    "terms": [
+      "side menu",
+      "navigation",
+      "drawer",
+      "slide",
+      "menu"
+    ]
+  },
   "/components/split.html": {
     "name": "Components > Split",
     "terms": [
@@ -68,17 +166,6 @@
       "content"
     ]
   },
-  "/components/stacks.html": {
-    "name": "Components > Stacks",
-    "terms": [
-      "component",
-      "stacks",
-      "content",
-      "layout",
-      "collapsible",
-      "panel"
-    ]
-  },
   "/components/table.html": {
     "name": "Components > Table",
     "terms": [
@@ -98,6 +185,46 @@
       "content"
     ]
   },
+  "/components/tags.html": {
+    "name": "Components > Tags",
+    "terms": [
+      "tags",
+      "labels",
+      "input",
+      "add",
+      "remove"
+    ]
+  },
+  "/components/theme-switcher.html": {
+    "name": "Components > ThemeSwitcher",
+    "terms": [
+      "theme",
+      "switcher",
+      "toggle",
+      "dark mode",
+      "light mode"
+    ]
+  },
+  "/components/timestamp.html": {
+    "name": "Components > Timestamp",
+    "terms": [
+      "timestamp",
+      "date",
+      "time",
+      "format",
+      "locale"
+    ]
+  },
+  "/components/toggle.html": {
+    "name": "Components > Toggle",
+    "terms": [
+      "toggle",
+      "switch",
+      "on",
+      "off",
+      "button"
+    ]
+  },
   "/styles/borders-spacing.html": {
     "name": "Styles > Borders and Spacing",
     "terms": [
@@ -109,6 +236,32 @@
       "radius"
     ]
   },
+  "/styles/buttons.html": {
+    "name": "Styles > Buttons",
+    "terms": [
+      "styles",
+      "buttons",
+      "button",
+      "input",
+      "submit",
+      "reset",
+      "link"
+    ]
+  },
+  "/styles/colors.html": {
+    "name": "Styles > Colors",
+    "terms": [
+      "styles",
+      "colors",
+      "background",
+      "text",
+      "primary",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ]
+  },
   "/styles/displays-layouts.html": {
     "name": "Styles > Displays and Layout",
     "terms": [
@@ -124,6 +277,29 @@
       "columns"
     ]
   },
+  "/styles/inputs.html": {
+    "name": "Styles > Inputs",
+    "terms": [
+      "styles",
+      "inputs",
+      "input",
+      "textarea",
+      "select",
+      "checkbox",
+      "radio"
+    ]
+  },
+  "/styles/tables.html": {
+    "name": "Styles > Tables",
+    "terms": [
+      "styles",
+      "tables",
+      "table",
+      "rows",
+      "columns",
+      "data"
+    ]
+  },
   "/styles/typography.html": {
     "name": "Styles > Typography",
     "terms": [
@@ -138,5 +314,87 @@
       "sup",
       "sub"
     ]
+  },
+  "/utils/clie.html": {
+    "name": "Styles > Typography",
+    "terms": [
+      "command",
+      "line",
+      "interface",
+      "cli",
+      "node",
+      "terminal",
+      "script",
+      "util"
+    ]
+  },
+  "/utils/cookie.html": {
+    "name": "Utils > Cookie",
+    "terms": [
+      "cookie",
+      "cookies",
+      "save",
+      "get",
+      "delete",
+      "browser",
+      "storage",
+      "util"
+    ]
+  },
+  "/utils/debounce.html": {
+    "name": "Utils > Debounce",
+    "terms": [
+      "debounce",
+      "delay",
+      "throttle",
+      "function",
+      "timeout",
+      "wait",
+      "util"
+    ]
+  },
+  "/utils/drag.html": {
+    "name": "Utils > Drag",
+    "terms": [
+      "drag",
+      "draggable",
+      "move",
+      "mouse",
+      "event",
+      "callback",
+      "util"
+    ]
+  },
+  "/utils/element.html": {
+    "name": "Utils > Element",
+    "terms": [
+      "element",
+      "dom",
+      "event",
+      "visibility",
+      "property",
+      "focus",
+      "util"
+    ]
+  },
+  "/utils/format-timestamp.html": {
+    "name": "Utils > Format Timestamp",
+    "terms": [
+      "format",
+      "timestamp",
+      "date",
+      "time",
+      "util"
+    ]
+  },
+  "/utils/fuzzy-match.html": {
+    "name": "Utils > Fuzzy Match",
+    "terms": [
+      "fuzzy",
+      "match",
+      "string",
+      "comparison",
+      "util"
+    ]
   }
 }

package/docs/styles/_template.html

@@ -6,6 +6,12 @@
   <title>Template - 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/styles/borders-spacing.html

@@ -6,6 +6,12 @@
   <title>Borders and Spacing - Kempo - 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/styles/buttons.html

@@ -6,6 +6,12 @@
   <title>Buttons - 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/styles/colors.html

@@ -6,6 +6,12 @@
   <title>Colors - 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/styles/displays-layouts.html

@@ -6,6 +6,12 @@
   <title>Displays and Layouts - Kempo - 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/styles/embed-1.html

@@ -5,6 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Template - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.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>
   <style>
     body {
       overflow: auto;

package/docs/styles/inputs.html

@@ -6,6 +6,12 @@
   <title>Inputs - 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/styles/tables.html

@@ -6,6 +6,12 @@
   <title>Table - 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/styles/typography.html

@@ -5,6 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Typography - Kempo - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.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/stacks.html → utils/_template.html}

@@ -3,20 +3,29 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Stacks - Components - Kempo Docs - A Web Components Solution</title>
+  <title>Template - Utils - 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">Stacks</h1>
+  <h1 class="ta-center">Template</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 />
@@ -29,33 +38,6 @@
     <p>description</p>
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <k-stacks
-      style="
-        height: 20rem;
-      "
-    >
-      <k-stack-panel
-        class="b r"
-        stack="1"
-        style="background: #633"
-      >
-        <p>Panel 1</p>
-      </k-stack-panel>
-      <k-stack-panel
-        class="b r"
-        stack="1"
-        style="background: #363;"
-      >
-        <p>Panel 2</p>
-      </k-stack-panel>
-      <k-stack-panel
-        class="b r"
-        stack="1"
-        style="background: #336;"
-      >
-        <p>Panel 3</p>
-      </k-stack-panel>
-    </k-stacks>
 
     <h2 id="jsRef">JavaScript Refrerence</h2>
 
@@ -89,6 +71,5 @@
     
   </main>
   <script type="module" src="../kempo/components/Import.js"></script> 
-  <script type="module" src="../kempo/components/Stacks.js"></script>
 </body>
 </html>

package/docs/utils/cli.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CLI - Utils - 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">CLI</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="#getArgs">getArgs</a><br />
+        <a href="#runChildProcess">runChildProcess</a><br />
+        <a href="#runChildNodeProcess">runChildNodeProcess</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>The CLI utility provides command-line interface functionalities for Kempo.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <pre><code class="language-js">import { getArgs, runChildProcess, runChildNodeProcess } from '../src/utils/cli.js';
+
+const args = getArgs();
+console.log(args);
+
+runChildProcess('echo Hello World').then(console.log).catch(console.error);
+
+runChildNodeProcess('path/to/script.js', { debug: true }).then(console.log).catch(console.error);</code></pre>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="getArgs"><a href="#getArgs" class="no-link">getArgs</a></h3>
+    <h5>
+      <code>getArgs(<i>shortMap</i> config)</code>
+    </h5>
+    <h4>Parameters</h4>
+    <h5><code>shortMap<i>: object</i></code></h5>
+    <p>Mapping of short argument names to long argument names.</p>
+    <h4>Returns</h4>
+    <p>An object containing the parsed arguments.</p>
+
+    <h3 id="runChildProcess"><a href="#runChildProcess" class="no-link">runChildProcess</a></h3>
+    <h5>
+      <code>runChildProcess(<i>command</i> string)</code>
+    </h5>
+    <h4>Parameters</h4>
+    <h5><code>command<i>: string</i></code></h5>
+    <p>The command to run in the child process.</p>
+    <h4>Returns</h4>
+    <p>A promise that resolves when the child process exits successfully, and rejects if it exits with an error.</p>
+
+    <h3 id="runChildNodeProcess"><a href="#runChildNodeProcess" class="no-link">runChildNodeProcess</a></h3>
+    <h5>
+      <code>runChildNodeProcess(<i>scriptPath</i> string, <i>argsObj</i> object)</code>
+    </h5>
+    <h4>Parameters</h4>
+    <h5><code>scriptPath<i>: string</i></code></h5>
+    <p>The path to the Node.js script to run.</p>
+    <h5><code>argsObj<i>: object</i></code></h5>
+    <p>An object containing the arguments to pass to the script.</p>
+    <h4>Returns</h4>
+    <p>A promise that resolves when the child process exits successfully, and rejects if it exits with an error.</p>
+    
+  </main>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+</body>
+</html>