kempo-ui 0.0.14 → 0.0.16

package/dist/kempo-vars.css

@@ -0,0 +1 @@
+/* Define Kempo Vars Here */

package/dist/src/components/Accordion.js

@@ -1,28 +1,59 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={};getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const o=this.getPanel(e);if(o){o.active=!0,o.transitioning=!0,setTimeout(()=>{o.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}}))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}}))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists,boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={multiple:{type:Boolean,reflect:!0,converter:boolExists},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.multiple=!1,this.persistentId=null}connectedCallback(){super.connectedCallback?.()}updated(e){if(super.updated?.(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);if(t){const e=t.split(",");this.querySelectorAll("k-accordion-panel").forEach(t=>{t.active=e.includes(t.name);const o=this.getHeader(t.name);o&&(o.active=e.includes(t.name))})}}}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){this.multiple||this.querySelectorAll("k-accordion-panel[active]").forEach(t=>{if(t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}});const t=this.getPanel(e);if(t){t.active=!0,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
 		:host {
 			display: block;
-			border: 1px solid var(--c_border);
+			border: 1px solid var(--c_border, #ccc);
 			border-radius: var(--radius);
 		}
 		::slotted(k-accordion-header) {
-			border-top: 1px solid var(--c_border);
+			border-top: 1px solid var(--c_border, #ccc);
 		}
-		::slotted(k-accordion-header[active="true"]) {
-			border-bottom: 1px solid var(--c_border);
+		::slotted(k-accordion-header) {
+			position: relative;
+		}
+		::slotted(k-accordion-header)::after {
+			content: '';
+			display: block;
+			position: absolute;
+			left: var(--spacer_h, 0.5rem);
+			right: var(--spacer_h, 0.5rem);
+			bottom: 0;
+			height: 0;
+			width: calc(100% - var(--spacer, 1rem));
+			border-bottom: 1px solid var(--c_border, #ccc);
+			opacity: 0;
+			transition: opacity var(--animation_ms, 256ms);
+			pointer-events: none;
+		}
+		::slotted(k-accordion-header[active])::after {
+			opacity: 0.4;
 		}
 		::slotted(k-accordion-header:first-of-type) {
 			border-top: 0;
 		}
-		::slotted(k-accordion-header:last-of-type:not([active="true"])) {
+		::slotted(k-accordion-header:last-of-type:not([active])) {
 			border-bottom: 0;
 		}
-	`;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}static styles=css`
+	`;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}render(){return html`
+			<slot name="left-icon">
+				<k-icon id="icon" name="chevron-right"></k-icon>
+			</slot>
+			<slot></slot>
+			<slot name="right-icon"></slot>
+		`}static styles=css`
 		:host {
 			display: block;
 			padding: 1rem;
 			cursor: pointer;
 		}
-	`;render(){return html`<slot></slot>`}}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolTrueFalse},transitioning:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
+		#icon {
+			will-change: trnasform;
+			transition: transform var(--animation_ms, 256ms);
+			transform: rotate(0deg);
+		}
+		:host([active]) #icon {
+			transform: rotate(90deg);
+		}
+	`}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolExists},transitioning:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
 		:host {
 			display: block;
 			interpolate-size: allow-keywords;
@@ -30,7 +61,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			overflow: hidden;
 			transition: height var(--animation_ms, 256ms) ease-in-out;
 		}
-		:host([active="true"]) {
+	:host([active]) {
 			height: max-content;
 		}
 	`;render(){return html`<slot></slot>`}}customElements.define("k-accordion",Accordion),customElements.define("k-accordion-header",AccordionHeader),customElements.define("k-accordion-panel",AccordionPanel);

package/dist/src/components/Tabs.js

@@ -99,7 +99,11 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 					<slot></slot>
 				</div>
 			</div>
-		`}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
+		`}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`
+			<button id="button" @click=${this.handleClick}>
+				<slot></slot>
+			</button>
+		`}static styles=css`
 		:host {
 			margin-bottom: -1px;
 			flex: 0 0 auto;
@@ -120,24 +124,21 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		}
 
 		:host([active]) {
-			border-bottom: 2px solid var(--c_primary);
+			border-bottom: 3px solid var(--c_primary);
 			margin-bottom: -1px;
 		}
 
 		:host([active]) #button {
 			color: var(--tc_primary);
 		}
-	`;render(){return html`
-			<button id="button" @click=${this.handleClick}>
-				<slot></slot>
-			</button>
-		`}}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
+	`}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`<slot></slot>`}static styles=css`
 		:host {
 			display: block;
 			height: 100%;
 			max-height: 100%;
 			flex: 1 1 auto;
 			overflow: auto;
+			padding-top: var(--spacer, 1rem);
 		}
 
 		:host([active]) {
@@ -147,7 +148,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		:host(:not([active])) {
 			display: none;
 		}
-	`;render(){return html`<slot></slot>`}}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
+	`}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
 		:host {
 			flex: 1 1 auto !important;
 			height: 1px;

package/docs/dev.config.json

@@ -1,15 +1,11 @@
 {
   "customRoutes": {
-    "/": "./index.html",
-    "/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css", 
-    "/kempo-vars.css": "../kempo-vars.css",
-    "/kempo-hljs.css": "../src/kempo-hljs.css",
+    "/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css",
+    "/kempo-ui/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css", 
+    "/kempo-ui/kempo-vars.css": "../src/kempo-vars.css",
+    "/kempo-ui/kempo-hljs.css": "../src/kempo-hljs.css",
     "/icons/**": "../icons/**",
-    "/src/**": "../src/**"
-  },
-  "mimeTypes": {
-    ".js": "application/javascript",
-    ".mjs": "application/javascript"
+    "/kempo-ui/src/**": "../src/**"
   },
   "middleware": {
     "logging": {

package/docs/kempo-ui/components/accordion.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <base href="/kempo-ui/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Accordion - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="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="/kempo-ui/nav.inc.html"></k-import>
+  <h1 class="ta-center">Accordion</h1>
+  <main>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m pl">
+          <h6>Examples</h6>
+          <a href="#basicUsage" class="scroll-link">Basic Usage</a><br />
+          <a href="#defaultOpen" class="scroll-link">Default Open Panel</a><br />
+          <a href="#multiple" class="scroll-link">Multiple Panels Mode</a><br />
+          <a href="#persistent" class="scroll-link">Persistent State Example</a><br />
+          <h6 class="mt"><a href="#jsRef" class="no-link scroll-link">JavaScript Reference</a></h6>
+          <a href="#accordion-ref" class="scroll-link">Accordion</a><br />
+          <a href="#accordion-header-ref" class="scroll-link">AccordionHeader</a><br />
+          <a href="#accordion-panel-ref" class="scroll-link">AccordionPanel</a><br />
+          <a href="#events" class="scroll-link">Events</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>A widget that allows a single panel of content to be opened and closed.</p>
+
+  <h3 id="basicUsage"><a href="#basicUsage" class="no-link scroll-link">Basic Usage</a></h3>
+    <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-accordion</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb">
+            <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1">
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+
+
+
+  <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link scroll-link">Default Open Panel</a></h3>
+    <p>You can have a panel open by default by setting the <code>active</code> attribute to <code>true</code> on both
+    <p>You can have a panel open by default by adding the <code>active</code> attribute to both the header and the
+      panel. The presence of the attribute means <code>true</code>.</p>
+    <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-accordion</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb">
+            <k-accordion-header for-panel="panel1" active>Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1" active>
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+
+  <h3 id="multiple"><a href="#multiple" class="no-link scroll-link">Multiple Panels Mode</a></h3>
+    <p>Add the <code>multiple</code> attribute to <code>k-accordion</code> to allow more than one panel to be open at a
+      time.</p>
+    <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-accordion</span> <span class="hljs-attr">multiple</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb" multiple>
+            <k-accordion-header for-panel="panel1" active>Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1" active>
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+
+  <h3 id="persistent"><a href="#persistent" class="no-link scroll-link">Persistent State Example</a></h3>
+    <p>Add the <code>persistent-id</code> attribute to <code>k-accordion</code> to save and restore open panels across
+      page reloads. The state is stored in <code>localStorage</code> (if available) using the provided ID.</p>
+    <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-accordion</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">"demo-accordion"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-accordion class="mb" persistent-id="demo-accordion">
+            <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
+            <k-accordion-panel name="panel1">
+              <p class="m">Panel 1 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
+            <k-accordion-panel name="panel2">
+              <p class="m">Panel 2 content</p>
+            </k-accordion-panel>
+            <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
+            <k-accordion-panel name="panel3">
+              <p class="m">Panel 3 content</p>
+            </k-accordion-panel>
+          </k-accordion>
+        </k-card>
+      </div>
+    </div>
+
+  <h2 id="jsRef"><a href="#jsRef" class="no-link scroll-link">JavaScript Reference</a></h2>
+    <k-card>
+      <h3 id="accordion-ref" class="bb pb">Accordion</h3>
+      <h4>Properties</h4>
+      <ul>
+        <li><code>multiple: boolean</code> — If present, allows multiple panels to be open.</li>
+        <li><code>persistentId: string</code> — If set, open panel state is saved/restored via localStorage.</li>
+      </ul>
+      <h4>Methods</h4>
+      <ul>
+        <li><code>getHeader(panelName): HTMLElement | null</code></li>
+        <li><code>getPanel(panelName): HTMLElement | null</code></li>
+        <li><code>openPanel(panelName): void</code></li>
+        <li><code>closePanel(panelName): void</code></li>
+        <li><code>togglePanel(panelName): void</code></li>
+      </ul>
+      <h4>Lifecycle</h4>
+      <ul>
+        <li>State is restored in <code>updated()</code> when <code>persistentId</code> changes.</li>
+      </ul>
+    </k-card>
+
+    <k-card>
+      <h3 id="accordion-header-ref" class="bb pb">AccordionHeader</h3>
+      <h4>Properties</h4>
+      <ul>
+        <li><code>forPanel: string</code> — The panel name this header controls.</li>
+        <li><code>active: boolean</code> — Whether this header is active.</li>
+        <li><code>accordion: Accordion | null</code> <i>(read only)</i> — Parent accordion.</li>
+      </ul>
+      <h4>Event Handlers</h4>
+      <ul>
+        <li>Click: toggles associated panel.</li>
+      </ul>
+    </k-card>
+
+    <k-card>
+      <h3 id="accordion-panel-ref" class="bb pb">AccordionPanel</h3>
+      <h4>Properties</h4>
+      <ul>
+        <li><code>name: string</code> — Unique panel identifier.</li>
+        <li><code>active: boolean</code> — Whether this panel is open.</li>
+        <li><code>transitioning: boolean</code> — Whether this panel is animating.</li>
+      </ul>
+      <h4>Methods</h4>
+      <ul>
+        <li><code>accordion: Accordion | null</code> (getter) — Returns parent accordion.</li>
+      </ul>
+
+  <h3 id="events"><a href="#events" class="no-link scroll-link">Events</a></h3>
+      <h5><code>openpanel</code></h5>
+      <p>Fired when a panel is opened. The event detail contains <code>{ panelName }</code>.</p>
+      <h5><code>closepanel</code></h5>
+      <p>Fired when a panel is closed. The event detail contains <code>{ panelName }</code>.</p>
+      <h5><code>togglepanel</code></h5>
+      <p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
+    </k-card>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Accordion.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Card.js"></script>
+  <script>
+    document.querySelectorAll('.scroll-link').forEach(link => {
+      link.addEventListener('click', function (e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href').replace('#', '');
+        const target = document.getElementById(targetId);
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth' });
+          const url = window.location.pathname + window.location.search + '#' + targetId;
+          history.replaceState(null, '', url);
+        }
+      });
+    });
+  </script>
+</body>
+</html>

package/docs/{components → kempo-ui/components}/card.html

@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Card - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Card</h1>
   <main>
     <details class="b r mb">
@@ -82,7 +82,7 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
-  <script type="module" src="../src/components/Card.js"></script> 
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script> 
+  <script type="module" src="/kempo-ui/src/components/Card.js"></script> 
 </body>
 </html>

package/docs/{components → kempo-ui/components}/content-slider.html

@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Content Slider - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Content Slider</h1>
   <main>
     <details
@@ -213,7 +213,7 @@
     <p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
     
   </main>
-  <script type="module" src="../src/components/Import.js"></script> 
-  <script type="module" src="../src/components/ContentSlider.js"></script> 
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script> 
+  <script type="module" src="/kempo-ui/src/components/ContentSlider.js"></script> 
 </body>
 </html>