kempo-ui 0.0.2 → 0.0.4

package/docs/src/components/FocusCapture.js

@@ -0,0 +1,7 @@
+import{LitElement,html}from"../lit-all.min.js";export default class FocusCapture extends LitElement{static shadowRootOptions={mode:"open",delegatesFocus:!0};afterFocus=()=>{this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus()};render(){return html`
+			<slot></slot>
+			<div
+				tabindex="0"
+				@focus=${this.afterFocus}
+			></div>
+		`}}window.customElements.define("k-focus-capture",FocusCapture);

package/docs/src/components/HybridComponent.js

@@ -0,0 +1 @@
+import{html,render}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class HybridComponent extends ShadowComponent{createRenderRoot(){const t=super.createRenderRoot();return this.lightRoot=document.createElement("div"),this.lightRoot.style.display="contents",this.lightRoot.slot="lightRoot",this.appendChild(this.lightRoot),t}updated(){render(this.renderLightDom(),this.lightRoot)}renderLightDom(){return html``}render(){return html`<slot name="lightRoot"></slot>`}}

package/docs/src/components/Icon.js

@@ -0,0 +1,10 @@
+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;
+		}
+		::slotted(svg), svg {
+			height: 1.35em;
+			vertical-align: middle;
+		}
+	`;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/Import.js

@@ -0,0 +1 @@
+import LightComponent from"./LightComponent.js";import{html,render,unsafeHTML}from"../lit-all.min.js";export default class Import extends LightComponent{static properties={src:{type:String,reflect:!0},content:{type:String},scripts:{type:Array}};static replacements={};constructor(){super(),this.src="",this.content="",this.scripts=[]}updated(t){super.updated(),t.has("src")&&this.fetch(),t.has("content")&&this.scripts.length>0&&setTimeout(()=>this.executeScripts(),0)}async fetch(){let t=await(await fetch(this.src)).text();for(const[e,r]of Object.entries(Import.replacements))t=t.replace(new RegExp(`%%${e}%%`,"g"),r);const e=(new DOMParser).parseFromString(t,"text/html"),r=e.querySelectorAll("script");this.scripts=Array.from(r).map(t=>({src:t.src,text:t.textContent,type:t.type||"text/javascript"})),r.forEach(t=>t.remove()),this.content=e.body?e.body.innerHTML:t}executeScripts(){this.scripts.forEach(t=>{const e=document.createElement("script");e.type=t.type,t.src?e.src=t.src:t.text&&(e.textContent=t.text),document.head.appendChild(e)}),this.scripts=[]}renderLightDom(){return this.content?html`${unsafeHTML(this.content)}`:html``}}window.customElements.define("k-import",Import);

package/docs/src/components/LightComponent.js

@@ -0,0 +1 @@
+import{LitElement,html,render}from"../lit-all.min.js";export default class LightComponent extends LitElement{createRenderRoot(){return this.lightRoot=document.createElement("div"),this.lightRoot.style.display="contents",this.appendChild(this.lightRoot),this}updated(){render(this.renderLightDom(),this.lightRoot)}renderLightDom(){return html``}}

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

@@ -0,0 +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}}

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

@@ -0,0 +1,97 @@
+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}>
+						<div id="overlay-x">✕</div>
+					</button>
+					<div id="menu">
+						<slot></slot>
+					</div>
+				</div>
+			</k-focus-capture>
+		`}static styles=css`
+		:host {
+			--bg: var(--c_bg);
+			--width: 20rem;
+
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			max-width: 100%;
+			height: 100vh;
+			z-index: 100;
+			pointer-events: none;
+		}
+		:host([opened]) {
+			pointer-events: auto;
+		}
+		k-focus-capture {
+			width: 100%;
+			height: 100%;
+		}
+		#container {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			transition: opacity var(--animation_ms, 256ms);
+		}
+		:host([opened]) #container {
+			opacity: 1;
+		}
+		#overlay {
+			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;
+		}
+		#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 {
+			cursor: default;
+		}
+		#menu {
+			position: absolute;
+			width: var(--width);
+			max-width: calc(100vw - 6rem);
+			height: 100vh;
+			overflow-y: auto;
+			left: calc(var(--width) * -1);
+			top: 0;
+			background: var(--bg);
+			transition: left var(--animation_ms, 256ms);
+			padding: var(--menu_padding, var(--spacer));
+			z-index: 2;
+		}
+		:host([opened]) #menu {
+			left: 0;
+		}
+		:host([side="right"]) #menu {
+			left: auto;
+			transition: right var(--animation_ms, 256ms);
+			right: calc(var(--width) * -1);
+		}
+		:host([opened][side="right"]) #menu {
+			right: 0;
+		}
+		:host([side="right"]) #overlay-x {
+			right: auto;
+			left: var(--spacer_h);
+		}
+	`}window.customElements.define("k-side-menu",SideMenu);

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);

package/docs/src/components/Tabs.js

@@ -0,0 +1,155 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolExists}from"../utils/propConverters.js";export class Tabs extends ShadowComponent{static properties={active:{type:String,reflect:!0},fixedHeight:{type:Boolean,reflect:!0,attribute:"fixed-height",converter:boolExists}};constructor(){super(),this.active="",this.fixedHeight=!1}firstUpdated(){if(super.firstUpdated(),!this.active){const t=this.querySelector("k-tab-content");t&&(this.active=t.name)}this.setupScrollListeners(),this.updateScrollIndicators(),new ResizeObserver(()=>this.updateScrollIndicators()).observe(this.shadowRoot.getElementById("tabs"))}updated(t){super.updated(t),t.has("active")&&this.updateActiveElements()}setupScrollListeners(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right");t.addEventListener("scroll",()=>this.updateScrollIndicators()),e.addEventListener("click",()=>{t.scrollBy({left:-200,behavior:"smooth"})}),o.addEventListener("click",()=>{t.scrollBy({left:200,behavior:"smooth"})})}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,i=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),o.classList.toggle("visible",i)}updateActiveElements(){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const o=this.getTab(this.active);o&&(o.active=!0);const s=this.getContent(this.active);s&&(s.active=!0),this.dispatchEvent(new CustomEvent("tab",{detail:{tab:this.active},bubbles:!0}))}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab")[o]}return e}getActiveTab(){return this.querySelector(":scope > k-tab[active]")}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab-content")[o]}return e}getActiveContent(){return this.querySelector(":scope > k-tab-content[active]")}static styles=css`
+		:host {
+			display: block;
+			width: 100%;
+		}
+
+		#wrapper {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			min-width: 0;
+		}
+
+		#tabs-container {
+			position: relative;
+			border-bottom: 1px solid var(--c_border);
+		}
+
+		#tabs {
+			display: flex;
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+
+		#tabs ::slotted(*) {
+			flex: 0 0 auto;
+		}
+
+		.scroll-indicator {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			width: 72px;
+			pointer-events: none;
+			opacity: 0;
+			transition: opacity 0.2s;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			padding-bottom: 2px;
+		}
+
+		.scroll-indicator .arrow {
+			color: var(--tc_base);
+			z-index: 1;
+		}
+
+		.scroll-indicator.visible {
+			opacity: 1;
+		}
+
+		#scroll-left {
+			left: 0;
+			background: linear-gradient(90deg, 
+				var(--c_bg) 0%,
+				var(--c_bg) 30%,
+				transparent 100%
+			);
+		}
+
+		#scroll-right {
+			right: 0;
+			justify-content: flex-end;
+			background: linear-gradient(-90deg, 
+				var(--c_bg) 0%,
+				var(--c_bg) 30%,
+				transparent 100%
+			);
+		}
+
+		:host([fixed-height]) #wrapper {
+			height: 100%;
+		}
+
+		:host([fixed-height]) #contents {
+			height: 100%;
+			flex: 1;
+			min-height: 1.35rem;
+			overflow: auto;
+		}
+	`;render(){return html`
+			<div id="wrapper">
+				<div id="tabs-container">
+					<div id="scroll-left" class="scroll-indicator">
+						<svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path d="M12 15L7 10L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+						</svg>
+					</div>
+					<div id="tabs">
+						<slot name="tabs"></slot>
+					</div>
+					<div id="scroll-right" class="scroll-indicator">
+						<svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path d="M8 15L13 10L8 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+						</svg>
+					</div>
+				</div>
+				<div id="contents">
+					<slot></slot>
+				</div>
+			</div>
+		`}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
+		:host {
+			margin-bottom: -1px;
+			flex: 0 0 auto;
+		}
+
+		#button {
+			padding: var(--spacer_h);
+			background-color: transparent;
+			border: none;
+			cursor: inherit;
+			box-shadow: none;
+			color: inherit;
+			white-space: nowrap;
+		}
+
+		:host(:not([active])) #button {
+			cursor: pointer;
+		}
+
+		:host([active]) {
+			border-bottom: 2px solid var(--c_primary);
+			margin-bottom: -1px;
+		}
+
+		:host([active]) #button {
+			color: var(--tc_primary);
+		}
+	`;render(){return html`
+			<button id="button" @click=${this.handleClick}>
+				<slot></slot>
+			</button>
+		`}}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
+		:host {
+			display: block;
+			height: 100%;
+			max-height: 100%;
+			flex: 1 1 auto;
+			overflow: auto;
+		}
+
+		:host([active]) {
+			display: block;
+		}
+
+		:host(:not([active])) {
+			display: none;
+		}
+	`;render(){return html`<slot></slot>`}}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
+		:host {
+			flex: 1 1 auto !important;
+			height: 1px;
+		}
+	`;render(){return html`<slot></slot>`}}customElements.define("k-tabs",Tabs),customElements.define("k-tab",Tab),customElements.define("k-tab-content",TabContent),customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};