kempo-ui 0.1.6 → 0.2.1

package/docs/src/components/Aside.js

@@ -0,0 +1,326 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
+				<k-focus-capture>
+					<div id="container">
+						<button id="overlay-btn" @click=${this.overlayClick}>
+							<div id="overlay-x"><k-icon name="close"></k-icon></div>
+						</button>
+						${e}
+					</div>
+				</k-focus-capture>
+			`:e}static styles=css`
+		:host {
+			--bg: var(--c_bg);
+			--border: var(--c_border);
+			--width: 20rem;
+			--collapsed-width: 3.5rem;
+			position: fixed;
+			top: 0;
+			height: 100vh;
+			pointer-events: none;
+		}
+		:host([main="push"]) {
+			left: 0;
+			z-index: 30;
+			transition: width var(--animation_ms, 256ms);
+		}
+		:host([main="push"][side="right"]) {
+			left: auto;
+			right: 0;
+		}
+		:host([main="push"][state="collapsed"]) {
+			width: var(--collapsed-width);
+			pointer-events: auto;
+		}
+		:host([main="push"][state="expanded"]) {
+			width: var(--width);
+			pointer-events: auto;
+		}
+		:host([main="overlay"]) {
+			left: 0;
+			width: 100vw;
+			max-width: 100%;
+			z-index: 60;
+			overflow: hidden;
+		}
+		:host([main="overlay"][state="expanded"]) {
+			pointer-events: auto;
+		}
+		k-focus-capture {
+			width: 100%;
+			height: 100%;
+		}
+		#container {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+		#overlay-btn {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			background: var(--overlay, rgba(0, 0, 0, 0.5));
+			border: none;
+			padding: 0;
+			cursor: pointer;
+			z-index: 1;
+			opacity: 0;
+			transition: opacity var(--animation_ms, 256ms);
+		}
+		:host([state="expanded"]) #overlay-btn {
+			opacity: 1;
+		}
+		#overlay-x {
+			position: absolute;
+			top: var(--spacer_h);
+			right: var(--spacer_h);
+			font-size: 1.75rem;
+			cursor: pointer;
+			color: var(--tc_light);
+		}
+		:host([overlay-close="false"]) #overlay-x {
+			display: none;
+		}
+		:host([overlay-close="false"]) #overlay-btn {
+			cursor: default;
+		}
+		:host([side="right"]) #overlay-x {
+			right: auto;
+			left: var(--spacer_h);
+		}
+		aside {
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100vh;
+			overflow-y: auto;
+			overflow-x: hidden;
+			background: var(--bg);
+			padding: var(--aside_padding, var(--spacer));
+			z-index: 2;
+			box-sizing: border-box;
+			border-right: 1px solid var(--border);
+			transition: width var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);
+		}
+		:host([side="right"]) aside {
+			left: auto;
+			right: 0;
+			border-right: none;
+			border-left: 1px solid var(--border);
+		}
+		:host([main="push"]) aside {
+			position: absolute;
+			width: var(--width);
+			transform: translateX(-100%);
+		}
+		:host([main="push"][side="right"]) aside {
+			transform: translateX(100%);
+		}
+		:host([main="push"][state="collapsed"]) aside {
+			width: var(--collapsed-width);
+			transform: translateX(0);
+		}
+		:host([main="push"][state="expanded"]) aside {
+			transform: translateX(0);
+		}
+		:host([main="overlay"]) aside {
+			width: var(--width);
+			max-width: calc(100vw - 6rem);
+			border: none;
+			transform: translateX(-100%);
+		}
+		:host([main="overlay"][state="expanded"]) aside {
+			transform: translateX(0);
+		}
+		:host([main="overlay"][side="right"]) aside {
+			transform: translateX(100%);
+		}
+		:host([main="overlay"][side="right"][state="expanded"]) aside {
+			transform: translateX(0);
+		}
+	`}customElements.define("k-aside",Aside);class AsideItem 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.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?this.collapsed=!0:"expanded"===t&&(this.collapsed=!1)};handleClick=e=>{this.collapsed&&!this["no-expand"]&&this.aside&&(e.preventDefault(),this.aside.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(--tc);
+			text-decoration: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			transition: background var(--animation_ms), color var(--animation_ms);
+			white-space: nowrap;
+		}
+		.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 AsideLabel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0}};constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?this.collapsed=!0:"expanded"===t&&(this.collapsed=!1)};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 AsideMenu 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.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?(this.collapsed=!0,this.open=!1):"expanded"===t&&(this.collapsed=!1)};toggleMenu=()=>{this.collapsed&&!this["no-expand"]&&this.aside?this.aside.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-header {
+			display: flex !important;
+			align-items: center;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h) !important;
+			color: var(--tc);
+			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 AsideSpacer extends ShadowComponent{render(){return html`<div></div>`}static styles=css`
+		:host {
+			display: block;
+			flex: 1;
+		}
+	`}class AsideToggle extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},direction:{type:String}};constructor(){super(),this.collapsed=!1,this.direction="left"}connectedCallback(){super.connectedCallback(),this.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.updateDirection(),this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?this.collapsed=!0:"expanded"===t&&(this.collapsed=!1),this.updateDirection()};handleClick=()=>{this.aside&&(this.aside.state="collapsed"===this.aside.state?"expanded":"collapsed")};updateDirection=()=>{const e="right"===this.aside?.side;this.direction=this.collapsed!==e?"right":"left"};render(){return html`
+			<div id="header">
+				<slot></slot>
+				<button id="toggle" @click=${this.handleClick}>
+					<k-icon name="arrow-line" direction=${this.direction}></k-icon>
+				</button>
+			</div>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		#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(*) {
+			margin-right: auto;
+			flex: 1;
+			min-width: 0;
+		}
+		:host([collapsed]) ::slotted(*) {
+			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);
+			padding: 0;
+		}
+		#toggle:hover {
+			background: var(--c_bg_hover);
+		}
+	`}customElements.define("k-aside-item",AsideItem),customElements.define("k-aside-label",AsideLabel),customElements.define("k-aside-menu",AsideMenu),customElements.define("k-aside-spacer",AsideSpacer),customElements.define("k-aside-toggle",AsideToggle);

package/docs/src/components/Dialog.js

@@ -5,7 +5,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			left: 0;
 			width: 100vw;
 			height: 100vh;
-			z-index: 100;
+			z-index: 80;
 			display: none;
 			justify-content: center;
 			align-items: center;

package/docs/src/components/Dropdown.js

@@ -11,7 +11,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			display: none;
 			position: fixed;
 			position-anchor: --dropdown-trigger;
-			z-index: 1000;
+			z-index: 70;
 			min-width: anchor-size(width);
 			background: var(--c_bg);
 			border: 1px solid var(--c_border);

package/docs/src/components/Main.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={leftPanelWidth:{type:String,state:!0},rightPanelWidth:{type:String,state:!0}};constructor(){super(),this.leftPanelWidth="0px",this.rightPanelWidth="0px",this.handlePanelChange=this.handlePanelChange.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("side-panel-change",this.handlePanelChange);const t=document.querySelector('k-side-panel:not([side="right"])');t&&(this.leftPanelWidth=t.collapsed?"3.5rem":"16rem");const e=document.querySelector('k-side-panel[side="right"]');e&&(this.rightPanelWidth=e.collapsed?"3.5rem":"16rem")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("side-panel-change",this.handlePanelChange)}handlePanelChange(t){"right"===t.detail.side?this.rightPanelWidth=t.detail.width:this.leftPanelWidth=t.detail.width}render(){return html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:s}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:s}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
 			<main>
 				<slot></slot>
 			</main>
@@ -17,4 +17,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			padding-left: var(--spacer);
 			padding-right: var(--spacer);
 		}
-	`;updated(){super.updated(),this.style.setProperty("--left-panel-width",this.leftPanelWidth),this.style.setProperty("--right-panel-width",this.rightPanelWidth)}}window.customElements.define("k-main",Main);
+	`}window.customElements.define("k-main",Main);

package/docs/src/components/Nav.js

@@ -0,0 +1,27 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Nav extends ShadowComponent{static properties={fixed:{type:Boolean,reflect:!0}};constructor(){super(),this.fixed=!1}render(){return html`<nav><slot></slot></nav>`}static styles=css`
+    :host {
+      display: block;
+    }
+    :host([fixed]) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 50;
+    }
+    nav {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+    ::slotted(a) {
+      display: inline-block;
+      padding: var(--spacer);
+      text-decoration: none !important;
+    }
+    ::slotted(.link) {
+      display: inline-block;
+      padding: var(--spacer) !important;
+      text-decoration: none !important;
+    }
+  `}customElements.define("k-nav",Nav);

package/docs/src/components/PhotoViewer.js

@@ -23,7 +23,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			left: 0;
 			right: 0;
 			bottom: 0;
-			z-index: 9999;
+			z-index: 80;
 			background: rgba(0,0,0,0.9);
 			padding: 2rem;
 			display: none;

package/docs/src/components/ShadowComponent.js

@@ -1 +1 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}
+import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}

package/docs/src/components/ThemeSwitcher.js

@@ -19,5 +19,6 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		}
 		button.no-btn {
 			padding: var(--padding);
+			border-radius: var(--radius);
 		}
 	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-switcher",ThemeSwitcher);

package/docs/src/components/Toast.js

@@ -138,4 +138,4 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       <button id="close" class="no-style" @click="${this.handleCloseClick}">
         <slot name="close"></slot>
       </button>
-    `}static create(t,o={}){let{position:e="auto",removeOnClose:n=!0,closeCallback:s=()=>{},action:a=!1,close:i=!1,icon:r=!1,timeout:c=5e3}=o;"auto"===e&&(e=window.innerWidth<=768?"bottom center":"top right");let l=document.querySelector(`k-toast-container[position="${e}"]`);l||(l=new ToastContainer(e),document.body.appendChild(l));const m=new Toast;m.position=e,m.timeout=c,m.innerHTML=t,m.actionCallback=o.actionCallback||(()=>{});const h=s;if(m.closeCallback=(...t)=>{n&&(m.remove(),0===l.children.length&&l.remove()),h(...t)},r){const t=document.createElement("span");t.slot="icon",r instanceof HTMLElement?t.appendChild(r):t.innerHTML=r,m.appendChild(t)}if(a){const t=document.createElement("span");t.slot="action",a instanceof HTMLElement?t.appendChild(a):t.innerHTML=a,m.appendChild(t)}if(i){const t=document.createElement("span");t.slot="close",i instanceof HTMLElement?t.appendChild(i):t.innerHTML=i,m.appendChild(t)}return l.appendChild(m),m.open(),m}static success(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="check"></k-icon>',...o});return e.classList.add("bg-success"),e}static warning(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="warning"></k-icon>',...o});return e.classList.add("bg-warning"),e}static error(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="error"></k-icon>',...o});return e.classList.add("bg-danger"),e}}class ToastContainer extends HTMLElement{constructor(t="bottom center"){super(),this.position=t.toLowerCase(),this.setAttribute("position",this.position),this.applyStyles()}applyStyles(){this.style.cssText="\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      z-index: 1000;\n      pointer-events: auto;\n      padding: 32px;\n      box-sizing: border-box;\n      max-width: 100%;\n      max-height: 100%;\n      overflow: visible;\n    ";new MutationObserver(()=>{Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")})}).observe(this,{childList:!0}),Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")});const[t,o]=this.position.split(" ");"top"===t?this.style.top="0":this.style.bottom="0","left"===o?(this.style.left="0",this.style.alignItems="flex-start"):"right"===o?(this.style.right="0",this.style.alignItems="flex-end"):"center"===o&&("top"===t||"bottom"===t?(this.style.left="50%",this.style.transform="translateX(-50%)",this.style.alignItems="center"):(this.style.top="50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"))}static getContainer(t){let o=document.querySelector(`k-toast-container[position="${t}"]`);return o||(o=new ToastContainer(t),document.body.appendChild(o)),o}}window.customElements.define("k-toast",Toast),window.customElements.define("k-toast-container",ToastContainer);
+    `}static create(t,o={}){let{position:e="auto",removeOnClose:n=!0,closeCallback:s=()=>{},action:a=!1,close:i=!1,icon:r=!1,timeout:c=5e3}=o;"auto"===e&&(e=window.innerWidth<=768?"bottom center":"top right");let l=document.querySelector(`k-toast-container[position="${e}"]`);l||(l=new ToastContainer(e),document.body.appendChild(l));const m=new Toast;m.position=e,m.timeout=c,m.innerHTML=t,m.actionCallback=o.actionCallback||(()=>{});const h=s;if(m.closeCallback=(...t)=>{n&&(m.remove(),0===l.children.length&&l.remove()),h(...t)},r){const t=document.createElement("span");t.slot="icon",r instanceof HTMLElement?t.appendChild(r):t.innerHTML=r,m.appendChild(t)}if(a){const t=document.createElement("span");t.slot="action",a instanceof HTMLElement?t.appendChild(a):t.innerHTML=a,m.appendChild(t)}if(i){const t=document.createElement("span");t.slot="close",i instanceof HTMLElement?t.appendChild(i):t.innerHTML=i,m.appendChild(t)}return l.appendChild(m),m.open(),m}static success(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="check"></k-icon>',...o});return e.classList.add("bg-success"),e}static warning(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="warning"></k-icon>',...o});return e.classList.add("bg-warning"),e}static error(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="error"></k-icon>',...o});return e.classList.add("bg-danger"),e}}class ToastContainer extends HTMLElement{constructor(t="bottom center"){super(),this.position=t.toLowerCase(),this.setAttribute("position",this.position),this.applyStyles()}applyStyles(){this.style.cssText="\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      z-index: 90;\n      pointer-events: auto;\n      padding: 32px;\n      box-sizing: border-box;\n      max-width: 100%;\n      max-height: 100%;\n      overflow: visible;\n    ";new MutationObserver(()=>{Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")})}).observe(this,{childList:!0}),Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")});const[t,o]=this.position.split(" ");"top"===t?this.style.top="0":this.style.bottom="0","left"===o?(this.style.left="0",this.style.alignItems="flex-start"):"right"===o?(this.style.right="0",this.style.alignItems="flex-end"):"center"===o&&("top"===t||"bottom"===t?(this.style.left="50%",this.style.transform="translateX(-50%)",this.style.alignItems="center"):(this.style.top="50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"))}static getContainer(t){let o=document.querySelector(`k-toast-container[position="${t}"]`);return o||(o=new ToastContainer(t),document.body.appendChild(o)),o}}window.customElements.define("k-toast",Toast),window.customElements.define("k-toast-container",ToastContainer);

package/docs/utils/context.html

@@ -7,14 +7,14 @@
   <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="https://cdn.jsdelivr.net/npm/kempo-css@2/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>
-  <main>
+  <k-main>
     <h1>Context Utility</h1>
     
     <k-accordion persistent-id="toc" class="b r mb">
@@ -129,9 +129,10 @@ counterContext.subscribe(<span class="hljs-function">(<span class="hljs-params">
       </div>
     </div>
 
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
   <script type="module">

package/docs/utils/cookie.html

@@ -7,7 +7,7 @@
 	<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="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
 	<link rel="stylesheet" href="../kempo-hljs.css" />
 	<link rel="stylesheet" href="../styles.css" />
 	<script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 </head>
 <body>
 	<k-import src="../nav-1.inc.html"></k-import>
-	<main>
+	<k-main>
 		<h1>Cookie Utilities</h1>
 
 		<k-accordion persistent-id="toc" class="b r mb">
@@ -105,9 +105,10 @@ document.getElementById(<span class="hljs-string">'delete-btn'</span>).addEventL
 		<p>Deletes a cookie by setting its expiration to a past date.</p>
 		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { deleteCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;<br /><br />deleteCookie(<span class="hljs-string">'userId'</span>);</code></pre>
 
-	</main>
+	</k-main>
 	<div style="height:33vh"></div>
 	<script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
 	<script type="module" src="../src/components/Accordion.js"></script>
 	<script type="module" src="../src/components/Card.js"></script>
 	<script type="module">

package/docs/utils/debounce.html

@@ -7,14 +7,14 @@
   <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="https://cdn.jsdelivr.net/npm/kempo-css@2/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>
-  <main>
+  <k-main>
     <h1>debounce</h1>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
@@ -50,9 +50,10 @@
     <h4>Window Resize Handler</h4>
     <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> debouncedResize = debounce(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />  <span class="hljs-comment">// Expensive layout calculations</span><br />  recalculateLayout();<br />}, <span class="hljs-number">250</span>);<br /><br /><span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'resize'</span>, debouncedResize);</code></pre>
 
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
 </body>
 </html>

package/docs/utils/drag.html

@@ -7,14 +7,14 @@
   <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="https://cdn.jsdelivr.net/npm/kempo-css@2/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>
-  <main>
+  <k-main>
     <h1>drag</h1>
 
     <k-accordion persistent-id="toc" class="b r mb">
@@ -72,9 +72,10 @@
     <h4>Component with Cleanup</h4>
     <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> drag <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/drag.js'</span>;<br /><br /><span class="hljs-keyword">class</span> <span class="hljs-title class_">DraggableComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br />  <span class="hljs-title function_">constructor</span>() {<br />    <span class="hljs-variable language_">super</span>();<br />    <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-literal">null</span>;<br />  }<br /><br />  <span class="hljs-title function_">firstUpdated</span>() {<br />    <span class="hljs-keyword">const</span> handle = <span class="hljs-variable language_">this</span>.shadowRoot.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.drag-handle'</span>);<br />    <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-title function_">drag</span>({<br />      <span class="hljs-attr">element</span>: handle,<br />      <span class="hljs-attr">moveCallback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =&gt;</span> {<br />        <span class="hljs-variable language_">this</span>.style.transform = <span class="hljs-string">`translate(<span class="hljs-subst">${diff.x}</span>px, <span class="hljs-subst">${diff.y}</span>px)`</span>;<br />      }<br />    });<br />  }<br /><br />  <span class="hljs-title function_">disconnectedCallback</span>() {<br />    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">disconnectedCallback</span>();<br />    <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.cleanupDrag) {<br />      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cleanupDrag</span>();<br />      <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-literal">null</span>;<br />    }<br />  }<br />}</code></pre>
 
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
 </body>
 </html>