kempo-ui 0.0.8 → 0.0.10

package/dist/src/components/Card.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Card extends ShadowComponent{static properties={label:{type:String,reflect:!0}};constructor(){super(),this.label=""}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Card extends ShadowComponent{static properties={label:{type:String,reflect:!0}};constructor(){super(),this.label=null}static styles=css`
 		:host {
 			display: block;
 		}
@@ -20,11 +20,11 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			padding: var(--spacer_h);
 		}
 		:host([label]) {
-			padding-top: calc(1.5 * var(--spacer));
-			margin-top: var(--spacer);
+			padding-top: 0.1px; /* Prevent Collapsing Margins */
 		}
 		:host([label]) #card {
 			padding-top: calc(1.5 * var(--spacer));
+			margin-top: var(--spacer);
 		}
 		:host(:not([label])) #label {
 			display: none;

package/dist/src/components/Dialog.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=t=>t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=t=>{const{target:e}=t,o=e.id||e.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(t),t.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(t),t.defaultPrevented||this.close())};handleKeydown=t=>{27===t.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),t.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const t=this.updateComplete||this.requestUpdate();t&&t.then?t.then(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()}):setTimeout(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const t=firstFocusable(this.shadowRoot);t&&(this.previousFocus=document.activeElement,t.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=e=>e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=e=>{const{target:t}=e,o=t.id||t.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(e),e.defaultPrevented||this.close())};handleKeydown=e=>{27===e.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const e=this.updateComplete||this.requestUpdate();e&&e.then?e.then(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()}):setTimeout(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
 		:host {
 			position: fixed;
 			top: 0;
@@ -77,13 +77,13 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 	`;render(){return html`
 			<button id="overlay" aria-label="Close the Dialog" @click=${this.handleClick}></button>
 			<div id="wrapper">
-				<div
-					id="dialog"
-					role="dialog"
-					aria-modal="true"
-					aria-labelledby="title"
-				>
-					<k-focus-capture>
+				<k-focus-capture>
+					<div
+						id="dialog"
+						role="dialog"
+						aria-modal="true"
+						aria-labelledby="title"
+					>
 						<div
 							id="header"
 							class="${this.hasTitle()?"has-title":""}"
@@ -114,7 +114,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 								`:""}
 							</div>
 						`:""}
-					</k-focus-capture>
-				</div>
+					</div>
+				</k-focus-capture>
 			</div>
-		`}static create(t="",e={}){!1!==e.closeExisting&&document.querySelectorAll("k-dialog").forEach(t=>t.close());const{removeOnClose:o=!0,closeCallback:s=()=>{}}=e,i=new Dialog;return Object.assign(i,{opened:!0,...e,closeCallback:(...t)=>{o&&i.remove(),s(...t)}}),t instanceof HTMLElement||t instanceof DocumentFragment?i.appendChild(t):t&&(i.innerHTML=t),e.width&&i.style.setProperty("--width",e.width),e.minWidth&&i.style.setProperty("--min_width",e.minWidth),e.maxWidth&&i.style.setProperty("--max_width",e.maxWidth),e.height&&i.style.setProperty("--height",e.height),e.minHeight&&i.style.setProperty("--min_height",e.minHeight),e.maxHeight&&i.style.setProperty("--max_height",e.maxHeight),document.body.appendChild(i),i.open(),i}static confirm(t,e,o={}){const s=o.title||"Confirm";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1),...o})}static alert(t,e,o={}){const s=o.title||"Alert";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static error(t,e,o={}){const s=o.title||"Error";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-danger">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static success(t,e,o={}){const s=o.title||"Success";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-success">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);
+		`}static create(e="",t={}){!1!==t.closeExisting&&document.querySelectorAll("k-dialog").forEach(e=>e.close());const{removeOnClose:o=!0,closeCallback:s=()=>{},title:i="",titleClasses:l="pyh px m0"}=t,n=new Dialog;if(Object.assign(n,{opened:!0,...t,closeCallback:(...e)=>{o&&n.remove(),s(...e)}}),i){const e=document.createElement("h5");e.slot="title",e.className=l,i instanceof HTMLElement?e.appendChild(i):e.innerHTML=i,n.appendChild(e)}if(e instanceof HTMLElement||e instanceof DocumentFragment)n.appendChild(e);else if(e){if(/<[^>]+>/.test(e))n.innerHTML+=e;else{const t=document.createElement("p");t.className="p",t.textContent=e,n.appendChild(t)}}return t.width&&n.style.setProperty("--width",t.width),t.minWidth&&n.style.setProperty("--min_width",t.minWidth),t.maxWidth&&n.style.setProperty("--max_width",t.maxWidth),t.height&&n.style.setProperty("--height",t.height),t.minHeight&&n.style.setProperty("--min_height",t.minHeight),t.maxHeight&&n.style.setProperty("--max_height",t.maxHeight),document.body.appendChild(n),n.open(),n}static confirm(e,t,o={}){return Dialog.create(e,{title:o.title||"Confirm",closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>t(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>t(!1),...o})}static alert(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Alert",closeCallback:t,cancelText:"Ok",...o})}static error(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Error",titleClasses:"pyh px m0 tc-danger",closeCallback:t,cancelText:"Ok",...o})}static success(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Success",titleClasses:"pyh px m0 tc-success",closeCallback:t,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);

package/dist/src/components/Icon.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const o=(new AbortController).signal;try{const n=await fetch(t,{signal:o});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise(async(t,n)=>{let o;for(let t=0;t<Icon.pathToIcons.length&&!o;t++)try{o=await e(Icon.pathToIcons[t])}catch(t){}t(o||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon(),t.has("iconContent")&&this.fixSVG()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=t;else{const t=this.innerHTML.trim();this.iconContent=t||Icon.fallback}}fixSVG(){setTimeout(()=>{const t=this.querySelector("svg");t&&(t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}))},0)}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const o=(new AbortController).signal;try{const n=await fetch(t,{signal:o});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise(async(t,n)=>{let o;for(let t=0;t<Icon.pathToIcons.length&&!o;t++)try{o=await e(Icon.pathToIcons[t])}catch(t){}t(o||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=this.fixSVG(t);else{const t=this.innerHTML.trim();this.iconContent=t?this.fixSVG(t):Icon.fallback}}fixSVG(t){if(!t)return t;const e=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return e?(e.removeAttribute("width"),e.removeAttribute("height"),e.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(e)):t}static styles=css`
 		:host {
 			display: inline-block;
 			vertical-align: bottom;

package/dist/src/components/Toggle.js

@@ -1,4 +1,11 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
+      <div id="switch">
+        <div id="handle"></div>
+      </div>
+      <label id="label">
+        <slot></slot>
+      </label>
+    `}static styles=css`
     :host {
       --switch_height: 2rem;
       --switch_width: 3rem;
@@ -19,11 +26,6 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       outline: none;
     }
 
-    :host(:focus) {
-      outline: 2px solid var(--c_primary, blue);
-      outline-offset: 2px;
-    }
-
     #switch {
       display: flex;
       align-items: center;
@@ -33,6 +35,12 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       background: var(--switch_background__off);
       border-radius: 999rem;
       margin-right: var(--spacer);
+      box-shadow: 0 0 0 transparent;
+      will-change: box-shadow;
+      transition: box-shadow var(--animation_ms, 256ms);
+    }
+    :host(:focus) #switch {
+      box-shadow: var(--focus_shadow);
     }
 
     #handle {
@@ -64,11 +72,4 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       flex: 1 1 auto;
       padding: 0;
     }
-  `;constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
-      <div id="switch">
-        <div id="handle"></div>
-      </div>
-      <label id="label">
-        <slot></slot>
-      </label>
-    `}}window.customElements.define("k-toggle",Toggle);
+  `}window.customElements.define("k-toggle",Toggle);

package/dist/src/components/Tree.js

@@ -6,12 +6,12 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"..
 			<div class="tree-root">
 				${Tree.renderValue(this.data,null,0,this.depth)}
 			</div>
-		`:html`<slot></slot>`}static leafs=[];static addLeaf=(...e)=>{e.forEach(e=>Tree.leafs.unshift(e))};static renderValue(e,t=null,s=0,r=0){const a=Tree.leafs.find(t=>t.detect(e));if(a){const s=document.createElement("span");if(s.className="d-b",null!==t){const e=document.createElement("span");e.className="number"==typeof t?"tc-muted":"",e.textContent=`${t}: `,s.appendChild(e)}const r=new a(e).render();if(r instanceof Node)s.appendChild(r);else{const e=document.createElement("span");render(r,e),s.appendChild(e)}return s}if("object"==typeof e&&null!==e){const a=new TreeBranch;return a.value=e,a.key=t,a.currentDepth=s,a.maxDepth=r,a}return html`<span class="d-b primitive">${null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:""}${e}</span>`}}window.customElements.define("k-tree",Tree);export class TreeBranch extends ShadowComponent{static properties={value:{type:Object},key:{type:String},currentDepth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.value=null,this.key=null,this.currentDepth=0,this.maxDepth=0,this.opened=!1}connectedCallback(){super.connectedCallback(),this.currentDepth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};render(){const e=null!==this.key?`${this.key}: `:"",t=Array.isArray(this.value)?"Array":"Object";return html`
+		`:html`<slot></slot>`}static leafs=[];static addLeaf=(...e)=>{e.forEach(e=>Tree.leafs.unshift(e))};static renderValue(e,t=null,s=0,a=0){const r=Tree.leafs.find(t=>t.detect(e));if(r){const s=document.createElement("span");if(s.className="d-b",null!==t){const e=document.createElement("span");e.className="number"==typeof t?"tc-muted":"",e.textContent=`${t}: `,s.appendChild(e)}const a=new r(e).render();if(a instanceof Node)s.appendChild(a);else{const e=document.createElement("span");render(a,e),s.appendChild(e)}return s}if("object"==typeof e&&null!==e){const r=new TreeBranch;return r.value=e,r.key=t,r.currentDepth=s,r.maxDepth=a,r}return html`<span class="d-b primitive">${null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:""}${e}</span>`}}window.customElements.define("k-tree",Tree);export class TreeBranch extends ShadowComponent{static properties={value:{type:Object},key:{type:String},currentDepth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.value=null,this.key=null,this.currentDepth=0,this.maxDepth=0,this.opened=!1}connectedCallback(){super.connectedCallback(),this.currentDepth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};render(){const e=null!==this.key?`${this.key}: `:"",t=Array.isArray(this.value)?"Array":"Object";return html`
 			<div>
-				<div class="branch-label" @click=${this.toggle}>
+				<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
 					<k-icon name="chevron-right" class="toggle-icon ${this.opened?"opened":""}"></k-icon>
 					${e}${t}
-				</div>
+				</button>
 				${this.opened?html`
 					<div class="pl">
 						${this.value?(Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)).map(([e,t])=>Tree.renderValue(t,e,this.currentDepth+1,this.maxDepth)):""}
@@ -23,11 +23,19 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"..
 			display: block;
 		}
 		.branch-label{
+			display: block;
+			width: 100%;
 			cursor: pointer;
 		}
 		.branch-label:hover{
 			background-color: var(--c_bg__alt, #f5f5f5);
 		}
+		.branch-label:focus{
+			box-shadow: none;
+		}
+		.branch-label:focus-visible{
+			box-shadow: var(--focus_shadow);
+		}
 		.toggle-icon{
 			transition: transform var(--animation_ms, 200ms);
 		}

package/docs/components/accordion.html

@@ -4,8 +4,8 @@
   <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="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.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 type="module" src="./init.js"></script>
 </head>
@@ -154,7 +154,6 @@
     
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
 </body>
 </html>

package/docs/components/card.html

@@ -4,8 +4,8 @@
   <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="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.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 type="module" src="./init.js"></script>
 </head>
@@ -80,7 +80,6 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
   <script type="module" src="../src/components/Card.js"></script> 
 </body>
 </html>

package/docs/components/collapsible.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Collapsible - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <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 type="module" src="./init.js"></script>
 </head>
@@ -186,7 +186,6 @@
     
   </main>
 	<div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
   <script type="module" src="../src/components/Collapsible.js"></script> 
 </body>
 </html>

package/docs/components/content-slider.html

@@ -4,8 +4,8 @@
   <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="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.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 type="module" src="./init.js"></script>
 </head>
@@ -211,7 +211,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> 
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/ContentSlider.js"></script> 
 </body>
 </html>

package/docs/components/dialog.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dialog - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <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 type="module" src="./init.js"></script>
 </head>
@@ -22,10 +22,12 @@
         <a href="#titles">Titles</a><br />
         <a href="#actionButtons">Action Buttons</a><br />
         <a href="#jsUsage">JavaScript Usage</a><br />
+        <a href="#confirmDialog">Confirm Dialog</a><br />
         
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
+        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
         <a href="#staticMethods">Static Methods</a><br />
@@ -34,7 +36,7 @@
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Create dialogs using the <code>k-dialog</code> component. Open the dialog by calling the <code>open()</code> method, and close it by calling the <code>close()</code> method. Or it can be closed using the dialog's GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</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">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"doument.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</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">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
     <button class="openDialog mb" data-dialog="d1" slot="right">Open Dialog</button>
     <k-dialog id="d1">
       <p class="p">Hello World</p>
@@ -88,9 +90,239 @@
 
     <h3 id="jsUsage"><a href="#jsUsage" class="no-link">JavaScript Usage</a></h3>
     <h5>Create Dialog</h5>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'&lt;p&gt;Hello World&lt;/p&gt;'</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'Hello World'</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <button id="d7" class="mb">Open Dialog</button>
-    <script type="module" src="./init.js"></script> 
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d7').addEventListener('click', () => {
+        Dialog.create('Hello World');
+      });
+    </script>
+
+    <h5>Dialog with Title</h5>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7b"</span>&gt;</span>Open Dialog with Title<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7b'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'This is the dialog content'</span>, {<br />      <span class="hljs-attr">title</span>: <span class="hljs-string">'My Dialog Title'</span><br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <button id="d7b" class="mb">Open Dialog with Title</button>
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d7b').addEventListener('click', () => {
+        Dialog.create('This is the dialog content', {
+          title: 'My Dialog Title'
+        });
+      });
+    </script>
+
+    <h5>Error Dialog</h5>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d8"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d8'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.error(<span class="hljs-string">"Oh no, don't do that!"</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <button id="d8" class="mb">Open Dialog</button>
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d8').addEventListener('click', () => {
+        Dialog.error("Oh no, don't do that!");
+      });
+    </script>
+
+    <h3 id="confirmDialog"><a href="#confirmDialog" class="no-link">Confirm Dialog</a></h3>
+    <p>Use the <code>Dialog.confirm</code> static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d9"</span>&gt;</span>Open Confirm Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d9'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.confirm(<span class="hljs-string">"Are you sure you want to proceed?"</span>, <span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {<br />      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"User response:"</span>, response);<br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <button id="d9" class="mb">Open Confirm Dialog</button>
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d9').addEventListener('click', () => {
+        Dialog.confirm("Are you sure you want to proceed?", response => {
+          console.log("User response:", response);
+        });
+      });
+    </script>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new Dialog()</code><br />
+      <code>new Dialog(<i>object</i> options)</code>
+    </h5>
+
+    <h4>Parameters</h4>
+    <h5><code>options<i>: object</i></code></h5>
+    <p>An object containing the initial configuration for the dialog. The options object can contain the following properties:</p>
+    <ul>
+      <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened.</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
+      <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
+      <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
+      <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
+    </ul>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a></li>
+      <li><a href="./focus-capture.html">FocusCapture</a></li>
+    </ul>
+
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the dialog is opened.</p>
+    
+    <h5><code>close-btn<i>: boolean</i></code></h5>
+    <p>Whether to show the close button. Default is <code>true</code>.</p>
+    
+    <h5><code>overlay-close<i>: boolean</i></code></h5>
+    <p>Whether clicking the overlay closes the dialog. Default is <code>true</code>.</p>
+    
+    <h5><code>confirm-text<i>: string</i></code></h5>
+    <p>Text for the confirm button.</p>
+    
+    <h5><code>confirm-classes<i>: string</i></code></h5>
+    <p>Classes for the confirm button. Default is <code>'success ml'</code>.</p>
+    
+    <h5><code>cancel-text<i>: string</i></code></h5>
+    <p>Text for the cancel button.</p>
+    
+    <h5><code>cancel-classes<i>: string</i></code></h5>
+    <p>Classes for the cancel button.</p>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>confirmAction<i>: function</i></code></h5>
+    <p>Action to perform on confirm. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
+    
+    <h5><code>cancelAction<i>: function</i></code></h5>
+    <p>Action to perform on cancel. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
+    
+    <h5><code>closeCallback<i>: function</i></code></h5>
+    <p>Callback to execute when the dialog is closed.</p>
+    
+    <h5><code>previousFocus<i>: HTMLElement</i></code></h5>
+    <p>Reference to the element that had focus before the dialog was opened.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>open()<i>: void</i></code></h5>
+    <p>Opens the dialog and sets focus to the first focusable element or an element with the <code>autofocus</code> attribute.</p>
+    
+    <h5><code>close()<i>: void</i></code></h5>
+    <p>Closes the dialog and calls the <code>closeCallback</code>.</p>
+    
+    <h5><code>toggle()<i>: void</i></code></h5>
+    <p>Toggles the dialog open or closed.</p>
+    
+    <h5><code>focus()<i>: void</i></code></h5>
+    <p>Focuses the first focusable element in the dialog and saves the previously focused element.</p>
+    
+    <h5><code>blur()<i>: void</i></code></h5>
+    <p>Returns focus to the element that had focus before the dialog was opened.</p>
+
+    <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <h5><code>Dialog.create(contents, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a new dialog with the specified contents and options. Returns the created Dialog instance.</p>
+    <p>If <code>contents</code> is plain text (no HTML tags), it will automatically be wrapped in a <code>&lt;p class="p"&gt;</code> tag. If it contains HTML, it will be inserted as-is. If it's an HTMLElement or DocumentFragment, it will be appended directly.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>contents<i>: string | HTMLElement | DocumentFragment</i></code> - The content to display in the dialog. Plain text will be wrapped in a paragraph tag automatically.</li>
+      <li><code>options<i>: object</i></code> - Configuration options for the dialog.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string | HTMLElement</i> - The title to display in the dialog header. Will be wrapped in an <code>&lt;h5&gt;</code> tag with the <code>title</code> slot.</li>
+      <li><code>titleClasses</code>: <i>string</i> - CSS classes for the title element. Default is <code>'pyh px m0'</code>.</li>
+      <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened. Default is <code>true</code>.</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
+      <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
+      <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
+      <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
+      <li><code>removeOnClose</code>: <i>boolean</i> - Whether to remove the dialog from the DOM when closed. Default is <code>true</code>.</li>
+      <li><code>closeExisting</code>: <i>boolean</i> - Whether to close existing dialogs before opening this one. Default is <code>true</code>.</li>
+      <li><code>width</code>: <i>string</i> - CSS width value for the dialog.</li>
+      <li><code>minWidth</code>: <i>string</i> - CSS min-width value for the dialog.</li>
+      <li><code>maxWidth</code>: <i>string</i> - CSS max-width value for the dialog.</li>
+      <li><code>height</code>: <i>string</i> - CSS height value for the dialog.</li>
+      <li><code>minHeight</code>: <i>string</i> - CSS min-height value for the dialog.</li>
+      <li><code>maxHeight</code>: <i>string</i> - CSS max-height value for the dialog.</li>
+    </ul>
+    
+    <h5><code>Dialog.confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a confirmation dialog with the specified text and options. The response callback receives a boolean value indicating whether the user confirmed (<code>true</code>) or canceled (<code>false</code>).</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called with the user's response (<code>true</code> for confirm, <code>false</code> for cancel).</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Confirm'</code>.</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button. Default is <code>'Yes'</code>.</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button. Default is <code>'success ml'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button. Default is <code>'No'</code>.</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button. Default is <code>'danger'</code>.</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button. Default is <code>false</code>.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog. Default is <code>false</code>.</li>
+    </ul>
+    
+    <h5><code>Dialog.alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an alert dialog with the specified text and options.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Alert'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+    
+    <h5><code>Dialog.error(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an error dialog with the specified text and options. The title is displayed in red.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The error message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Error'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+    
+    <h5><code>Dialog.success(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a success dialog with the specified text and options. The title is displayed in green.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The success message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Success'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+
+  </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Dialog.js"></script> 
   <script>
     document.querySelectorAll('.openDialog').forEach( $btn => {

package/docs/components/focus-capture.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>FocusCapture - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <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 type="module" src="./init.js"></script>
 </head>
@@ -101,7 +101,6 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
   <script type="module" src="../src/components/FocusCapture.js"></script> 
   <script type="module" src="../src/components/Dialog.js"></script> 
 </body>

package/docs/components/hybrid-component.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <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 type="module" src="./init.js"></script>
 </head>
@@ -103,6 +103,5 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
 </body>
 </html>