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

kempo-ui 0.0.2 → 0.0.3

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

package/.github/copilot-instructions.md +149 -149
package/.github/workflows/publish-npm.yml +44 -44
package/CONTRIBUTING.md +149 -149
package/README.md +0 -0
package/dist/kempo-vars.css +0 -0
package/dist/src/components/FocusCapture.js +7 -0
package/dist/src/components/Icon.js +10 -0
package/dist/src/components/Import.js +1 -0
package/dist/src/components/ShadowComponent.js +1 -0
package/dist/src/components/SideMenu.js +97 -0
package/dist/src/lit-all.min.js +120 -0
package/docs/components/accordion.html +122 -0
package/docs/components/card.html +91 -0
package/docs/components/component.html +90 -0
package/docs/components/content-slider.html +193 -0
package/docs/components/dialog.html +245 -0
package/docs/components/directory-viewer.html +90 -0
package/docs/components/focus-capture.html +68 -0
package/docs/components/icon.html +161 -0
package/docs/components/import.html +78 -0
package/docs/components/lazy-component.html +84 -0
package/docs/components/reactive-component.html +69 -0
package/docs/components/reactive-lazy-component.html +69 -0
package/docs/components/resize.html +152 -0
package/docs/components/search.html +102 -0
package/docs/components/show-more.html +123 -0
package/docs/components/side-menu.html +168 -0
package/docs/components/sortable.html +96 -0
package/docs/components/split.html +126 -0
package/docs/components/table.html +312 -0
package/docs/components/tableControls.html +77 -0
package/docs/components/tableCustomFields.html +113 -0
package/docs/components/tableFetchRecords.html +114 -0
package/docs/components/tableFieldSortHide.html +75 -0
package/docs/components/tablePagination.html +100 -0
package/docs/components/tableRecordEditing.html +144 -0
package/docs/components/tableRecordFiltering.html +75 -0
package/docs/components/tableRecordHiding.html +80 -0
package/docs/components/tableRecordSearching.html +75 -0
package/docs/components/tableRecordSelection.html +75 -0
package/docs/components/tableRowControls.html +78 -0
package/docs/components/tableSorting.html +73 -0
package/docs/components/tabs.html +163 -0
package/docs/components/tags.html +94 -0
package/docs/components/theme-switcher.html +129 -0
package/docs/components/timestamp.html +86 -0
package/docs/components/toast.html +328 -0
package/docs/components/toggle.html +155 -0
package/docs/dev.config.json +20 -0
package/docs/icons/add.svg +1 -0
package/docs/icons/arrow-back.svg +1 -0
package/docs/icons/arrow-down-double.svg +1 -0
package/docs/icons/arrow-down.svg +1 -0
package/docs/icons/arrow-forward.svg +1 -0
package/docs/icons/arrow-up-double.svg +1 -0
package/docs/icons/arrow-up.svg +1 -0
package/docs/icons/cards.svg +1 -0
package/docs/icons/check.svg +1 -0
package/docs/icons/chevron-left.svg +1 -0
package/docs/icons/chevron-right.svg +1 -0
package/docs/icons/close.svg +2 -0
package/docs/icons/compare.svg +1 -0
package/docs/icons/delete.svg +1 -0
package/docs/icons/drag-handle.svg +1 -0
package/docs/icons/drawing2.svg +124 -0
package/docs/icons/edit.svg +1 -0
package/docs/icons/error.svg +1 -0
package/docs/icons/export-file.svg +1 -0
package/docs/icons/file-text.svg +1 -0
package/docs/icons/file.svg +1 -0
package/docs/icons/filter-off.svg +1 -0
package/docs/icons/filter.svg +1 -0
package/docs/icons/first.svg +1 -0
package/docs/icons/folder-clear.svg +1 -0
package/docs/icons/folder-create.svg +1 -0
package/docs/icons/folder-open.svg +1 -0
package/docs/icons/folder.svg +1 -0
package/docs/icons/hide.svg +1 -0
package/docs/icons/image.svg +1 -0
package/docs/icons/label-add.svg +1 -0
package/docs/icons/label.svg +1 -0
package/docs/icons/last.svg +1 -0
package/docs/icons/menu.svg +1 -0
package/docs/icons/mode-auto.svg +1 -0
package/docs/icons/mode-dark.svg +1 -0
package/docs/icons/mode-light.svg +1 -0
package/docs/icons/open-in-browser.svg +1 -0
package/docs/icons/pause.svg +1 -0
package/docs/icons/play.svg +1 -0
package/docs/icons/refresh.svg +1 -0
package/docs/icons/remove.svg +1 -0
package/docs/icons/save.svg +1 -0
package/docs/icons/search.svg +1 -0
package/docs/icons/settings.svg +1 -0
package/docs/icons/show.svg +1 -0
package/docs/icons/storage.svg +1 -0
package/docs/icons/table-visibility.svg +1 -0
package/docs/icons/tag.svg +1 -0
package/docs/icons/tools.svg +1 -0
package/docs/icons/trash-x.svg +1 -0
package/docs/icons/warning.svg +1 -0
package/docs/index.html +28 -21
package/docs/nav.inc.html +73 -0
package/docs/nav.inc.js +4 -0
package/{config/production.json → docs/prod.config.json} +20 -16
package/docs/src/components/FocusCapture.js +7 -0
package/docs/src/components/HybridComponent.js +1 -0
package/docs/src/components/Icon.js +10 -0
package/docs/src/components/Import.js +1 -0
package/docs/src/components/LightComponent.js +1 -0
package/docs/src/components/ShadowComponent.js +1 -0
package/docs/src/components/SideMenu.js +97 -0
package/docs/src/lit-all.min.js +120 -0
package/docs/src/utils/cli.js +1 -0
package/docs/src/utils/fs-utils.js +1 -0
package/docs/styles.css +6 -0
package/icons/add.svg +1 -0
package/icons/arrow-back.svg +1 -0
package/icons/arrow-down-double.svg +1 -0
package/icons/arrow-down.svg +1 -0
package/icons/arrow-forward.svg +1 -0
package/icons/arrow-up-double.svg +1 -0
package/icons/arrow-up.svg +1 -0
package/icons/cards.svg +1 -0
package/icons/check.svg +1 -0
package/icons/chevron-left.svg +1 -0
package/icons/chevron-right.svg +1 -0
package/icons/close.svg +2 -0
package/icons/compare.svg +1 -0
package/icons/delete.svg +1 -0
package/icons/drag-handle.svg +1 -0
package/icons/drawing2.svg +124 -0
package/icons/edit.svg +1 -0
package/icons/error.svg +1 -0
package/icons/export-file.svg +1 -0
package/icons/file-text.svg +1 -0
package/icons/file.svg +1 -0
package/icons/filter-off.svg +1 -0
package/icons/filter.svg +1 -0
package/icons/first.svg +1 -0
package/icons/folder-clear.svg +1 -0
package/icons/folder-create.svg +1 -0
package/icons/folder-open.svg +1 -0
package/icons/folder.svg +1 -0
package/icons/hide.svg +1 -0
package/icons/image.svg +1 -0
package/icons/label-add.svg +1 -0
package/icons/label.svg +1 -0
package/icons/last.svg +1 -0
package/icons/menu.svg +1 -0
package/icons/mode-auto.svg +1 -0
package/icons/mode-dark.svg +1 -0
package/icons/mode-light.svg +1 -0
package/icons/open-in-browser.svg +1 -0
package/icons/pause.svg +1 -0
package/icons/play.svg +1 -0
package/icons/refresh.svg +1 -0
package/icons/remove.svg +1 -0
package/icons/save.svg +1 -0
package/icons/search.svg +1 -0
package/icons/settings.svg +1 -0
package/icons/show.svg +1 -0
package/icons/storage.svg +1 -0
package/icons/table-visibility.svg +1 -0
package/icons/tag.svg +1 -0
package/icons/tools.svg +1 -0
package/icons/trash-x.svg +1 -0
package/icons/warning.svg +1 -0
package/package.json +2 -2
package/scripts/build.js +109 -138
package/scripts/docs.js +60 -60
package/src/components/Card.js +66 -0
package/src/components/FocusCapture.js +23 -0
package/src/components/HybridComponent.js +40 -40
package/src/components/Icon.js +155 -0
package/src/components/Import.js +104 -0
package/src/components/LightComponent.js +32 -32
package/src/components/ShadowComponent.js +30 -17
package/src/components/SideMenu.js +167 -0
package/src/components/ThemeSwitcher.js +108 -0
package/src/kempo-hljs.css +146 -0
package/src/utils/cli.js +43 -43
package/src/utils/fs-utils.js +41 -41
package/src/utils/propConverters.js +11 -0
package/tests/HybridComponent.browser-test.js +214 -214
package/tests/LightComponent.browser-test.js +169 -169
package/tests/ShadowComponent.browser-test.js +130 -130
package/config/development.json +0 -14
package/docs/components/ShadowComponent.js +0 -1
/package/{docs → dist/src}/components/HybridComponent.js +0 -0
/package/{docs → dist/src}/components/LightComponent.js +0 -0
/package/{docs → dist/src}/utils/cli.js +0 -0
/package/{docs → dist/src}/utils/fs-utils.js +0 -0

package/docs/components/toast.html ADDED Viewed

@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toast - 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 Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Toast</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="#positions">Different Positions</a><br />
+        <a href="#timeouts">Timeouts</a><br />
+        <a href="#actionAndClose">Action and Close Buttons</a><br />
+        <h6 class="mt">JavaScript Reference</h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#staticMethods">Static Methods</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="#toastContainer">ToastContainer</a><br />
+      </div>
+    </details>
+    <h3>Description</h3>
+    <p>The Toast component provides a way to display short-lived notifications to users. Toasts appear in a corner of the screen, can be configured with different positions, and can optionally include action and close buttons. Toasts can be set to automatically close after a specified timeout or remain until manually dismissed.</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">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span>Open Toast<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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <button id="example1" class="mb">Open Toast</button>
+        <script type="module">
+          import Toast from '/kempo/components/Toast.js';
+          document.getElementById('example1').addEventListener('click', () => {
+            Toast.create("Hello World");
+          });
+        </script>
+      </div>
+    </div>
+    <h3 id="positions"><a href="#positions" class="no-link">Different Positions</a></h3>
+    <p>Toasts can be positioned in different corners of the screen using the <code>position</code> property.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+      </div>
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <button id="example2-topleft" class="mb">Top Left</button>
+        <button id="example2-topcenter" class="mb">Top Center</button>
+        <button id="example2-topright" class="mb">Top Right</button><br />
+        <button id="example2-bottomleft" class="mb">Bottom Left</button>
+        <button id="example2-bottomcenter" class="mb">Bottom Center</button>
+        <button id="example2-bottomright" class="mb">Bottom Right</button>
+        <script type="module">
+          import Toast from '/kempo/components/Toast.js';
+          document.getElementById('example2-topleft').addEventListener('click', () => {
+            Toast.create("Hello Top Left", {
+              position: "top left"
+            });
+          });
+          document.getElementById('example2-topcenter').addEventListener('click', () => {
+            Toast.create("Hello Top Center", {
+              position: "top center"
+            });
+          });
+          document.getElementById('example2-topright').addEventListener('click', () => {
+            Toast.create("Hello Top Right", {
+              position: "top right"
+            });
+          });
+          document.getElementById('example2-bottomleft').addEventListener('click', () => {
+            Toast.create("Hello Bottom Left", {
+              position: "bottom left"
+            });
+          });
+          document.getElementById('example2-bottomcenter').addEventListener('click', () => {
+            Toast.create("Hello Bottom Center", {
+              position: "bottom center"
+            });
+          });
+          document.getElementById('example2-bottomright').addEventListener('click', () => {
+            Toast.create("Hello Bottom Right", {
+              position: "bottom right"
+            });
+          });
+        </script>
+      </div>
+    </div>
+    <h3 id="timeouts"><a href="#timeouts" class="no-link">Timeouts</a></h3>
+    <p>Toasts can automatically close after a specified timeout (in milliseconds). The default timeout when using <code>Toast.create</code> is <code>5000</code> (ms), or 5 seconds.</p>
+    <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">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-1"</span>&gt;</span>Open 1 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-3"</span>&gt;</span>Open 3 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-10"</span>&gt;</span>Open 10 Second Timeout Toast<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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"I will timeout in 1 second"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">1000</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-3'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"I will timeout in 3 second"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-10'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"I will timeout in 10 second"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</span><br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <button id="example3-1" class="mb">Open 1 Second Timeout Toast</button>
+        <button id="example3-3" class="mb">Open 3 Second Timeout Toast</button>
+        <button id="example3-10" class="mb">Open 10 Second Timeout Toast</button>
+        <script type="module">
+          import Toast from '/kempo/components/Toast.js';
+          document.getElementById('example3-1').addEventListener('click', () => {
+            Toast.create("I will timeout in 1 second", {
+              timeout: 1000
+            });
+          });
+          document.getElementById('example3-3').addEventListener('click', () => {
+            Toast.create("I will timeout in 3 second", {
+              timeout: 3000
+            });
+          });
+          document.getElementById('example3-10').addEventListener('click', () => {
+            Toast.create("I will timeout in 10 second", {
+              timeout: 10000
+            });
+          });
+        </script>
+      </div>
+    </div>
+    <h3 id="actionAndClose"><a href="#actionAndClose" class="no-link">Action and Close Buttons</a></h3>
+    <p>Toasts can have action and close buttons that trigger callbacks when clicked.</p>
+    <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">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action"</span>&gt;</span>Open Toast with Action<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-close"</span>&gt;</span>Open Toast with Close Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action-close"</span>&gt;</span>Open Toast with Action and Close Button<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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br />      <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br />      <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br />      }<br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br />      <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br />      <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br />      }<br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br />      <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br />      <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br />        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">// return false to prevent closing</span><br />      },<br />      <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br />      <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br />      }<br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <button id="example4-action" class="mb">Open Toast with Action</button>
+        <button id="example4-close" class="mb">Open Toast with Close Button</button>
+        <button id="example4-action-close" class="mb">Open Toast with Action and Close Button</button>
+        <script type="module">
+          import Toast from '/kempo/components/Toast.js';
+          document.getElementById('example4-action').addEventListener('click', () => {
+            Toast.create("Hello World", {
+              timeout: 0,
+              action: 'Click Me',
+              actionCallback: () => {
+                Toast.create("You clicked the action");
+              }
+            });
+          });
+          document.getElementById('example4-close').addEventListener('click', () => {
+            Toast.create("Hello World", {
+              timeout: 0,
+              close: '<k-icon name="close"></div>',
+              closeCallback: () => {
+                Toast.create("You closed the toast");
+              }
+            });
+          });
+          document.getElementById('example4-action-close').addEventListener('click', () => {
+            Toast.create("Hello World", {
+              timeout: 0,
+              action: 'Click Me',
+              actionCallback: () => {
+                Toast.create("You clicked the action");
+                return false; // return false to prevent closing
+              },
+              close: '<k-icon name="close"></div>',
+              closeCallback: () => {
+                Toast.create("You closed the toast");
+              }
+            });
+          });
+        </script>
+      </div>
+    </div>
+    <h3 id="successWarningError"><a href="#successWarningError" class="no-link">Success, Warning and Error</a></h3>
+    <p>Toasts can be created as a success, warning or error message.</p>
+    <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">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-success"</span>&gt;</span>Success Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-warning"</span>&gt;</span>Warning Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-error"</span>&gt;</span>Error Toast<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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-success'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.success(<span class="hljs-string">"It Worked!"</span>);<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-warning'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.warning(<span class="hljs-string">"Be Careful"</span>);<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-error'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.error(<span class="hljs-string">"That's a very bad idea"</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <button id="example5-success" class="mb">Success Toast</button>
+        <button id="example5-warning" class="mb">Warning Toast</button>
+        <button id="example5-error" class="mb">Error Toast</button>
+        <script type="module">
+          import Toast from '/kempo/components/Toast.js';
+          document.getElementById('example5-success').addEventListener('click', () => {
+            Toast.success("It Worked!");
+          });
+          document.getElementById('example5-warning').addEventListener('click', () => {
+            Toast.warning("Be Careful");
+          });
+          document.getElementById('example5-error').addEventListener('click', () => {
+            Toast.error("That's a very bad idea");
+          });
+        </script>
+      </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 Toast()</code><br />
+      <code>new Toast(<i>object</i> options)</code>
+    </h5>
+    <h4>Parameters</h4>
+    <h5><code>options<i>: object</i></code></h5>
+    <p>An object with the following optional properties:</p>
+    <ul>
+      <li><code>actionCallback<i>: function</i></code> - Function to call when the action button is clicked. If this function returns <code>false</code>, the toast will not close.</li>
+      <li><code>actionHtml<i>: string</i></code> - HTML content for the action button.</li>
+      <li><code>closeCallback<i>: function</i></code> - Function to call when the toast is closed.</li>
+      <li><code>closeHtml<i>: string</i></code> - HTML content for the close button.</li>
+      <li><code>timeout<i>: number</i></code> - Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close).</li>
+    </ul>
+    <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <h5><code>Toast.create(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays a new toast with the specified message and options. Returns the created Toast instance.</p>
+    <p>Options include:</p>
+    <ul>
+      <li><code>position<i>: string</i></code> - Position of the toast on the screen. Default is 'auto', which uses 'bottom center' on mobile and 'top right' on desktop. Valid positions are: 'top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'.</li>
+      <li><code>removeOnClose<i>: boolean</i></code> - If true, the toast element will be removed from the DOM when closed. Default is true.</li>
+      <li><code>timeout<i>: number</i></code> - Time in milliseconds before the toast automatically closes. Default is 5000ms (5 seconds).</li>
+      <li><code>action<i>: string | HTMLElement</i></code> - Text or HTML element to use for the action button.</li>
+      <li><code>actionCallback<i>: function</i></code> - Function to call when the action button is clicked. If this function returns <code>false</code>, the toast will not close.</li>
+      <li><code>close<i>: string | HTMLElement</i></code> - Text or HTML element to use for the close button.</li>
+      <li><code>closeCallback<i>: function</i></code> - Function to call when the toast is closed.</li>
+      <li><code>icon<i>: string | HTMLElement</i></code> - Text or HTML element to use as an icon in the toast.</li>
+    </ul>
+    <h5><code>Toast.success(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays a success toast with a check icon and applies a success background style. Accepts the same options as <code>Toast.create()</code>.</p>
+    <h5><code>Toast.warning(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays a warning toast with a warning icon and applies a warning background style. Accepts the same options as <code>Toast.create()</code>.</p>
+    <h5><code>Toast.error(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays an error toast with an error icon and applies a danger background style. Accepts the same options as <code>Toast.create()</code>.</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>action-html<i>: string</i></code></h5>
+    <p>HTML content for the action button.</p>
+    <h5><code>close-html<i>: string</i></code></h5>
+    <p>HTML content for the close button.</p>
+    <h5><code>timeout<i>: number</i></code></h5>
+    <p>Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close).</p>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the toast is currently open. Default is false.</p>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>actionCallback<i>: function</i></code></h5>
+    <p>Function to call when the action button is clicked.</p>
+    <h5><code>closeCallback<i>: function</i></code></h5>
+    <p>Function to call when the toast is closed.</p>
+    <h5><code>actionHtml<i>: string</i></code></h5>
+    <p>HTML content for the action button.</p>
+    <h5><code>closeHtml<i>: string</i></code></h5>
+    <p>HTML content for the close button.</p>
+    <h5><code>timeout<i>: number</i></code></h5>
+    <p>Time in milliseconds before the toast automatically closes.</p>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the toast is currently open.</p>
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>open()<i>: void</i></code></h5>
+    <p>Opens the toast. If a timeout is specified, this starts the timer for automatic closing.</p>
+    <h5><code>close()<i>: void</i></code></h5>
+    <p>Closes the toast and calls the <code>closeCallback</code> if provided.</p>
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>open</code></h5>
+    <p>Fired when the toast is opened.</p>
+    <h5><code>close</code></h5>
+    <p>Fired when the toast is closed.</p>
+    <h5><code>openchange</code></h5>
+    <p>Fired when the toast open state changes (both when opening and closing).</p>
+    <h3 id="toastContainer"><a href="#toastContainer" class="no-link">ToastContainer</a></h3>
+    <p>The <code>ToastContainer</code> is an internal component used to position and display toasts. It is automatically created when <code>Toast.create()</code> is called, but can also be used directly.</p>
+    <h5><code>new ToastContainer(position)</code></h5>
+    <p>Creates a new toast container at the specified position.</p>
+    <h5><code>position<i>: string</i></code></h5>
+    <p>The position of the container on the screen. Valid values are: 'top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'.</p>
+  </main>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/toggle.html ADDED Viewed

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toggle - 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 Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Toggle</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="#onByDefault">On By Default</a><br />
+        <a href="#customStyles">Custom Styles</a><br />
+        <a href="#javascriptUsage">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 />
+      </div>
+    </details>
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle>Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+    <h3 id="onByDefault"><a href="#onByDefault" class="no-link">On By Default</a></h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle value="true">Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+    <h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"<br />    --switch_height: 3rem;<br />    --switch_width: 5rem;<br />    --switch_border: none;<br />    --switch_background__off: var(--c_danger);<br />    --switch_background__on: var(--c_success);<br />    --handle_size__off: 2rem;<br />    --handle_size__on: calc(3rem - 2px);<br />    --handle_border: none;<br />    --handle_background__off: #ddd;<br />    --handle_background__on: white;<br />  "</span><br />&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle
+            style="
+              --switch_height: 3rem;
+              --switch_width: 5rem;
+              --switch_border: none;
+              --switch_background__off: var(--c_danger);
+              --switch_background__on: var(--c_success);
+              --handle_size__off: 2rem;
+              --handle_size__on: calc(3rem - 2px);
+              --handle_border: none;
+              --handle_background__off: #ddd;
+              --handle_background__on: white;
+            "
+          >Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+    <h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tog1"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOn"</span>&gt;</span>Turn On<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOff"</span>&gt;</span>Turn Off<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle"</span>&gt;</span>Toggle<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>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">const</span> $tog1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'tog1'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOn'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.on();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOff'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.off();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'toggle'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.toggle();<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle id="tog1">Toggle Me</k-toggle>
+          <button id="turnOn">Turn On</button>
+          <button id="turnOff">Turn Off</button>
+          <button id="toggle">Toggle</button>
+          <script>
+            const $tog1 = document.getElementById('tog1');
+            document.getElementById('turnOn').addEventListener('click', ()=>{
+              $tog1.on();
+            });
+            document.getElementById('turnOff').addEventListener('click', ()=>{
+              $tog1.off();
+            });
+            document.getElementById('toggle').addEventListener('click', ()=>{
+              $tog1.toggle();
+            });
+          </script>
+        </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 Toggle()</code>
+    </h5>
+    <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>value<i>: boolean</i></code></h5>
+    <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>.</p>
+    <p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>on()<i>: this</i></code></h5>
+    <p>Set's the <code>value</code> to <code>true</code>, dispatches a <code><i>change</i></code> and an <code><i>on</i></code> event. The switch visual changes to the <b>on</b> state.</p>
+    <h5><code>off()<i>: this</i></code></h5>
+    <p>Set's the <code>value</code> to <code>false</code>, dispatches a <code><i>change</i></code> and an <code><i>off</i></code> event. The switch visual changes to the <b>off</b> state.</p>
+    <h5><code>toggle()<i>: this</i></code></h5>
+    <p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Toggle.js"></script>
+</body>
+</html>

package/docs/dev.config.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "customRoutes": {
+    "/": "./index.html",
+    "/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css",
+    "/kempo-vars.css": "../src/kempo-vars.css",
+    "/kempo-hljs.css": "../src/kempo-hljs.css",
+    "/icons/**": "../icons/**",
+    "/src/**": "../src/**"
+  },
+  "mimeTypes": {
+    ".js": "application/javascript",
+    ".mjs": "application/javascript"
+  },
+  "middleware": {
+    "logging": {
+      "enabled": true,
+      "includeResponseTime": true
+    }
+  }
+}

package/docs/icons/add.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>

package/docs/icons/arrow-back.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>

package/docs/icons/arrow-down-double.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

package/docs/icons/arrow-down.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z"/></svg>

package/docs/icons/arrow-forward.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>

package/docs/icons/arrow-up-double.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg>

package/docs/icons/arrow-up.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/></svg>

package/docs/icons/cards.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-500v-220h220v220H240Zm0 260v-220h220v220H240Zm260-260v-220h220v220H500Zm0 260v-220h220v220H500ZM320-580h60v-60h-60v60Zm260 0h60v-60h-60v60ZM320-320h60v-60h-60v60Zm260 0h60v-60h-60v60ZM380-580Zm200 0Zm0 200Zm-200 0ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z"/></svg>

package/docs/icons/check.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>

package/docs/icons/chevron-left.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>

package/docs/icons/chevron-right.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>

package/docs/icons/close.svg ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/docs/icons/compare.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M400-40v-80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v-80h80v880h-80ZM200-240h200v-240L200-240Zm360 120v-360l200 240v-520H560v-80h200q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H560Z"/></svg>

package/docs/icons/delete.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

package/docs/icons/drag-handle.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-360v-80h640v80H160Zm0-160v-80h640v80H160Z"/></svg>