kempo-ui 0.0.43 → 0.0.63

package/docs/components/photo-viewer.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PhotoViewer - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="icon" type="image/png" sizes="48x48" href=".../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
@@ -45,14 +45,14 @@
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/civic.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Honda Civic Type R - Track-focused hot hatch<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Honda Civic Type R - Track-focused hot hatch<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-card label="Results">
         <div class="mb" style="max-width: 400px;">
           <k-photo-viewer
-            src="./media/civic.jpg"
+            src="../media/civic.jpg"
             alt="Honda Civic Type R"
           >
             <p>Honda Civic Type R - Track-focused hot hatch</p>
@@ -68,26 +68,26 @@
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"gallery"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/civic.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda Civic Type R<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/corvette.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Chevrolet Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/evo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"gallery"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda Civic Type R<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Chevrolet Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-card label="Results">
           <div class="gallery mb" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px;">
             <k-photo-viewer
-              src="./media/civic.jpg"
+              src="../media/civic.jpg"
               alt="Honda Civic Type R"
             >
               <h6 class="m0">Honda Civic Type R</h6>
             </k-photo-viewer>
             <k-photo-viewer
-              src="./media/corvette.jpg"
+              src="../media/corvette.jpg"
               alt="Chevrolet Corvette C8"
             >
               <h6 class="m0">Chevrolet Corvette C8</h6>
             </k-photo-viewer>
             <k-photo-viewer
-              src="./media/evo.jpg"
+              src="../media/evo.jpg"
               alt="Mitsubishi Lancer Evolution"
             >
               <h6 class="m0">Mitsubishi Lancer Evolution</h6>
@@ -102,14 +102,14 @@
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/gtr.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br />  <span class="hljs-attr">global</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Nissan GT-R (Global Navigation)<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/gtr.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br />  <span class="hljs-attr">global</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Nissan GT-R (Global Navigation)<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-card label="Results">
           <div class="mb" style="max-width: 300px;">
             <k-photo-viewer
-              src="./media/gtr.jpg"
+              src="../media/gtr.jpg"
               alt="Nissan GT-R"
               global
             >
@@ -126,14 +126,14 @@
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/nsx.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br />  <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda NSX<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>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/evo.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br />  <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<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>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/nsx.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br />  <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda NSX<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>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br />  <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<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>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-card label="Results">
           <div class="gallery mb" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px;">
             <k-photo-viewer
-              src="./media/nsx.jpg"
+              src="../media/nsx.jpg"
               alt="Honda NSX"
               keyboard-controls="false"
             >
@@ -144,7 +144,7 @@
               <p class="m0">Custom controls, keyboard disabled</p>
             </k-photo-viewer>
             <k-photo-viewer
-              src="./media/evo.jpg"
+              src="../media/evo.jpg"
               alt="Mitsubishi Lancer Evolution"
               keyboard-controls="false"
             >
@@ -165,14 +165,14 @@
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"./media/corvette.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span><br />&gt;</span><br />  <span class="hljs-comment">&lt;!-- Default caption (thumbnail view) --&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <br />  <span class="hljs-comment">&lt;!-- Fullscreen caption --&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"fullscreen-caption"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>2020 Chevrolet Corvette C8 Stingray<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The first mid-engine Corvette featuring a 6.2L V8 engine<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br />  <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span><br />  <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span><br />&gt;</span><br />  <span class="hljs-comment">&lt;!-- Default caption (thumbnail view) --&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <br />  <span class="hljs-comment">&lt;!-- Fullscreen caption --&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"fullscreen-caption"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>2020 Chevrolet Corvette C8 Stingray<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The first mid-engine Corvette featuring a 6.2L V8 engine<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-card label="Results">
           <div class="mb" style="max-width: 400px;">
             <k-photo-viewer
-              src="./media/corvette.jpg"
+              src="../media/corvette.jpg"
               alt="Chevrolet Corvette C8"
             >
               <h6 class="m0">Corvette C8</h6>

package/docs/components/side-menu.html

@@ -22,6 +22,7 @@
         <h6>Examples</h6>
         <a href="#basicUsage">Basic Usage</a><br />
         <a href="#closing">Closing</a><br />
+        <a href="#escClose">ESC Key Close</a><br />
         <a href="#rightSideMenu">Right Side Menu</a><br />
         
         <h6 class="mt">JavaScript Reference</h6>
@@ -58,6 +59,7 @@
 
     <h3 id="closing"><a href="#closing" class="no-link">Closing</a></h3>
     <p>By default clicking on the overlay (the part that covers the page while the Side Menu is open) will close the Side Menu. Use the <code>overlay-close="false"</code> attribute/value to disable this.</p>
+    <p>By default pressing the ESC key will also close the Side Menu. Use the <code>esc-close="false"</code> attribute/value to disable this.</p>
     <p>Use the <code>close()</code> method to close the Side Menu, alternately you can use the <code>toggle()</code> method which can be used to open or close the Side Menu.</p>
     <div class="row -mx">
       <div class="col m-span-12 px">
@@ -85,6 +87,34 @@
       </div>
     </div>
 
+    <h3 id="escClose"><a href="#escClose" class="no-link">ESC Key Close</a></h3>
+    <p>By default pressing the ESC key will close the Side Menu. Use the <code>esc-close="false"</code> attribute/value to disable this behavior.</p>
+    <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-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm4"</span> <span class="hljs-attr">esc-close</span>=<span class="hljs-string">"false"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 4 - ESC won't close this<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"close-sm4"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-menu</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">"open-sm4"</span>&gt;</span>Open Side Menu 4<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> $sm4 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm4'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm4'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    $sm4.open();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'close-sm4'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    $sm4.close();<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-side-menu id="sm4" esc-close="false">
+            <p>Side Menu 4 - ESC won't close this</p>
+            <button id="close-sm4">Close</button>
+          </k-side-menu>
+          <button id="open-sm4">Open Side Menu 4</button>
+          <script>
+            const $sm4 = document.getElementById('sm4');
+            document.getElementById('open-sm4').addEventListener('click',()=>{
+              $sm4.open();
+            });
+            document.getElementById('close-sm4').addEventListener('click',()=>{
+              $sm4.close();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
     <h3 id="rightSideMenu"><a href="#rightSideMenu" class="no-link">Right Side Menu</a></h3>
     <p>Give the menu the <code>side="right"</code> attribute/value to make it open from the right side.</p>
     <div class="row -mx">
@@ -128,6 +158,8 @@
     <p>Whether the side menu is opened. Defaults to <code>false</code>. Syncs to <code>opened</code> attribute.</p>
     <h5><code>overlayClose<i>: boolean</i></code></h5>
     <p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code>. Syncs to <code>overlay-close</code> attribute.</p>
+    <h5><code>escClose<i>: boolean</i></code></h5>
+    <p>Whether pressing the ESC key closes the side menu. Defaults to <code>true</code>. Syncs to <code>esc-close</code> attribute.</p>
     <h5><code>side<i>: string</i></code></h5>
     <p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>. Syncs to <code>side</code> attribute.</p>
 

package/docs/components/side-panel-dual.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SidePanel Dual - Components - Kempo Docs</title>
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script type="module">
+    import theme from '../src/utils/theme.js';
+    theme.init();
+  </script>
+  <script type="module" src="../src/components/SidePanel.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
+  <style>
+    body { 
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <!-- Left Side Panel -->
+  <k-side-panel>
+    <h3 slot="logo" class="m0">Kempo</h3>
+    <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
+    <k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
+    <k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
+    <k-side-panel-label>Projects</k-side-panel-label>
+    <k-side-panel-item icon="folder" href="#">Figma Design</k-side-panel-item>
+    <k-side-panel-item icon="folder" href="#">Static Mania</k-side-panel-item>
+    <k-side-panel-spacer></k-side-panel-spacer>
+    <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
+    <k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
+  </k-side-panel>
+
+  <!-- Right Side Panel -->
+  <k-side-panel side="right">
+    <h3 slot="logo" class="m0">Tools</h3>
+    <k-side-panel-item icon="notification" href="#">Notifications</k-side-panel-item>
+    <k-side-panel-item icon="chat" href="#">Messages</k-side-panel-item>
+    <k-side-panel-label>Recent</k-side-panel-label>
+    <k-side-panel-item icon="document" href="#">Document 1</k-side-panel-item>
+    <k-side-panel-item icon="document" href="#">Document 2</k-side-panel-item>
+    <k-side-panel-spacer></k-side-panel-spacer>
+    <k-side-panel-item icon="help" href="#">Help</k-side-panel-item>
+  </k-side-panel>
+
+  <!-- Main Content -->
+  <k-main>
+    <h1>Dual Side Panels</h1>
+    <p>This page demonstrates two side panels working simultaneously - one on the left and one on the right.</p>
+    <p>Try toggling each panel independently using the arrow buttons.</p>
+    
+    <h2>Features</h2>
+    <ul>
+      <li>Left panel defaults to left side</li>
+      <li>Right panel uses <code>side="right"</code> attribute</li>
+      <li>Both panels can be collapsed/expanded independently</li>
+      <li>Main content automatically adjusts margins for both panels</li>
+      <li>Toggle arrows point correctly for each side</li>
+    </ul>
+
+    <h2>Lorem Ipsum</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </k-main>
+</body>
+</html>

package/docs/components/side-panel-scroll.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SidePanel Scroll Example</title>
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+	<script type="module">
+		import theme from '../src/utils/theme.js';
+		theme.init();
+	</script>
+	<script type="module" src="../src/components/SidePanel.js"></script>
+	<script type="module" src="../src/components/Main.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <k-side-panel>
+		<h5 slot="logo" class="m0">Application</h5>
+    
+    <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
+    <k-side-panel-item href="#">Analytics</k-side-panel-item>
+    <k-side-panel-item href="#">Reports</k-side-panel-item>
+    
+    <k-side-panel-label>Communication</k-side-panel-label>
+    <k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
+    <k-side-panel-item href="#">Messages</k-side-panel-item>
+    <k-side-panel-item href="#">Notifications</k-side-panel-item>
+    
+    <k-side-panel-label>Projects</k-side-panel-label>
+    <k-side-panel-menu icon="folder" label="Active Projects">
+      <k-side-panel-item href="#">Website Redesign</k-side-panel-item>
+      <k-side-panel-item href="#">Mobile App</k-side-panel-item>
+      <k-side-panel-item href="#">API Integration</k-side-panel-item>
+      <k-side-panel-item href="#">Documentation</k-side-panel-item>
+    </k-side-panel-menu>
+    <k-side-panel-menu icon="folder" label="Archived Projects">
+      <k-side-panel-item href="#">Old Website</k-side-panel-item>
+      <k-side-panel-item href="#">Legacy System</k-side-panel-item>
+      <k-side-panel-item href="#">Beta App</k-side-panel-item>
+    </k-side-panel-menu>
+    <k-side-panel-item icon="add" href="#">New Project</k-side-panel-item>
+    
+    <k-side-panel-label>Tasks</k-side-panel-label>
+    <k-side-panel-item icon="check" href="#">My Tasks</k-side-panel-item>
+    <k-side-panel-item href="#">Assigned to Me</k-side-panel-item>
+    <k-side-panel-item href="#">Due Today</k-side-panel-item>
+    <k-side-panel-item href="#">This Week</k-side-panel-item>
+    
+    <k-side-panel-label>Team</k-side-panel-label>
+    <k-side-panel-menu label="Team Members">
+      <k-side-panel-item href="#">Development</k-side-panel-item>
+      <k-side-panel-item href="#">Design</k-side-panel-item>
+      <k-side-panel-item href="#">Marketing</k-side-panel-item>
+      <k-side-panel-item href="#">Sales</k-side-panel-item>
+    </k-side-panel-menu>
+    <k-side-panel-item href="#">All Teams</k-side-panel-item>
+    
+    <k-side-panel-label>Examples</k-side-panel-label>
+    <k-side-panel-item href="#">Item without icon</k-side-panel-item>
+    <k-side-panel-menu label="Menu without icon">
+      <k-side-panel-item href="#">Sub-item 1</k-side-panel-item>
+      <k-side-panel-item href="#">Sub-item 2</k-side-panel-item>
+    </k-side-panel-menu>
+    
+    <k-side-panel-item icon="lock" href="#" no-expand>No Auto-Expand</k-side-panel-item>
+    <k-side-panel-menu icon="settings" label="Config (no expand)" no-expand>
+      <k-side-panel-item href="#">Option 1</k-side-panel-item>
+      <k-side-panel-item href="#">Option 2</k-side-panel-item>
+    </k-side-panel-menu>
+    
+    <k-side-panel-label>Resources</k-side-panel-label>
+    <k-side-panel-item icon="folder" href="#">Documents</k-side-panel-item>
+    <k-side-panel-item icon="image" href="#">Media Files</k-side-panel-item>
+    <k-side-panel-item icon="link" href="#">Links</k-side-panel-item>
+    <k-side-panel-item href="#">Bookmarks</k-side-panel-item>
+    
+    <k-side-panel-label>Tools</k-side-panel-label>
+    <k-side-panel-item icon="edit" href="#">Editor</k-side-panel-item>
+    <k-side-panel-item icon="code" href="#">Code Review</k-side-panel-item>
+    <k-side-panel-item href="#">Bug Tracker</k-side-panel-item>
+    <k-side-panel-item href="#">Terminal</k-side-panel-item>
+    
+    <k-side-panel-spacer></k-side-panel-spacer>
+    
+    <k-side-panel-item icon="help" href="#">Help & Support</k-side-panel-item>
+    <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
+    <k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
+  </k-side-panel>
+  
+  <k-main>
+    <h1>Independent Scrolling Demo</h1>
+    <p>This example demonstrates that the SidePanel and main content area scroll independently. Try scrolling in the sidebar and notice how it doesn't affect the main content area, and vice versa.</p>
+    
+    <h2>Section 1: Introduction</h2>
+    <p>The SidePanel component uses <code>overflow-y: auto</code> on its content area, making it scrollable independently from the page. This is essential for applications with lots of navigation options or when you want the navigation to remain accessible while scrolling through long content.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    
+    <h2>Section 2: Features</h2>
+    <p>The sidebar includes many different types of navigation items:</p>
+    <ul>
+      <li>Simple navigation items with icons</li>
+      <li>Labels to organize sections</li>
+      <li>Expandable menus with sub-items</li>
+      <li>Spacers to push items to the bottom</li>
+      <li>Active state indicators</li>
+    </ul>
+    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    
+    <h2>Section 3: Benefits</h2>
+    <p>Independent scrolling provides several benefits:</p>
+    <ol>
+      <li><strong>Improved Navigation:</strong> Users can always access any navigation item without losing their place in the content</li>
+      <li><strong>Better UX:</strong> Natural scrolling behavior that users expect from modern applications</li>
+      <li><strong>Space Efficiency:</strong> You can have extensive navigation without cluttering the viewport</li>
+      <li><strong>Flexible Layout:</strong> Works with both short and long content areas</li>
+    </ol>
+    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+    
+    <h2>Section 4: Implementation Details</h2>
+    <p>The SidePanel uses the following CSS properties to achieve independent scrolling:</p>
+    <pre><code>#content {
+  height: calc(100% - 3rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}</code></pre>
+    <p>This ensures that the panel's content area takes up all available height minus the header, and enables vertical scrolling when needed.</p>
+    
+    <h2>Section 5: Responsive Behavior</h2>
+    <p>The SidePanel can be collapsed to save space while keeping all navigation accessible. When collapsed, only icons are shown, and the panel takes up minimal width. Try clicking the toggle button in the header to see this in action.</p>
+    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
+    
+    <h2>Section 6: Customization</h2>
+    <p>The SidePanel supports extensive customization through CSS variables:</p>
+    <ul>
+      <li><code>--bg</code>: Background color of the panel</li>
+      <li><code>--width-expanded</code>: Width when expanded (default: 16rem)</li>
+      <li><code>--width-collapsed</code>: Width when collapsed (default: 3.5rem)</li>
+      <li><code>--transition-duration</code>: Animation duration for expand/collapse</li>
+    </ul>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
+    
+    <h2>Section 7: Accessibility</h2>
+    <p>The SidePanel includes proper ARIA labels and keyboard navigation support. The toggle button has descriptive aria-labels that change based on the panel's state ("Expand panel" or "Collapse panel").</p>
+    <p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+    
+    <h2>Section 8: Integration</h2>
+    <p>The SidePanel works seamlessly with the <code>&lt;k-main&gt;</code> component, which automatically adjusts its margins when the panel expands or collapses. This creates a smooth, coordinated experience.</p>
+    <p>The components communicate through custom events dispatched on the window object, making them loosely coupled but highly coordinated.</p>
+    <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus.</p>
+    
+    <h2>Section 9: Performance</h2>
+    <p>The SidePanel is built with Lit and uses Shadow DOM for style encapsulation. This ensures excellent performance even with many navigation items, and prevents style conflicts with the rest of your application.</p>
+    <p>Transitions are hardware-accelerated using CSS transforms and opacity changes, providing smooth animations even on lower-end devices.</p>
+    <p>Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
+    <h2>Section 10: Conclusion</h2>
+    <p>The SidePanel component provides a robust, flexible navigation solution with independent scrolling, smooth animations, and excellent accessibility. It's perfect for applications that need persistent navigation with many options.</p>
+    <p>Try scrolling both the sidebar and this main content area to experience the independent scrolling behavior. Notice how smooth and natural it feels, and how you can always access any navigation item while browsing through the content.</p>
+    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+    
+    <div style="margin-top: 4rem; padding: 2rem; background: var(--c_bg__alt); border-radius: var(--radius);">
+      <h3>End of Content</h3>
+      <p>You've reached the bottom of the page! Now try scrolling in the sidebar to see all the navigation options.</p>
+    </div>
+  </k-main>
+</body>
+</html>

package/docs/components/side-panel.html

@@ -23,8 +23,10 @@
           <h6>Examples</h6>
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#withMenu">With Menu</a><br />
+          <a href="#independentScrolling">Independent Scrolling</a><br />
           <a href="#collapsedDefault">Collapsed by Default</a><br />
           <a href="#rightSidePanel">Right Side Panel</a><br />
+          <a href="#dualPanels">Dual Side Panels</a><br />
           <a href="#customStyling">Custom Styling</a><br />
           
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
@@ -70,6 +72,43 @@
       </div>
     </div>
 
+    <h3 id="independentScrolling"><a href="#independentScrolling" class="no-link">Independent Scrolling</a></h3>
+    <p>The SidePanel scrolls independently from the main content area, allowing users to navigate extensive menus without losing their place in the content.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <iframe src="./side-panel-scroll.html" style="width: 100%; height: 600px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="rightSidePanel"><a href="#rightSidePanel" class="no-link">Right Side Panel</a></h3>
+    <p>Set the <code>side</code> attribute to <code>"right"</code> to position the panel on the right side of the page.</p>
+    <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-side-panel</span> <span class="hljs-attr">side</span>=<span class="hljs-string">"right"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"logo"</span>&gt;</span>Tools<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"notification"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Notifications<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"chat"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Messages<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br />  <span class="hljs-comment">&lt;!-- Content --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="dualPanels"><a href="#dualPanels" class="no-link">Dual Side Panels</a></h3>
+    <p>You can have two side panels on a page simultaneously - one on the left and one on the right. The <code>&lt;k-main&gt;</code> component will automatically adjust margins for both panels.</p>
+    <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-side-panel</span>&gt;</span><br />  <span class="hljs-comment">&lt;!-- Left panel content --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span> <span class="hljs-attr">side</span>=<span class="hljs-string">"right"</span>&gt;</span><br />  <span class="hljs-comment">&lt;!-- Right panel content --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br />  <span class="hljs-comment">&lt;!-- Content centered between both panels --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+    <div class="row -mx">
+      <div class="col span-12 px">
+        <k-card label="Output">
+          <iframe src="./side-panel-dual.html" style="width: 100%; height: 600px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -84,10 +123,11 @@
     <h4>How It Works</h4>
     <ul>
       <li>Listens for <code>side-panel-change</code> events on <code>window</code></li>
-      <li>Automatically detects existing panel on mount</li>
+      <li>Automatically detects existing panels on mount</li>
       <li>Adjusts margin with smooth transitions</li>
       <li>Provides standard <code>&lt;main&gt;</code> centering and max-width behavior</li>
       <li>Works with both left and right side panels</li>
+      <li>Supports dual panels (one on each side) simultaneously</li>
     </ul>
 
     <h4>Usage</h4>

package/docs/icons/arrow_drop_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360 280-560h400L480-360Z"/></svg>

package/docs/icons/circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/docs/icons/code.svg

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

package/docs/icons/code_blocks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m384-336 56-57-87-87 87-87-56-57-144 144 144 144Zm192 0 144-144-144-144-56 57 87 87-87 87 56 57ZM200-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-560H200v560Zm0-560v560-560Z"/></svg>

package/docs/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>

package/docs/icons/dot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="currentColor" cx="50" cy="50" r="20"/></svg>

package/docs/icons/format_align_center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-120v-80h720v80H120Zm160-160v-80h400v80H280ZM120-440v-80h720v80H120Zm160-160v-80h400v80H280ZM120-760v-80h720v80H120Z"/></svg>

package/docs/icons/format_align_justify.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-120v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Z"/></svg>

package/docs/icons/format_align_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-120v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Z"/></svg>

package/docs/icons/format_align_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-760v-80h720v80H120Zm240 160v-80h480v80H360ZM120-440v-80h720v80H120Zm240 160v-80h480v80H360ZM120-120v-80h720v80H120Z"/></svg>

package/docs/icons/format_bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z"/></svg>

package/docs/icons/format_clear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m528-546-93-93-121-121h486v120H568l-40 94ZM792-56 460-388l-80 188H249l119-280L56-792l56-56 736 736-56 56Z"/></svg>

package/docs/icons/format_color_fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m247-904 57-56 343 343q23 23 23 57t-23 57L457-313q-23 23-57 23t-57-23L153-503q-23-23-23-57t23-57l190-191-96-96Zm153 153L209-560h382L400-751Zm360 471q-33 0-56.5-23.5T680-360q0-21 12.5-45t27.5-45q9-12 19-25t21-25q11 12 21 25t19 25q15 21 27.5 45t12.5 45q0 33-23.5 56.5T760-280ZM80 0v-160h800V0H80Z"/></svg>

package/docs/icons/format_color_text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M80 0v-160h800V0H80Zm140-280 210-560h100l210 560h-96l-50-144H368l-52 144h-96Zm176-224h168l-82-232h-4l-82 232Z"/></svg>

package/docs/icons/format_h1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-280v-400h80v160h160v-160h80v400h-80v-160H280v160h-80Zm480 0v-320h-80v-80h160v400h-80Z"/></svg>