kempo-ui 0.1.6 → 0.2.2

package/dist/components/SidePanel.js

@@ -1,236 +0,0 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import"./Icon.js";class SidePanel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},side:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.collapsed=!1,this.side="left",this.persistentId=null,this.isInitialLoad=!0}toggleClick=()=>this.toggle();updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`side-panel-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);null!==t&&(this.collapsed="true"===t,this.isInitialLoad=!1)}if(e.has("collapsed")){if(this.persistentId&&window?.localStorage&&!this.isInitialLoad){const e=`side-panel-persistent-id-${this.persistentId}`;window.localStorage.setItem(e,this.collapsed.toString())}this.isInitialLoad=!1;const e=this.collapsed?"collapse":"expand";this.dispatchEvent(new CustomEvent(e)),this.dispatchEvent(new CustomEvent("change",{detail:e})),window.dispatchEvent(new CustomEvent("side-panel-change",{detail:{collapsed:this.collapsed,width:this.collapsed?"3.5rem":"16rem",side:this.side}}))}}expand=()=>this.collapsed=!1;collapse=()=>this.collapsed=!0;toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
-			<div id="header">
-				<slot name="logo"></slot>
-				<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
-					<k-icon name="arrow-line" direction="${(()=>"right"===this.side?this.collapsed?"left":"right":this.collapsed?"right":"left")()}"></k-icon>
-				</button>
-			</div>
-			<div id="content">
-				<slot></slot>
-			</div>
-		`}static styles=css`
-		:host {
-			--bg: var(--c_bg);
-			--width-expanded: 16rem;
-			--transition-duration: var(--animation_ms, 256ms);
-			display: flex;
-			flex-direction: column;
-			position: fixed;
-			top: 0;
-			left: 0;
-			height: 100vh;
-			width: var(--width-expanded);
-			transition: width var(--transition-duration);
-			background: var(--bg);
-			border-right: 1px solid var(--c_border);
-			z-index: 99;
-		}
-		:host([collapsed]) {
-			width: auto;
-		}
-		:host([side="right"]) {
-			left: auto;
-			right: 0;
-			border-right: none;
-			border-left: 1px solid var(--c_border);
-		}
-		#header {
-			display: flex;
-			align-items: center;
-			justify-content: flex-end;
-			gap: var(--spacer_h);
-			padding: var(--spacer_h);
-			border-bottom: 1px solid var(--c_border);
-			flex-shrink: 0;
-		}
-		::slotted([slot="logo"]) {
-			margin-right: auto;
-			flex: 1;
-			min-width: 0;
-			opacity: 1;
-			transition: opacity var(--transition-duration);
-		}
-		:host([collapsed]) ::slotted([slot="logo"]) {
-			display: none;
-		}
-		#toggle {
-			flex-shrink: 0;
-			width: 2rem;
-			height: 2rem;
-			border: none;
-			background: transparent;
-			color: var(--c_text);
-			cursor: pointer;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-radius: var(--radius);
-		}
-		#toggle:hover {
-			background: var(--c_bg_hover);
-		}
-		#content {
-			flex: 1;
-			min-height: 0;
-			overflow-y: auto;
-			overflow-x: hidden;
-			display: flex;
-			flex-direction: column;
-		}
-		:host([collapsed]) #content {
-			align-items: flex-start;
-		}
-		:host(:not([collapsed])) #content {
-			/* scrollbar-gutter: stable; */
-		}
-	`}class SidePanelItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};handleClick=e=>{this.collapsed&&!this["no-expand"]&&this.panel&&(e.preventDefault(),this.panel.expand())};render(){return html`
-			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}" @click=${this.handleClick}>
-				${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
-				${this.collapsed?nothing:html`<span class="label"><slot></slot></span>`}
-			</a>
-		`}static styles=css`
-		:host {
-			display: block;
-		}
-		:host([collapsed][hide-when-collapsed]) {
-			display: none;
-		}
-		.item {
-			display: flex;
-			align-items: center;
-			gap: var(--spacer_h);
-			padding: var(--spacer_h);
-			color: var(--c_text);
-			text-decoration: none;
-			border-radius: var(--radius);
-			margin: 0 var(--spacer_h);
-			transition: background var(--animation_ms), color var(--animation_ms);
-			white-space: nowrap;
-		}
-		:host([collapsed]) .item {
-		}
-		.item:hover {
-			background: var(--c_bg_hover);
-		}
-		.item.active {
-			color: var(--tc_on_primary);
-		}
-		.item.active:hover {
-			background: var(--c_primary);
-			filter: brightness(1.1);
-		}
-		k-icon {
-			flex-shrink: 0;
-		}
-		.label {
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	`}class SidePanelLabel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0}};constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
-		:host {
-			display: block;
-			margin: var(--spacer_h) 0;
-		}
-		:host([collapsed]) {
-			margin: 0 var(--spacer_h);
-			align-self: stretch;
-		}
-		.label {
-			padding: 0 var(--spacer);
-			font-size: 0.75rem;
-			font-weight: 600;
-			text-transform: uppercase;
-			color: var(--c_text_muted);
-			letter-spacing: 0.05em;
-		}
-		hr {
-			border: none;
-			border-top: 1px solid var(--c_border);
-			margin: var(--spacer_h) var(--spacer);
-		}
-		:host([collapsed]) hr {
-			margin: var(--spacer_h) 0;
-		}
-	`}class SidePanelMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.open=!1,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};toggleMenu=()=>{this.collapsed&&!this["no-expand"]&&this.panel?this.panel.expand():this.collapsed||(this.open=!this.open)};render(){return html`
-			<div class="menu-container">
-				<button class="no-btn menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
-					${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
-					${this.collapsed?nothing:html`<span class="label">${this.label}</span>`}
-					${this.collapsed?nothing:html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
-				</button>
-				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
-					<slot></slot>
-				</div>
-			</div>
-		`}static styles=css`
-		:host {
-			display: block;
-		}
-		:host([collapsed][hide-when-collapsed]) {
-			display: none;
-		}
-		.menu-container {
-			margin: 0;
-		}
-		.menu-header {
-			display: flex !important;
-			align-items: center;
-			gap: var(--spacer_h);
-			padding-top: var(--spacer_h) !important;
-			padding-bottom: var(--spacer_h) !important;
-			padding-left: var(--spacer_h) !important;
-			padding-right: var(--spacer_h) !important;
-			color: var(--c_text);
-			background: transparent;
-			border: none;
-			border-radius: var(--radius);
-			margin: 0 var(--spacer_h);
-			width: calc(100% - var(--spacer));
-			cursor: pointer;
-			text-align: left;
-			white-space: nowrap;
-			transition: background var(--animation_ms);
-		}
-		:host([collapsed]) .menu-header {
-			width: auto;
-		}
-		.menu-header:hover {
-			background: var(--c_bg_hover);
-		}
-		k-icon {
-			flex-shrink: 0;
-		}
-		.label {
-			flex: 1;
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.chevron {
-			transition: transform var(--animation_ms);
-		}
-		.menu-content {
-			max-height: 0;
-			overflow: hidden;
-			transition: max-height var(--animation_ms);
-			padding-left: calc(var(--spacer_h) * 2);
-		}
-		:host([collapsed]) .menu-content {
-			padding-left: 0;
-		}
-		.menu-content.open {
-			max-height: 500px;
-		}
-		::slotted(*) {
-			margin: 0.25rem 0;
-		}
-	`}class SidePanelSpacer extends ShadowComponent{render(){return html`<div class="spacer"></div>`}static styles=css`
-		:host {
-			display: block;
-			flex: 1;
-		}
-		.spacer {
-			height: 100%;
-		}
-	`}customElements.define("k-side-panel",SidePanel),customElements.define("k-side-panel-item",SidePanelItem),customElements.define("k-side-panel-label",SidePanelLabel),customElements.define("k-side-panel-menu",SidePanelMenu),customElements.define("k-side-panel-spacer",SidePanelSpacer);export default SidePanel;

package/docs/components/side-menu.html

@@ -1,189 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SideMenu - Components - Kempo Docs - A Web Components Solution</title>
-  <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.11/dist/kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script>window.litDisableBundleWarning = true;</script>
-</head>
-<body>
-  <k-import src="../nav-1.inc.html"></k-import>
-  <h1 class="ta-center">SideMenu</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="#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>
-        <a href="#constructor">Constructor</a><br />
-        <a href="#requirements">Requirements</a><br />
-        <a href="#properties">Properties</a><br />
-        <a href="#events">Events</a><br />
-        <a href="#methods">Methods</a><br />
-      </div>
-    </details>
-
-    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Side Menus are closed by default, to open them call the <code>open()</code> method.</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">"sm1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</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-sm1"</span>&gt;</span>Open Side Menu 1<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-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm1'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm1'</span>).open();<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="sm1">
-            <p>Side Menu 1</p>
-          </k-side-menu>
-          <button id="open-sm1">Open Side Menu 1</button>
-          <script>
-            document.getElementById('open-sm1').addEventListener('click',()=>{
-              document.getElementById('sm1').open();
-            });
-          </script>
-        </k-card>
-      </div>
-    </div>
-
-    <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">
-        <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">"sm2"</span> <span class="hljs-attr">overlay-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 2<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-sm2"</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-sm2"</span>&gt;</span>Open Side Menu 2<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> $sm2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm2'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    $sm2.open();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'close-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    $sm2.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="sm2" overlay-close="false">
-            <p>Side Menu 2</p>
-            <button id="close-sm2">Close</button>
-          </k-side-menu>
-          <button id="open-sm2">Open Side Menu 2</button>
-          <script>
-            const $sm2 = document.getElementById('sm2');
-            document.getElementById('open-sm2').addEventListener('click',()=>{
-              $sm2.open();
-            });
-            document.getElementById('close-sm2').addEventListener('click',()=>{
-              $sm2.close();
-            });
-          </script>
-        </k-card>
-      </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">
-      <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">"sm3"</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">p</span>&gt;</span>Side Menu 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</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-sm3"</span>&gt;</span>Open Side Menu 3<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-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm3'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm3'</span>).open();<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="sm3" side="right">
-            <p>Side Menu 3</p>
-          </k-side-menu>
-          <button id="open-sm3">Open Side Menu 3</button>
-          <script>
-            document.getElementById('open-sm3').addEventListener('click',()=>{
-              document.getElementById('sm3').open();
-            });
-          </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="./shadowcomponent.html">ShadowComponent</a></h6>
-    <h5>
-      <code>new SideMenu()</code>
-    </h5>
-
-    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
-    <ul>
-      <li><a href="./shadowcomponent.html">ShadowComponent</a></li>
-      <li><a href="./focuscapture.html">FocusCapture</a></li>
-      <li><strong>CSS:</strong> Add <code>html { scrollbar-gutter: stable; }</code> to your global styles to prevent layout shifts when the menu disables scrolling.</li>
-    </ul>
-
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h5><code>opened<i>: boolean</i></code></h5>
-    <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>
-
-    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
-    <h5><code>open</code></h5>
-    <p>Dispatched when the side menu is opened.</p>
-    <h5><code>close</code></h5>
-    <p>Dispatched when the side menu is closed.</p>
-    <h5><code>change</code></h5>
-    <p>Dispatched when the side menu state changes. Event detail contains "open" or "close".</p>
-    <h5><code>toggle</code></h5>
-    <p>Dispatched when the toggle method is called.</p>
-
-    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h5><code>open()<i>: void</i></code></h5>
-    <p>Opens the side menu.</p>
-    <h5><code>close()<i>: void</i></code></h5>
-    <p>Closes the side menu.</p>
-    <h5><code>toggle()<i>: void</i></code></h5>
-    <p>Toggles the side menu open or closed and dispatches a toggle event.</p>
-
-  </main>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
-  <script type="module" src="../src/components/SideMenu.js"></script> 
-</body>
-</html>

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

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SidePanel Basic Example</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/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;
-      height: 100vh;
-      overflow: hidden;
-    }
-  </style>
-</head>
-<body>
-  <k-side-panel>
-		<h5 slot="logo" class="m0">Kempo</h5>
-    <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>
-  <k-main>
-    <h2>Main Content</h2>
-		<p>This is an example of the side panel. Click the toggle button to collapse it.</p>
-		<p>The Main component automatically adjusts its margin based on the panel state.</p>
-  </k-main>
-</body>
-</html>

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

@@ -1,70 +0,0 @@
-<!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.11/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-menu.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SidePanel Menu Example</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/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>
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-      height: 100vh;
-      overflow: hidden;
-    }
-  </style>
-</head>
-<body>
-  <k-side-panel>
-    <h3 slot="logo" style="margin: 0; font-size: 1.25rem;">App</h3>
-    <k-side-panel-item icon="cards" href="#">Dashboard</k-side-panel-item>
-    <k-side-panel-menu icon="folder" label="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-menu>
-    <k-side-panel-spacer></k-side-panel-spacer>
-    <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
-  </k-side-panel>
-  <div style="margin-left: 16rem; padding: 2rem; transition: margin-left 256ms;">
-    <h2>Main Content</h2>
-    <p>Click on the "Projects" menu to expand it and see sub-items.</p>
-  </div>
-  <script>
-    const panel = document.querySelector('k-side-panel');
-    const content = document.querySelector('div');
-    panel.addEventListener('collapse', () => {
-      content.style.marginLeft = '3.5rem';
-    });
-    panel.addEventListener('expand', () => {
-      content.style.marginLeft = '16rem';
-    });
-  </script>
-</body>
-</html>