kempo-ui 0.0.3 → 0.0.5

package/docs/src/components/Dialog.js

@@ -0,0 +1,120 @@
+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`
+		:host {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			height: 100vh;
+			z-index: 100;
+			display: none;
+			justify-content: center;
+			align-items: center;
+		}
+		:host([opened]) {
+			display: flex;
+		}
+		#overlay {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			background-color: var(--c_overlay);
+			border: 0px solid transparent;
+			box-shadow: 0 0 0 transparent;
+		}
+		#wrapper {
+			position: relative;
+			z-index: 1;
+			pointer-events: none;
+		}
+		#dialog {
+			display: flex;
+			flex-direction: column;
+			min-width: var(--min_width, 20rem);
+			width: var(--width, fit-content);
+			max-width: var(--max_width, calc(100vw - 4rem));
+			min-height: var(--min_height, 12rem);
+			height: var(--height, fit-content);
+			max-height: var(--max_height, calc(100vh - 4rem));
+			background-color: var(--c_bg);
+			box-shadow: var(--drop_shadow);
+			border-radius: var(--radius);
+			pointer-events: all;
+		}
+		#header {
+			display: flex;
+			align-items: center;
+		}
+		#header.has-title {
+			border-bottom: 1px solid var(--c_border);
+		}
+		#title {
+			flex: 1 1 auto;
+		}
+		#close {
+			border: 0px;
+			background: transparent;
+			box-shadow: 0 0 0 transparent;
+			color: var(--tc);
+			transition: box-shadow var(--animation_ms);
+			border-radius: var(--radius);
+		}
+		#close:focus {
+			box-shadow: var(--focus_shadow);
+		}
+		#close k-icon {
+			pointer-events: none;
+		}
+		#body {
+			flex: 1 1 auto;
+		}
+		#footer {
+			display: flex;
+			justify-content: flex-end;
+			padding: var(--spacer_h);
+		}
+	`;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>
+						<div
+							id="header"
+							class="${this.hasTitle()?"has-title":""}"
+						>
+							<div id="title">
+								<slot name="title"></slot>
+							</div>
+							${this.closeBtn?html`
+								<button id="close" @click=${this.handleClick}>
+									<k-icon name="close"></k-icon>
+								</button>
+							`:""}
+						</div>
+						<div id="body">
+							<slot></slot>
+						</div>
+						${this.cancelText||this.confirmText?html`
+							<div id="footer">
+								${this.cancelText?html`
+									<button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
+										${this.cancelText}
+									</button>
+								`:""}
+								${this.confirmText?html`
+									<button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
+										${this.confirmText}
+									</button>
+								`:""}
+							</div>
+						`:""}
+					</k-focus-capture>
+				</div>
+			</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);

package/docs/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(){super(),this.src="",this.name="",this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon(),t.has("iconContent")&&this.fixSVG()}async loadIcon(){let t;this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),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(),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`
 		:host {
 			display: inline-block;
 			vertical-align: bottom;
@@ -7,4 +7,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}fro
 			height: 1.35em;
 			vertical-align: middle;
 		}
-	`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html``}static pathToIcons=["/icons"];static fallback='\n\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n\t'}window.customElements.define("k-icon",Icon);
+	`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["/icons"];static fallback='\n\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n\t'}window.customElements.define("k-icon",Icon);

package/docs/src/components/PersistantCollapsible.js

@@ -0,0 +1 @@
+import Collapsible from"./Collapsible.js";export default class PersistantCollapsible extends Collapsible{constructor(){super(),this.storageKey=""}connectedCallback(){super.connectedCallback(),this.updateStorageKey(),this.loadFromStorage(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}updated(e){super.updated(e),e.has("opened")&&this.saveToStorage(),e.has("id")&&(this.updateStorageKey(),this.loadFromStorage())}handleStorageChange=e=>{e.key===this.storageKey&&this.loadFromStorage()};updateStorageKey(){this.storageKey=this.id?`PersistantCollapsible-${this.id}`:""}loadFromStorage(){if(this.storageKey){const e=localStorage.getItem(this.storageKey);null!==e&&(this.opened="true"===e)}}saveToStorage(){this.storageKey&&localStorage.setItem(this.storageKey,this.opened.toString())}}customElements.define("k-p-collapsible",PersistantCollapsible);

package/docs/src/components/PhotoViewer.js

@@ -0,0 +1,135 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";export default class PhotoViewer extends ShadowComponent{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:boolExists},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:boolExists},global:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter(e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=css`
+		:host {
+			display: block;
+		}
+		#wrapper {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+		#img {
+			max-width: 100%;
+			height: auto;
+			cursor: pointer;
+			outline: none;
+			border-radius: var(--img_radius, 0);
+		}
+		#img:focus {
+			box-shadow: var(--focus_shadow);
+		}
+		#fullscreen-overlay {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 9999;
+			background: rgba(0,0,0,0.9);
+			padding: 2rem;
+			display: none;
+		}
+		:host([fullscreen]) #fullscreen-overlay {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.content {
+			position: relative;
+			max-width: 100%;
+			max-height: 90vh;
+		}
+		#fullscreen-img {
+			max-height: 75vh;
+			max-width: 100%;
+			object-fit: contain;
+			cursor: default;
+		}
+		#close {
+			position: absolute;
+			top: 1rem;
+			right: 1rem;
+			z-index: 1;
+			background: none;
+			border: none;
+			color: white;
+			cursor: pointer;
+		}
+		.nav-btn {
+			position: fixed;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: 1;
+			background: none;
+			border: none;
+			color: white;
+			cursor: pointer;
+			padding: 1rem;
+			opacity: 0.7;
+			font-size: 3rem;
+			-webkit-text-stroke: 1px black;
+			text-stroke: 1px black;
+			text-shadow: 0 0 3px rgba(0,0,0,0.8);
+		}
+		.nav-btn::slotted(*),
+		.nav-btn k-icon {
+			filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));
+		}
+		.nav-btn:hover {
+			opacity: 1;
+		}
+		#prev {
+			left: 1rem;
+		}
+		#next {
+			right: 1rem;
+		}
+		.caption {
+			text-align: center;
+			max-width: 600px;
+			width: fit-content;
+			margin: 1rem auto 0;
+		}
+		#fullscreen-overlay .caption {
+			color: white;
+		}
+		:host([fullscreen]) .caption {
+			color: white;
+		}
+	`;render(){return html`
+			<div id="wrapper">
+				<img 
+					id="img" 
+					src="${this.src}" 
+					alt="${this.alt}" 
+					tabindex="0"
+					@click=${this.handleImageClick}
+					@keydown=${this.handleImageKeydown}
+				/>
+				<div class="caption">
+					<slot></slot>
+				</div>
+				<div id="fullscreen-overlay" @click=${this.handleOverlayClick}>
+					<button id="close" class="no-btn" @click=${this.handleCloseClick}>
+						<slot name="close">
+							<k-icon name="close"></k-icon>
+						</slot>
+					</button>
+					<button id="prev" class="nav-btn no-btn" @click=${this.handlePrevClick}>
+						<slot name="prev">
+							<k-icon name="chevron-left"></k-icon>
+						</slot>
+					</button>
+					<button id="next" class="nav-btn no-btn" @click=${this.handleNextClick}>
+						<slot name="next">
+							<k-icon name="chevron-right"></k-icon>
+						</slot>
+					</button>
+					<div class="content">
+						<img id="fullscreen-img" src="${this.src}" alt="${this.alt}" />
+						<div class="caption">
+							<slot name="fullscreen-caption"></slot>
+						</div>
+					</div>
+				</div>
+			</div>
+		`}}customElements.define("k-photo-viewer",PhotoViewer);

package/docs/src/components/Resize.js

@@ -0,0 +1,96 @@
+import{LitElement,html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import Icon from"./Icon.js";import drag from"../utils/drag.js";export default class Resize extends ShadowComponent{static properties={resizing:{type:String,reflect:!0},dimention:{type:String,reflect:!0}};constructor(){super(),this.resizing="",this.dimension="",this.startSize={width:0,height:0},this.cleanupFuncs=[]}firstUpdated(){super.firstUpdated(),this.setupDragHandlers()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFuncs.forEach(e=>e())}dragStartHandler=({element:e})=>{const{width:t,height:i}=this.getBoundingClientRect();this.startSize.width=t,this.startSize.height=i,this.resizing=e.id};dragEndHandler=()=>{this.resizing=""};dragSideHandler=({x:e})=>{this.style.width=this.startSize.width+e+"px"};dragBottomHandler=({y:e})=>{this.style.height=this.startSize.height+e+"px"};dragCornerHandler=({x:e,y:t})=>{this.style.width=this.startSize.width+e+"px",this.style.height=this.startSize.height+t+"px"};setupDragHandlers(){const e=this.shadowRoot.getElementById("side"),t=this.shadowRoot.getElementById("bottom"),i=this.shadowRoot.getElementById("corner");e&&this.cleanupFuncs.push(drag({element:e,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragSideHandler,preventScroll:!0})),t&&this.cleanupFuncs.push(drag({element:t,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragBottomHandler,preventScroll:!0})),i&&this.cleanupFuncs.push(drag({element:i,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragCornerHandler,preventScroll:!0}))}static styles=css`
+		:host {
+			--handle_size: 1rem;
+
+			display: grid;
+			grid-template-columns: 1fr var(--handle_size);
+			grid-template-rows: 1fr var(--handle_size);
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			min-width: 10rem;
+			max-width: 100%;
+			min-height: 10rem;
+			max-height: 100%;
+		}
+		:host([dimension="height"]) {
+			grid-template-columns: 1fr;
+		}
+		:host([dimension="width"]) {
+			grid-template-rows: 1fr;
+		}
+		#main {
+			grid-row: 1;
+			grid-column: 1;
+			overflow: auto;
+		}
+		#side {
+			grid-row: 1;
+			grid-column: 2;
+			cursor: ew-resize;
+		}
+		#bottom {
+			grid-row: 2;
+			grid-column: 1;
+			text-align: center;
+			cursor: ns-resize;
+		}
+		#corner {
+			grid-row: 2;
+			grid-column: 2;
+			overflow: hidden;
+			cursor: nwse-resize;
+		}
+		.handle {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.handle svg {
+			transform: scale(0.5);
+		}
+		#bottom svg {
+			height: var(--handle_size);
+		}
+		#side svg {
+			width: var(--handle_size);
+		}
+		#corner svg {
+			width: var(--handle_size);
+			height: var(--handle_size);
+		}
+		:host(:not([resizing=""])) #main {
+			pointer-events: none;
+		}
+		:host([resizing="side"]) #side,
+		:host([resizing="corner"]) #side,
+		:host([resizing="corner"]) #corner,
+		:host([resizing="corner"]) #bottom,
+		:host([resizing="bottom"]) #bottom {
+			background-color: var(--c_highlight);
+		}
+		:host([dimension="height"]) #side,
+		:host([dimension="height"]) #corner,
+		:host([dimension="width"]) #bottom,
+		:host([dimension="width"]) #corner {
+			display: none;
+		}
+	`;render(){return html`
+			<div id="main">
+				<slot></slot>
+			</div>
+			<div id="side" class="handle">
+				<svg viewBox="0 0 15 64" xmlns="http://www.w3.org/2000/svg">
+					<path fill="currentColor" d="m 15.000001,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 -1.384999,0 -2.5,1.338002 -2.5,3 v 58 c 0,1.661998 1.115001,3 2.5,3 1.384999,0 2.5,-1.338002 2.5,-3 z M 5.0000008,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 C 1.1150018,0 7.5891117e-7,1.338002 7.5891117e-7,3 v 58 c 0,1.661998 1.11500104108883,3 2.50000004108883,3 1.384999,0 2.5,-1.338002 2.5,-3 z" />
+				</svg>
+			</div>
+			<div id="bottom" class="handle">
+				<svg viewBox="0 0 64 15" xmlns="http://www.w3.org/2000/svg">
+					<path fill="currentColor" d="M 3,0 C 1.3380017,0 0,1.1150014 0,2.5 0,3.8849986 1.3380017,5 3,5 H 61 C 62.661998,5 64,3.8849986 64,2.5 64,1.1150014 62.661998,0 61,0 Z M 3,10 C 1.3380017,10 0,11.115001 0,12.5 0,13.884999 1.3380017,15 3,15 h 58 c 1.661998,0 3,-1.115001 3,-2.5 C 64,11.115001 62.661998,10 61,10 Z" />
+				</svg>
+			</div>
+			<div id="corner" class="handle">
+				<svg version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+					<path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" />
+				</svg>
+			</div>
+		`}}customElements.define("k-resize",Resize);

package/docs/src/components/ShadowComponent.js

@@ -1 +1 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href="/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{static stylesheetPath="/kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}

package/docs/src/components/ShowMore.js

@@ -0,0 +1,42 @@
+import{LitElement,html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import Icon from"./Icon.js";import{boolExists}from"../utils/propConverters.js";export default class ShowMore extends ShadowComponent{static properties={opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.opened=!1}updated(e){super.updated(e),e.has("opened")&&(this.dispatchEvent(new CustomEvent("change",{detail:{opened:this.opened}})),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed")))}handleToggleClick=()=>{this.toggle()};more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened=!this.opened}static styles=css`
+		:host {
+			--closed_height: 7rem;
+			
+			display: block;
+		}
+		:host(:not([opened])) #content {
+			height: var(--closed_height);
+			overflow-y: hidden;
+		}
+		:host(:not([opened])) #content {
+			margin-bottom: calc(var(--closed_height) * -0.9);
+		}
+		:host(:not([opened])) #toggle {
+			padding-top: calc(var(--closed_height) - 2rem);
+			background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);
+		}
+		#toggle {
+			width: 100%;
+			padding: var(--spacer_h);
+			text-align: center;
+			background: var(--c_bg);
+		}
+		:host([opened]) #more,
+		:host(:not([opened])) #less {
+			display: none;
+		}
+	`;render(){return html`
+			<div id="wrapper">
+				<div id="content">
+					<slot></slot>
+				</div>
+				<button id="toggle" @click=${this.handleToggleClick} class="no-btn">
+					<span id="more">
+						<slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>
+					</span>
+					<span id="less">
+						<slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>
+					</span>
+				</button>
+			</div>
+		`}}customElements.define("k-show-more",ShowMore);

package/docs/src/components/SideMenu.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./FocusCapture.js";export default class SideMenu extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close"},side:{type:String,reflect:!0}};constructor(){super(),this.opened=!1,this.overlayClose=!0,this.side="left"}overlayClick=()=>{this.overlayClose&&this.close()};updated(e){super.updated(e),e.has("opened")&&(this.opened?(this.dispatchEvent(new CustomEvent("change",{detail:"open"})),this.dispatchEvent(new CustomEvent("open"))):(this.dispatchEvent(new CustomEvent("change",{detail:"close"})),this.dispatchEvent(new CustomEvent("close"))))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";export default class SideMenu extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},side:{type:String,reflect:!0}};constructor(){super(),this.opened=!1,this.overlayClose=!0,this.side="left"}overlayClick=()=>{this.overlayClose&&this.close()};updated(e){super.updated(e),e.has("opened")&&(this.opened?(this.dispatchEvent(new CustomEvent("change",{detail:"open"})),this.dispatchEvent(new CustomEvent("open"))):(this.dispatchEvent(new CustomEvent("change",{detail:"close"})),this.dispatchEvent(new CustomEvent("close"))))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
 			<k-focus-capture>
 				<div id="container">
 					<button id="overlay" @click=${this.overlayClick}>

package/docs/src/components/Sortable.js

@@ -0,0 +1,45 @@
+import{LitElement,html,css}from"../lit-all.min.js";import drag from"../utils/drag.js";export class Sortable extends LitElement{getCursorElement(){const t=Array.from(this.children).filter(t=>"K-SORTABLE-ITEM"===t.tagName&&!t.hasAttribute("sorting"));if(0===t.length)return null;const e=event.clientY;if(e<t[0].getBoundingClientRect().top)return[t[0],"before"];if(e>t[t.length-1].getBoundingClientRect().bottom)return[t[t.length-1],"after"];for(const r of t){const t=r.getBoundingClientRect();if(e<t.top+t.height/2)return[r,"before"];if(e<t.bottom)return[r,"after"]}return null}render(){return html`<slot></slot>`}static styles=css`
+		:host {
+			display: block;
+		}
+	`}customElements.define("k-sortable",Sortable);export class SortableItem extends LitElement{static properties={sorting:{type:Boolean,reflect:!0}};constructor(){super(),this.cleanupDrag=null}firstUpdated(){this.setupDrag()}updated(t){super.updated(t),t.has("sorting")&&!this.sorting&&this.setupDrag()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupDrag&&(this.cleanupDrag(),this.cleanupDrag=null)}setupDrag(){this.cleanupDrag&&this.cleanupDrag();const t=this.shadowRoot.getElementById("handle");t&&(this.cleanupDrag=drag({element:t,startCallback:this.handleDragStart,moveCallback:this.handleDragMove,endCallback:this.handleDragEnd}))}handleDragStart=()=>{this.sorting=!0};handleDragMove=({y:t})=>{this.style.transform=`translateY(${t}px)`,this.style.zIndex="9999";const[e,r]=this.sortable.getCursorElement();Array.from(this.sortable.children).forEach(t=>{t.classList.remove("target-before","target-after")}),e&&e.classList.add(`target-${r}`)};handleDragEnd=()=>{this.sorting=!1,this.style.transform="",this.style.zIndex="";const[t,e]=this.sortable.getCursorElement();Array.from(this.sortable.children).forEach(t=>{t.classList.remove("target-before","target-after")}),t&&("before"===e?this.sortable.insertBefore(this,t):"after"===e&&this.sortable.insertBefore(this,t.nextSibling),this.sortable.dispatchEvent(new CustomEvent("sort",{bubbles:!0})))};get sortable(){return this.closest("k-sortable")}render(){return html`
+			<div id="handle">
+				<k-icon name="drag-handle"></k-icon>
+			</div>
+			<div id="content" class="p pl0">
+				<slot></slot>
+			</div>
+		`}static styles=css`
+		:host {
+			display: block;
+			border: 1px solid var(--c_border);
+			user-select: none;
+			position: relative;
+		}
+		:host([sorting]){
+			opacity: 0.8;
+		}
+		#handle {
+			display: inline-block;
+			cursor: pointer;
+			padding: var(--spacer);
+		}
+		#content {
+			display: inline-block;
+		}
+		:host(.target-before)::before,
+		:host(.target-after)::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			height: 4px;
+			background-color: var(--c_primary);
+		}
+		:host(.target-before)::before {
+			top: -2px;
+		}
+		:host(.target-after)::after {
+			bottom: -2px;
+		}
+	`}customElements.define("k-sortable-item",SortableItem);

package/docs/src/components/Split.js

@@ -0,0 +1,84 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import drag from"../utils/drag.js";import{watchWindowSize,unwatchWindowSize}from"../utils/watchWindowSize.js";export default class Split extends ShadowComponent{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.dragStartWidth=0,this.dragCleanup=()=>{},this.windowResizeHandler=this.handleWindowResize.bind(this)}firstUpdated(){super.firstUpdated(),this.setupDragHandler(),this.stacked=watchWindowSize(this.windowResizeHandler)<=this.stackWidth}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),unwatchWindowSize(this.windowResizeHandler)}handleWindowResize=t=>{this.stacked=t<=this.stackWidth};handleDragStart=()=>{this.resizing=!0,this.dragStartWidth=Math.round(this.shadowRoot.getElementById("left").getBoundingClientRect().width),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartWidth},bubbles:!0}))};handleDrag=({x:t})=>{const e=`${this.dragStartWidth+t}px`;this.setSize(e),this.dispatchEvent(new CustomEvent("resize",{detail:{size:e},bubbles:!0}))};handleDragEnd=({x:t})=>{this.resizing=!1;const e=`${this.dragStartWidth+t}px`;this.setSize(e),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:e},bubbles:!0}))};setSize(t){this.style.setProperty("--left_width",t)}setupDragHandler(){const t=this.shadowRoot.getElementById("divider-handle");t&&(this.dragCleanup=drag({element:t,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}static styles=css`
+		:host {
+			--left_width: calc((100% - var(--handle_width)) / 2);
+			--handle_width: 0.5rem;
+			--min_pane_width: 6rem;
+
+			height: 100%;
+			display: flex;
+			align-items: stretch;
+			flex: 1 1 auto;
+			overflow: hidden;
+		}
+
+		.pane, #divider-handle {
+			display: inline-block;
+		}
+
+		.pane {
+			min-width: var(--min_pane_width);
+			max-width: calc(100% - var(--min_pane_width));
+			max-height: 100%;
+			overflow: hidden;
+		}
+
+		#left {
+			flex: 0 0 var(--left_width);
+		}
+
+		#divider-handle {
+			display: flex;
+			justify-content: center;
+			width: var(--handle_width);
+			cursor: ew-resize;
+		}
+
+		:host([resizing]) #divider-handle {
+			background-color: var(--tc_primary);
+		}
+
+		:host([resizing]) .pane {
+			pointer-events: none;
+			user-select: none;
+		}
+
+		#divider-border {
+			width: 1px;
+			height: 100%;
+			border-left: 1px solid var(--c_border);
+		}
+
+		#right {
+			flex: 1 1;
+		}
+
+		:host([stacked]) #left,
+		:host([stacked]) #right {
+			display: block;
+		}
+
+		:host([stacked]) #divider-handle {
+			display: none;
+		}
+
+		:host([stacked]) .pane {
+			min-width: 0;
+			max-width: 100%;
+			max-height: none;
+			overflow: auto;
+		}
+
+		:host([stacked]) {
+			display: block;
+		}
+	`;render(){return html`
+			<div id="left" class="pane">
+				<slot></slot>
+			</div>
+			<div id="divider-handle">
+				<div id="divider-border"></div>
+			</div>
+			<div id="right" class="pane">
+				<slot name="right"></slot>
+			</div>
+		`}}customElements.define("k-split",Split);