kempo-ui 0.0.2 → 0.0.4

package/docs/src/components/Tags.js

@@ -0,0 +1,69 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Tags extends ShadowComponent{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags=""}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const a=t.get("value"),e=this.validateTags();e!==this.value?this.value=e:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:a,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const a=t.get("allowedTags")||t.get("disallowedTags"),e=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:a,newValue:e},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.trim();a&&(this.addTag(a),t.value="")};handleInputInput=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.split(",").filter(t=>!!t.trim());a.length&&(a.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(a=>{const e=new Tag(a.trim(),this);t.appendChild(e)})}addTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.add(t.trim()),this.value=[...a].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.delete(t),this.value=[...a].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const a=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(a.size)return a.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return e.size&&e.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=css`
+		:host {
+			display: block;
+
+		#tagsHolder {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			width: 100%;
+			background-color: var(--input_bg);
+			color: var(--input_tc);
+			border: var(--input_border_width) solid var(--c_border);
+			padding: var(--spacer_q);
+			margin-bottom: var(--spacer);
+			border-radius: var(--radius);
+			outline: none;
+			transition: box-shadow var(--animation_ms);
+			cursor: default;
+		}
+
+		#tagsHolder:focus-within {
+			box-shadow: var(--focus_shadow);
+		}
+
+		#tags {
+			display: contents;
+		}
+
+		#tagsInput {
+			display: inline-block;
+			min-width: 5rem;
+			width: auto;
+			max-width: 100%;
+			background-color: transparent;
+			color: inherit;
+			border: 0 solid transparent;
+			margin: var(--spacer_q);
+			padding: var(--spacer_q) 0;
+			border-radius: 0;
+			transition: none;
+			box-shadow: 0 0 0 transparent;
+		}
+	`;render(){return html`
+			<label for="tagsInput">
+				<slot></slot>
+				<div id="tagsHolder">
+					<span id="tags"></span>
+					<input 
+						id="tagsInput" 
+						@change=${this.handleInputChange}
+						@input=${this.handleInputInput}
+					/>
+				</div>
+			</label>
+		`}}class Tag extends ShadowComponent{constructor(t,a){super(),this.tag=t,this.tagsComponent=a,this.innerHTML=t}handleClick=()=>{this.tagsComponent.removeTag(this.tag)};static styles=css`
+		:host {
+			display: inline-block;
+			width: min-content;
+			margin: var(--spacer_q);
+			padding: var(--spacer_q) var(--spacer_h);
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			cursor: pointer;
+		}
+
+		:host(:hover) {
+			text-decoration: line-through;
+		}
+	`;render(){return html`<span @click=${this.handleClick}><slot></slot></span>`}}customElements.define("k-tags",Tags),customElements.define("k-tag",Tag);

package/docs/src/components/ThemeSwitcher.js

@@ -0,0 +1,23 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()};connectedCallback(){super.connectedCallback(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}static styles=css`
+		:host {
+			--padding: var(--spacer);
+			display: flex;
+		}
+		button {
+			padding: var(--padding);
+		}
+	`;render(){const e="auto"===this.currentTheme?"mode-auto":"light"===this.currentTheme?"mode-light":"mode-dark";return html`
+			<button
+				class="no-btn"
+				@click=${this.handleClick}
+			>
+				<k-icon name=${e}></k-icon>
+			</button>
+		`}static styles=css`
+		:host {
+			--padding: var(--spacer, 1rem);
+		}
+		button.no-btn {
+			padding: var(--padding);
+		}
+	`;static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),window.dispatchEvent(new StorageEvent("storage",{key:"theme",newValue:e}))}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),customElements.define("k-theme-switcher",ThemeSwitcher);

package/docs/src/components/Timestamp.js

@@ -0,0 +1 @@
+import{html}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import formatTimestamp from"../utils/formatTimestamp.js";export default class Timestamp extends ShadowComponent{static properties={timestamp:{type:Number,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp=0,this.format="",this.locale=""}render(){const t=this.timestamp?formatTimestamp(this.timestamp,this.format,this.locale||navigator.language):"";return html`<span>${t}</span>`}}window.customElements.define("k-timestamp",Timestamp);

package/docs/src/lit-all.min.js

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,s=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),e=new WeakMap;class n{constructor(t,s,e){if(this._$cssResult$=!0,e!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=s}get styleSheet(){let t=this.i;const i=this.t;if(s&&void 0===t){const s=void 0!==i&&1===i.length;s&&(t=e.get(i)),void 0===t&&((this.i=t=new CSSStyleSheet).replaceSync(this.cssText),s&&e.set(i,t))}return t}toString(){return this.cssText}}const r=t=>new n("string"==typeof t?t:t+"",void 0,i),o=(t,...s)=>{const e=1===t.length?t[0]:s.reduce(((s,i,e)=>s+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[e+1]),t[0]);return new n(e,t,i)},h=(i,e)=>{if(s)i.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const s of e){const e=document.createElement("style"),n=t.litNonce;void 0!==n&&e.setAttribute("nonce",n),e.textContent=s.cssText,i.appendChild(e)}},c=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let s="";for(const i of t.cssRules)s+=i.cssText;return r(s)})(t):t
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */,{is:l,defineProperty:a,getOwnPropertyDescriptor:u,getOwnPropertyNames:d,getOwnPropertySymbols:f,getPrototypeOf:p}=Object,v=globalThis,y=v.trustedTypes,m=y?y.emptyScript:"",b=v.reactiveElementPolyfillSupport,g=(t,s)=>t,w={toAttribute(t,s){switch(s){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},_=(t,s)=>!l(t,s),S={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:_};Symbol.metadata??=Symbol("metadata"),v.litPropertyMetadata??=new WeakMap;class $ extends HTMLElement{static addInitializer(t){this.o(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.u&&[...this.u.keys()]}static createProperty(t,s=S){if(s.state&&(s.attribute=!1),this.o(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=!0),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&a(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){const{get:e,set:n}=u(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get:e,set(s){const r=e?.call(this);n?.call(this,s),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??S}static o(){if(this.hasOwnProperty(g("elementProperties")))return;const t=p(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(g("finalized")))return;if(this.finalized=!0,this.o(),this.hasOwnProperty(g("properties"))){const t=this.properties,s=[...d(t),...f(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this.u=new Map;for(const[t,s]of this.elementProperties){const i=this.p(t,s);void 0!==i&&this.u.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const s=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)s.unshift(c(t))}else void 0!==t&&s.push(c(t));return s}static p(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.v=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.m=null,this._()}_(){this.S=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this.$(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this.P??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.P?.delete(t)}$(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this.v=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return h(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.P?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this.P?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}C(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor.p(t,i);if(void 0!==e&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(s,i.type);this.m=t,null==n?this.removeAttribute(e):this.setAttribute(e,n),this.m=null}}_$AK(t,s){const i=this.constructor,e=i.u.get(t);if(void 0!==e&&this.m!==e){const t=i.getPropertyOptions(e),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.m=e;const r=n.fromAttribute(s,t.type);this[e]=r??this.T?.get(e)??r,this.m=null}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,n=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??_)(n,s)||i.useDefault&&i.reflect&&n===this.T?.get(t)&&!this.hasAttribute(e.p(t,i))))return;this.M(t,s,i)}!1===this.isUpdatePending&&(this.S=this.k())}M(t,s,{useDefault:i,reflect:e,wrapped:n},r){i&&!(this.T??=new Map).has(t)&&(this.T.set(t,r??s??this[t]),!0!==n||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),!0===e&&this.m!==t&&(this.A??=new Set).add(t))}async k(){this.isUpdatePending=!0;try{await this.S}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this.v){for(const[t,s]of this.v)this[t]=s;this.v=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];!0!==t||this._$AL.has(s)||void 0===e||this.M(s,void 0,i,e)}}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this.P?.forEach((t=>t.hostUpdate?.())),this.update(s)):this.U()}catch(s){throw t=!1,this.U(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this.P?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}U(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.S}shouldUpdate(t){return!0}update(t){this.A&&=this.A.forEach((t=>this.C(t,this[t]))),this.U()}updated(t){}firstUpdated(t){}}$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[g("elementProperties")]=new Map,$[g("finalized")]=new Map,b?.({ReactiveElement:$}),(v.reactiveElementVersions??=[]).push("2.1.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const T=globalThis,x=T.trustedTypes,E=x?x.createPolicy("lit-html",{createHTML:t=>t}):void 0,C="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,M="?"+P,A=`<${M}>`,k=document,O=()=>k.createComment(""),U=t=>null===t||"object"!=typeof t&&"function"!=typeof t,V=Array.isArray,R=t=>V(t)||"function"==typeof t?.[Symbol.iterator],N="[ \t\n\f\r]",L=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,j=/>/g,D=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),H=/'/g,I=/"/g,B=/^(?:script|style|textarea|title)$/i,W=t=>(s,...i)=>({_$litType$:t,strings:s,values:i}),Z=W(1),q=W(2),F=W(3),G=Symbol.for("lit-noChange"),J=Symbol.for("lit-nothing"),K=new WeakMap,Y=k.createTreeWalker(k,129);function Q(t,s){if(!V(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(s):s}const X=(t,s)=>{const i=t.length-1,e=[];let n,r=2===s?"<svg>":3===s?"<math>":"",o=L;for(let s=0;s<i;s++){const i=t[s];let h,c,l=-1,a=0;for(;a<i.length&&(o.lastIndex=a,c=o.exec(i),null!==c);)a=o.lastIndex,o===L?"!--"===c[1]?o=z:void 0!==c[1]?o=j:void 0!==c[2]?(B.test(c[2])&&(n=RegExp("</"+c[2],"g")),o=D):void 0!==c[3]&&(o=D):o===D?">"===c[0]?(o=n??L,l=-1):void 0===c[1]?l=-2:(l=o.lastIndex-c[2].length,h=c[1],o=void 0===c[3]?D:'"'===c[3]?I:H):o===I||o===H?o=D:o===z||o===j?o=L:(o=D,n=void 0);const u=o===D&&t[s+1].startsWith("/>")?" ":"";r+=o===L?i+A:l>=0?(e.push(h),i.slice(0,l)+C+i.slice(l)+P+u):i+P+(-2===l?s:u)}return[Q(t,r+(t[i]||"<?>")+(2===s?"</svg>":3===s?"</math>":"")),e]};class tt{constructor({strings:t,_$litType$:s},i){let e;this.parts=[];let n=0,r=0;const o=t.length-1,h=this.parts,[c,l]=X(t,s);if(this.el=tt.createElement(c,i),Y.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(e=Y.nextNode())&&h.length<o;){if(1===e.nodeType){if(e.hasAttributes())for(const t of e.getAttributeNames())if(t.endsWith(C)){const s=l[r++],i=e.getAttribute(t).split(P),o=/([.?@])?(.*)/.exec(s);h.push({type:1,index:n,name:o[2],strings:i,ctor:"."===o[1]?rt:"?"===o[1]?ot:"@"===o[1]?ht:nt}),e.removeAttribute(t)}else t.startsWith(P)&&(h.push({type:6,index:n}),e.removeAttribute(t));if(B.test(e.tagName)){const t=e.textContent.split(P),s=t.length-1;if(s>0){e.textContent=x?x.emptyScript:"";for(let i=0;i<s;i++)e.append(t[i],O()),Y.nextNode(),h.push({type:2,index:++n});e.append(t[s],O())}}}else if(8===e.nodeType)if(e.data===M)h.push({type:2,index:n});else{let t=-1;for(;-1!==(t=e.data.indexOf(P,t+1));)h.push({type:7,index:n}),t+=P.length-1}n++}}static createElement(t,s){const i=k.createElement("template");return i.innerHTML=t,i}}function st(t,s,i=t,e){if(s===G)return s;let n=void 0!==e?i.N?.[e]:i.O;const r=U(s)?void 0:s._$litDirective$;return n?.constructor!==r&&(n?._$AO?.(!1),void 0===r?n=void 0:(n=new r(t),n._$AT(t,i,e)),void 0!==e?(i.N??=[])[e]=n:i.O=n),void 0!==n&&(s=st(t,n._$AS(t,s.values),n,e)),s}class it{constructor(t,s){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=s}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}R(t){const{el:{content:s},parts:i}=this._$AD,e=(t?.creationScope??k).importNode(s,!0);Y.currentNode=e;let n=Y.nextNode(),r=0,o=0,h=i[0];for(;void 0!==h;){if(r===h.index){let s;2===h.type?s=new et(n,n.nextSibling,this,t):1===h.type?s=new h.ctor(n,h.name,h.strings,this,t):6===h.type&&(s=new ct(n,this,t)),this._$AV.push(s),h=i[++o]}r!==h?.index&&(n=Y.nextNode(),r++)}return Y.currentNode=k,e}V(t){let s=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,s),s+=i.strings.length-2):i._$AI(t[s])),s++}}let et=class t{get _$AU(){return this._$AM?._$AU??this.D}constructor(t,s,i,e){this.type=2,this._$AH=J,this._$AN=void 0,this._$AA=t,this._$AB=s,this._$AM=i,this.options=e,this.D=e?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const s=this._$AM;return void 0!==s&&11===t?.nodeType&&(t=s.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,s=this){t=st(this,t,s),U(t)?t===J||null==t||""===t?(this._$AH!==J&&this._$AR(),this._$AH=J):t!==this._$AH&&t!==G&&this.L(t):void 0!==t._$litType$?this.j(t):void 0!==t.nodeType?this.I(t):R(t)?this.H(t):this.L(t)}B(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}I(t){this._$AH!==t&&(this._$AR(),this._$AH=this.B(t))}L(t){this._$AH!==J&&U(this._$AH)?this._$AA.nextSibling.data=t:this.I(k.createTextNode(t)),this._$AH=t}j(t){const{values:s,_$litType$:i}=t,e="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=tt.createElement(Q(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===e)this._$AH.V(s);else{const t=new it(e,this),i=t.R(this.options);t.V(s),this.I(i),this._$AH=t}}_$AC(t){let s=K.get(t.strings);return void 0===s&&K.set(t.strings,s=new tt(t)),s}H(s){V(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,n=0;for(const r of s)n===i.length?i.push(e=new t(this.B(O()),this.B(O()),this,this.options)):e=i[n],e._$AI(r),n++;n<i.length&&(this._$AR(e&&e._$AB.nextSibling,n),i.length=n)}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(!1,!0,s);t!==this._$AB;){const s=t.nextSibling;t.remove(),t=s}}setConnected(t){void 0===this._$AM&&(this.D=t,this._$AP?.(t))}};class nt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,s,i,e,n){this.type=1,this._$AH=J,this._$AN=void 0,this.element=t,this.name=s,this._$AM=e,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=J}_$AI(t,s=this,i,e){const n=this.strings;let r=!1;if(void 0===n)t=st(this,t,s,0),r=!U(t)||t!==this._$AH&&t!==G,r&&(this._$AH=t);else{const e=t;let o,h;for(t=n[0],o=0;o<n.length-1;o++)h=st(this,e[i+o],s,o),h===G&&(h=this._$AH[o]),r||=!U(h)||h!==this._$AH[o],h===J?t=J:t!==J&&(t+=(h??"")+n[o+1]),this._$AH[o]=h}r&&!e&&this.W(t)}W(t){t===J?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class rt extends nt{constructor(){super(...arguments),this.type=3}W(t){this.element[this.name]=t===J?void 0:t}}class ot extends nt{constructor(){super(...arguments),this.type=4}W(t){this.element.toggleAttribute(this.name,!!t&&t!==J)}}class ht extends nt{constructor(t,s,i,e,n){super(t,s,i,e,n),this.type=5}_$AI(t,s=this){if((t=st(this,t,s,0)??J)===G)return;const i=this._$AH,e=t===J&&i!==J||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==J&&(i===J||e);e&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class ct{constructor(t,s,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=s,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){st(this,t)}}const lt={q:C,J:P,Z:M,F:1,G:X,K:it,X:R,Y:st,tt:et,st:nt,it:ot,et:ht,ht:rt,ot:ct},at=T.litHtmlPolyfillSupport;at?.(tt,et),(T.litHtmlVersions??=[]).push("3.3.1");const ut=(t,s,i)=>{const e=i?.renderBefore??s;let n=e._$litPart$;if(void 0===n){const t=i?.renderBefore??null;e._$litPart$=n=new et(s.insertBefore(O(),t),t,void 0,i??{})}return n._$AI(t),n},dt=globalThis;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class ft extends ${constructor(){super(...arguments),this.renderOptions={host:this},this.rt=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.rt=ut(s,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.rt?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.rt?.setConnected(!1)}render(){return G}}ft._$litElement$=!0,ft["finalized"]=!0,dt.litElementHydrateSupport?.({LitElement:ft});const pt=dt.litElementPolyfillSupport;pt?.({LitElement:ft});const vt={_$AK:(t,s,i)=>{t._$AK(s,i)},_$AL:t=>t._$AL};(dt.litElementVersions??=[]).push("4.2.1");
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const yt=!1,{tt:mt}=lt,bt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,gt={HTML:1,SVG:2,MATHML:3},wt=(t,s)=>void 0===s?void 0!==t?._$litType$:t?._$litType$===s,_t=t=>null!=t?._$litType$?.h,St=t=>void 0!==t?._$litDirective$,$t=t=>t?._$litDirective$,Tt=t=>void 0===t.strings,xt=()=>document.createComment(""),Et=(t,s,i)=>{const e=t._$AA.parentNode,n=void 0===s?t._$AB:s._$AA;if(void 0===i){const s=e.insertBefore(xt(),n),r=e.insertBefore(xt(),n);i=new mt(s,r,t,t.options)}else{const s=i._$AB.nextSibling,r=i._$AM,o=r!==t;if(o){let s;i._$AQ?.(t),i._$AM=t,void 0!==i._$AP&&(s=t._$AU)!==r._$AU&&i._$AP(s)}if(s!==n||o){let t=i._$AA;for(;t!==s;){const s=t.nextSibling;e.insertBefore(t,n),t=s}}}return i},Ct=(t,s,i=t)=>(t._$AI(s,i),t),Pt={},Mt=(t,s=Pt)=>t._$AH=s,At=t=>t._$AH,kt=t=>{t._$AR(),t._$AA.remove()},Ot=t=>{t._$AR()},Ut={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Vt=t=>(...s)=>({_$litDirective$:t,values:s});class Rt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,s,i){this.nt=t,this._$AM=s,this.ct=i}_$AS(t,s){return this.update(t,s)}update(t,s){return this.render(...s)}}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Nt=(t,s)=>{const i=t._$AN;if(void 0===i)return!1;for(const t of i)t._$AO?.(s,!1),Nt(t,s);return!0},Lt=t=>{let s,i;do{if(void 0===(s=t._$AM))break;i=s._$AN,i.delete(t),t=s}while(0===i?.size)},zt=t=>{for(let s;s=t._$AM;t=s){let i=s._$AN;if(void 0===i)s._$AN=i=new Set;else if(i.has(t))break;i.add(t),Ht(s)}};function jt(t){void 0!==this._$AN?(Lt(this),this._$AM=t,zt(this)):this._$AM=t}function Dt(t,s=!1,i=0){const e=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(s)if(Array.isArray(e))for(let t=i;t<e.length;t++)Nt(e[t],!1),Lt(e[t]);else null!=e&&(Nt(e,!1),Lt(e));else Nt(this,t)}const Ht=t=>{2==t.type&&(t._$AP??=Dt,t._$AQ??=jt)};class It extends Rt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,s,i){super._$AT(t,s,i),zt(this),this.isConnected=t._$AU}_$AO(t,s=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),s&&(Nt(this,t),Lt(this))}setValue(t){if(Tt(this.nt))this.nt._$AI(t,this);else{const s=[...this.nt._$AH];s[this.ct]=t,this.nt._$AI(s,this,0)}}disconnected(){}reconnected(){}}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class Bt{constructor(t){this.lt=t}disconnect(){this.lt=void 0}reconnect(t){this.lt=t}deref(){return this.lt}}class Wt{constructor(){this.ut=void 0,this.dt=void 0}get(){return this.ut}pause(){this.ut??=new Promise((t=>this.dt=t))}resume(){this.dt?.(),this.ut=this.dt=void 0}}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class Zt extends It{constructor(){super(...arguments),this.ft=new Bt(this),this.vt=new Wt}render(t,s){return G}update(t,[s,i]){if(this.isConnected||this.disconnected(),s===this.yt)return G;this.yt=s;let e=0;const{ft:n,vt:r}=this;return(async(t,s)=>{for await(const i of t)if(!1===await s(i))return})(s,(async t=>{for(;r.get();)await r.get();const o=n.deref();if(void 0!==o){if(o.yt!==s)return!1;void 0!==i&&(t=i(t,e)),o.commitValue(t,e),e++}return!0})),G}commitValue(t,s){this.setValue(t)}disconnected(){this.ft.disconnect(),this.vt.pause()}reconnected(){this.ft.reconnect(this),this.vt.resume()}}const qt=Vt(Zt),Ft=Vt(
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Zt{constructor(t){if(super(t),2!==t.type)throw Error("asyncAppend can only be used in child expressions")}update(t,s){return this.rt=t,super.update(t,s)}commitValue(t,s){0===s&&Ot(this.rt);const i=Et(this.rt);Ct(i,t)}}),Gt=t=>_t(t)?t._$litType$.h:t.strings,Jt=Vt(class extends Rt{constructor(t){super(t),this.bt=new WeakMap}render(t){return[t]}update(t,[s]){const i=wt(this.gt)?Gt(this.gt):null,e=wt(s)?Gt(s):null;if(null!==i&&(null===e||i!==e)){const s=At(t).pop();let e=this.bt.get(i);if(void 0===e){const t=document.createDocumentFragment();e=ut(J,t),e.setConnected(!1),this.bt.set(i,e)}Mt(e,[s]),Et(e,void 0,s)}if(null!==e){if(null===i||i!==e){const s=this.bt.get(e);if(void 0!==s){const i=At(s).pop();Ot(t),Et(t,void 0,i),Mt(t,[i])}}this.gt=s}else this.gt=void 0;return this.render(s)}}),Kt=(t,s,i)=>{for(const i of s)if(i[0]===t)return(0,i[1])();return i?.()},Yt=Vt(
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Rt{constructor(t){if(super(t),1!==t.type||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(t,[s]){if(void 0===this.wt){this.wt=new Set,void 0!==t.strings&&(this._t=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!this._t?.has(t)&&this.wt.add(t);return this.render(s)}const i=t.element.classList;for(const t of this.wt)t in s||(i.remove(t),this.wt.delete(t));for(const t in s){const e=!!s[t];e===this.wt.has(t)||this._t?.has(t)||(e?(i.add(t),this.wt.add(t)):(i.remove(t),this.wt.delete(t)))}return G}}),Qt={},Xt=Vt(class extends Rt{constructor(){super(...arguments),this.St=Qt}render(t,s){return s()}update(t,[s,i]){if(Array.isArray(s)){if(Array.isArray(this.St)&&this.St.length===s.length&&s.every(((t,s)=>t===this.St[s])))return G}else if(this.St===s)return G;return this.St=Array.isArray(s)?Array.from(s):s,this.render(s,i)}}),ts=t=>t??J
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */;function*ss(t,s){const i="function"==typeof s;if(void 0!==t){let e=-1;for(const n of t)e>-1&&(yield i?s(e):s),e++,yield n}}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const is=Vt(class extends Rt{constructor(){super(...arguments),this.key=J}render(t,s){return this.key=t,s}update(t,[s,i]){return s!==this.key&&(Mt(t),this.key=s),i}}),es=Vt(
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Rt{constructor(t){if(super(t),3!==t.type&&1!==t.type&&4!==t.type)throw Error("The `live` directive is not allowed on child or event bindings");if(!Tt(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[s]){if(s===G||s===J)return s;const i=t.element,e=t.name;if(3===t.type){if(s===i[e])return G}else if(4===t.type){if(!!s===i.hasAttribute(e))return G}else if(1===t.type&&i.getAttribute(e)===s+"")return G;return Mt(t),s}});
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function*ns(t,s){if(void 0!==t){let i=0;for(const e of t)yield s(e,i++)}}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function*rs(t,s,i=1){const e=void 0===s?0:t;s??=t;for(let t=e;i>0?t<s:s<t;t+=i)yield t}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const os=()=>new hs;class hs{}const cs=new WeakMap,ls=Vt(class extends It{render(t){return J}update(t,[s]){const i=s!==this.lt;return i&&void 0!==this.lt&&this.$t(void 0),(i||this.Tt!==this.xt)&&(this.lt=s,this.Et=t.options?.host,this.$t(this.xt=t.element)),J}$t(t){if(this.isConnected||(t=void 0),"function"==typeof this.lt){const s=this.Et??globalThis;let i=cs.get(s);void 0===i&&(i=new WeakMap,cs.set(s,i)),void 0!==i.get(this.lt)&&this.lt.call(this.Et,void 0),i.set(this.lt,t),void 0!==t&&this.lt.call(this.Et,t)}else this.lt.value=t}get Tt(){return"function"==typeof this.lt?cs.get(this.Et??globalThis)?.get(this.lt):this.lt?.value}disconnected(){this.Tt===this.xt&&this.$t(void 0)}reconnected(){this.$t(this.xt)}}),as=(t,s,i)=>{const e=new Map;for(let n=s;n<=i;n++)e.set(t[n],n);return e},us=Vt(class extends Rt{constructor(t){if(super(t),2!==t.type)throw Error("repeat() can only be used in text expressions")}Ct(t,s,i){let e;void 0===i?i=s:void 0!==s&&(e=s);const n=[],r=[];let o=0;for(const s of t)n[o]=e?e(s,o):o,r[o]=i(s,o),o++;return{values:r,keys:n}}render(t,s,i){return this.Ct(t,s,i).values}update(t,[s,i,e]){const n=At(t),{values:r,keys:o}=this.Ct(s,i,e);if(!Array.isArray(n))return this.Pt=o,r;const h=this.Pt??=[],c=[];let l,a,u=0,d=n.length-1,f=0,p=r.length-1;for(;u<=d&&f<=p;)if(null===n[u])u++;else if(null===n[d])d--;else if(h[u]===o[f])c[f]=Ct(n[u],r[f]),u++,f++;else if(h[d]===o[p])c[p]=Ct(n[d],r[p]),d--,p--;else if(h[u]===o[p])c[p]=Ct(n[u],r[p]),Et(t,c[p+1],n[u]),u++,p--;else if(h[d]===o[f])c[f]=Ct(n[d],r[f]),Et(t,n[u],n[d]),d--,f++;else if(void 0===l&&(l=as(o,f,p),a=as(h,u,d)),l.has(h[u]))if(l.has(h[d])){const s=a.get(o[f]),i=void 0!==s?n[s]:null;if(null===i){const s=Et(t,n[u]);Ct(s,r[f]),c[f]=s}else c[f]=Ct(i,r[f]),Et(t,n[u],i),n[s]=null;f++}else kt(n[d]),d--;else kt(n[u]),u++;for(;f<=p;){const s=Et(t,c[p+1]);Ct(s,r[f]),c[f++]=s}for(;u<=d;){const t=n[u++];null!==t&&kt(t)}return this.Pt=o,Mt(t,c),G}}),ds="important",fs=" !"+ds,ps=Vt(class extends Rt{constructor(t){if(super(t),1!==t.type||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((s,i)=>{const e=t[i];return null==e?s:s+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(t,[s]){const{style:i}=t.element;if(void 0===this.Mt)return this.Mt=new Set(Object.keys(s)),this.render(s);for(const t of this.Mt)null==s[t]&&(this.Mt.delete(t),t.includes("-")?i.removeProperty(t):i[t]=null);for(const t in s){const e=s[t];if(null!=e){this.Mt.add(t);const s="string"==typeof e&&e.endsWith(fs);t.includes("-")||s?i.setProperty(t,s?e.slice(0,-11):e,s?ds:""):i[t]=e}}return G}}),vs=Vt(
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Rt{constructor(t){if(super(t),2!==t.type)throw Error("templateContent can only be used in child bindings")}render(t){return this.At===t?G:(this.At=t,document.importNode(t.content,!0))}});class ys extends Rt{constructor(t){if(super(t),this.gt=J,2!==t.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===J||null==t)return this.kt=void 0,this.gt=t;if(t===G)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.gt)return this.kt;this.gt=t;const s=[t];return s.raw=s,this.kt={_$litType$:this.constructor.resultType,strings:s,values:[]}}}ys.directiveName="unsafeHTML",ys.resultType=1;const ms=Vt(ys);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class bs extends ys{}bs.directiveName="unsafeSVG",bs.resultType=2;const gs=Vt(bs),ws=t=>!bt(t)&&"function"==typeof t.then,_s=1073741823;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class Ss extends It{constructor(){super(...arguments),this.Ot=_s,this.Ut=[],this.ft=new Bt(this),this.vt=new Wt}render(...t){return t.find((t=>!ws(t)))??G}update(t,s){const i=this.Ut;let e=i.length;this.Ut=s;const n=this.ft,r=this.vt;this.isConnected||this.disconnected();for(let t=0;t<s.length&&!(t>this.Ot);t++){const o=s[t];if(!ws(o))return this.Ot=t,o;t<e&&o===i[t]||(this.Ot=_s,e=0,Promise.resolve(o).then((async t=>{for(;r.get();)await r.get();const s=n.deref();if(void 0!==s){const i=s.Ut.indexOf(o);i>-1&&i<s.Ot&&(s.Ot=i,s.setValue(t))}})))}return G}disconnected(){this.ft.disconnect(),this.vt.pause()}reconnected(){this.ft.reconnect(this),this.vt.resume()}}const $s=Vt(Ss);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function Ts(t,s,i){return t?s(t):i?.(t)}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const xs=Symbol.for(""),Es=t=>{if(t?.r===xs)return t?._$litStatic$},Cs=t=>({_$litStatic$:t,r:xs}),Ps=(t,...s)=>({_$litStatic$:s.reduce(((s,i,e)=>s+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(i)+t[e+1]),t[0]),r:xs}),Ms=new Map,As=t=>(s,...i)=>{const e=i.length;let n,r;const o=[],h=[];let c,l=0,a=!1;for(;l<e;){for(c=s[l];l<e&&void 0!==(r=i[l],n=Es(r));)c+=n+s[++l],a=!0;l!==e&&h.push(r),o.push(c),l++}if(l===e&&o.push(s[e]),a){const t=o.join("$$lit$$");void 0===(s=Ms.get(t))&&(o.raw=o,Ms.set(t,s=o)),i=h}return t(s,...i)},ks=As(Z),Os=As(q);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+window.litDisableBundleWarning||console.warn("Lit has been loaded from a bundle that combines all core features into a single file. To reduce transfer size and parsing cost, consider using the `lit` npm package directly in your project.");export{It as AsyncDirective,Zt as AsyncReplaceDirective,n as CSSResult,Rt as Directive,ft as LitElement,Ut as PartType,$ as ReactiveElement,gt as TemplateResultType,ys as UnsafeHTMLDirective,Ss as UntilDirective,vt as _$LE,lt as _$LH,h as adoptStyles,Ft as asyncAppend,qt as asyncReplace,Jt as cache,Kt as choose,Yt as classMap,Ot as clearPart,os as createRef,o as css,w as defaultConverter,Vt as directive,At as getCommittedValue,c as getCompatibleStyle,$t as getDirectiveClass,Xt as guard,Z as html,ts as ifDefined,Et as insertPart,_t as isCompiledTemplateResult,St as isDirectiveResult,bt as isPrimitive,yt as isServer,Tt as isSingleExpression,wt as isTemplateResult,ss as join,is as keyed,Ps as literal,es as live,ns as map,F as mathml,G as noChange,_ as notEqual,J as nothing,rs as range,ls as ref,kt as removePart,ut as render,us as repeat,Ct as setChildPartValue,Mt as setCommittedValue,ks as staticHtml,Os as staticSvg,ps as styleMap,s as supportsAdoptingStyleSheets,q as svg,vs as templateContent,r as unsafeCSS,ms as unsafeHTML,gs as unsafeSVG,Cs as unsafeStatic,$s as until,Ts as when,As as withStatic};
+//# sourceMappingURL=lit-all.min.js.map

package/docs/src/utils/debounce.js

@@ -0,0 +1 @@
+function debounce(e,t=300){let u;return(...o)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,o)},t)}}export default debounce;

package/docs/src/utils/drag.js

@@ -0,0 +1 @@
+export default(e={})=>{let t,n,o;const{element:s,callback:a=()=>{},startCallback:r=()=>{},moveCallback:c=()=>{},endCallback:u=()=>{},preventScroll:v=!1}=e,d=s=>{v&&s.preventDefault(),clearTimeout(o);const r=s.pageX||s.touches[0].pageX,u=s.pageY||s.touches[0].pageY,d={x:r-t,y:u-n,...e};a(d),c(d)},i=s=>{clearTimeout(o);const r=s.pageX||s.changedTouches&&s.changedTouches[0].pageX||0,c=s.pageY||s.changedTouches&&s.changedTouches[0].pageY||0,v={x:r-t,y:c-n,...e};a(v),u(v),m()},p=s=>{if(s.button&&0!==s.button)return;clearTimeout(o),t=s.pageX||s.touches[0].pageX,n=s.pageY||s.touches[0].pageY;const a={x:0,y:0,...e};r(a),window.addEventListener("mousemove",d,{passive:!v}),window.addEventListener("mouseup",i,{passive:!v}),window.addEventListener("touchmove",d,{passive:!v}),window.addEventListener("touchend",i,{passive:!v})},m=()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",i),window.removeEventListener("touchmove",d),window.removeEventListener("touchend",i)};return s.addEventListener("mousedown",p,{passive:!v}),s.addEventListener("touchstart",p,{passive:!v}),()=>{s.removeEventListener("mousedown",p),s.removeEventListener("touchstart",p),m()}};

package/docs/src/utils/formatTimestamp.js

@@ -0,0 +1 @@
+export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||navigator.language)};

package/docs/src/utils/propConverters.js

@@ -0,0 +1 @@
+export const boolTrueFalse={fromAttribute:t=>null===t?void 0:"true"===t.toLowerCase(),toAttribute:t=>t?"true":"false"};export const boolExists={fromAttribute:t=>null!==t,toAttribute:t=>t?"":null};

package/docs/src/utils/watchWindowSize.js

@@ -0,0 +1 @@
+import debounce from"./debounce.js";const handlers=new Set;window.addEventListener("resize",debounce(()=>{const e=window.innerWidth;handlers.forEach(n=>n(e))}));export const watchWindowSize=e=>(handlers.add(e),window.innerWidth);export const unwatchWindowSize=e=>{handlers.delete(e)};

package/docs/styles.css

@@ -0,0 +1,6 @@
+/* Common styles for documentation pages */
+
+/* Offset anchor links to account for fixed navigation */
+h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
+  scroll-margin-top: 4rem;
+}

package/docs/utils/debounce.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>debounce - Kempo UI</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <main>
+    <h1>debounce</h1>
+    
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#parameters">Parameters</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>The <code>debounce</code> utility function limits the rate at which a function can be executed. It delays the execution of a function until after a specified timeout has passed since the last time it was invoked.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the debounce function to limit function execution frequency:</p>
+    <pre><code class="hljs javascript">import debounce from './utils/debounce.js';
+
+const handleSearch = debounce((query) => {
+  console.log('Searching for:', query);
+}, 300);
+
+// Will only execute after 300ms of no calls
+handleSearch('test');</code></pre>
+
+    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
+    <h5><code>func<i>: Function</i></code></h5>
+    <p>The function to debounce.</p>
+    <h5><code>timeout<i>: number</i></code> (optional)</h5>
+    <p>The number of milliseconds to delay execution. Defaults to 300ms.</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    
+    <h4>Search Input Debouncing</h4>
+    <pre><code class="hljs javascript">const debouncedSearch = debounce((searchTerm) => {
+  // API call or expensive search operation
+  performSearch(searchTerm);
+}, 500);
+
+searchInput.addEventListener('input', (e) => {
+  debouncedSearch(e.target.value);
+});</code></pre>
+
+    <h4>Window Resize Handler</h4>
+    <pre><code class="hljs javascript">const debouncedResize = debounce(() => {
+  // Expensive layout calculations
+  recalculateLayout();
+}, 250);
+
+window.addEventListener('resize', debouncedResize);</code></pre>
+
+  </main>
+  <div style="height:33vh"></div>
+</body>
+</html>

package/docs/utils/drag.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>drag - Kempo UI</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <main>
+    <h1>drag</h1>
+    
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#options">Options</a><br />
+        <a href="#callbacks">Callbacks</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>The <code>drag</code> utility function enables drag interactions on DOM elements. It handles both mouse and touch events, providing callbacks for drag start, move, and end events.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the drag function to make elements draggable:</p>
+    <pre><code class="hljs javascript">import drag from './utils/drag.js';
+
+const element = document.querySelector('.draggable');
+drag({
+  element,
+  callback: (diff) => {
+    console.log('Dragged:', diff.x, diff.y);
+  }
+});</code></pre>
+
+    <h3 id="options"><a href="#options" class="no-link">Options</a></h3>
+    <h5><code>element<i>: HTMLElement</i></code></h5>
+    <p>The DOM element to make draggable.</p>
+    <h5><code>preventScroll<i>: boolean</i></code> (optional)</h5>
+    <p>Whether to prevent scroll behavior during drag. Defaults to false.</p>
+
+    <h3 id="callbacks"><a href="#callbacks" class="no-link">Callbacks</a></h3>
+    <h5><code>callback<i>: Function</i></code> (optional)</h5>
+    <p>Called on every drag move. Receives a diff object with x, y coordinates and original options.</p>
+    <h5><code>startCallback<i>: Function</i></code> (optional)</h5>
+    <p>Called when drag starts. Receives the starting event.</p>
+    <h5><code>moveCallback<i>: Function</i></code> (optional)</h5>
+    <p>Called on every drag move (in addition to callback). Receives a diff object.</p>
+    <h5><code>endCallback<i>: Function</i></code> (optional)</h5>
+    <p>Called when drag ends. Receives the ending event.</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    
+    <h4>Draggable Element</h4>
+    <pre><code class="hljs javascript">const box = document.querySelector('.box');
+let position = { x: 0, y: 0 };
+
+drag({
+  element: box,
+  callback: (diff) => {
+    position.x += diff.x;
+    position.y += diff.y;
+    box.style.transform = `translate(${position.x}px, ${position.y}px)`;
+  }
+});</code></pre>
+
+    <h4>Resize Handle</h4>
+    <pre><code class="hljs javascript">const resizeHandle = document.querySelector('.resize-handle');
+const panel = document.querySelector('.panel');
+
+drag({
+  element: resizeHandle,
+  preventScroll: true,
+  callback: (diff) => {
+    const newWidth = panel.offsetWidth + diff.x;
+    panel.style.width = Math.max(100, newWidth) + 'px';
+  },
+  startCallback: () => {
+    panel.classList.add('resizing');
+  },
+  endCallback: () => {
+    panel.classList.remove('resizing');
+  }
+});</code></pre>
+
+  </main>
+  <div style="height:33vh"></div>
+</body>
+</html>

package/docs/utils/formatTimestamp.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>formatTimestamp - Kempo UI</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <main>
+    <h1>formatTimestamp</h1>
+    
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#parameters">Parameters</a><br />
+        <a href="#formatTokens">Format Tokens</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>The <code>formatTimestamp</code> utility function formats timestamps using custom format tokens or locale-specific formatting.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the formatTimestamp function to format dates:</p>
+    <pre><code class="hljs javascript">import formatTimestamp from './utils/formatTimestamp.js';
+
+const timestamp = Date.now();
+const formatted = formatTimestamp(timestamp, 'YYYY-MM-DD');
+console.log(formatted); // "2025-09-19"</code></pre>
+
+    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
+    <h5><code>timestamp<i>: number|string</i></code></h5>
+    <p>The timestamp to format (milliseconds since epoch).</p>
+    <h5><code>format<i>: string</i></code> (optional)</h5>
+    <p>The format string using tokens. If not provided, uses locale-specific formatting.</p>
+    <h5><code>forceLocale<i>: string</i></code> (optional)</h5>
+    <p>The locale to use for formatting when no format is specified.</p>
+
+    <h3 id="formatTokens"><a href="#formatTokens" class="no-link">Format Tokens</a></h3>
+    <h5><code>YYYY</code></h5>
+    <p>4-digit year (e.g., 2025)</p>
+    <h5><code>YY</code></h5>
+    <p>2-digit year (e.g., 25)</p>
+    <h5><code>MM</code></h5>
+    <p>2-digit month (01-12)</p>
+    <h5><code>M</code></h5>
+    <p>1-digit month (1-12)</p>
+    <h5><code>DD</code></h5>
+    <p>2-digit day (01-31)</p>
+    <h5><code>D</code></h5>
+    <p>1-digit day (1-31)</p>
+    <h5><code>hh</code></h5>
+    <p>2-digit hour (00-23)</p>
+    <h5><code>h</code></h5>
+    <p>1-digit hour (0-23)</p>
+    <h5><code>mm</code></h5>
+    <p>2-digit minute (00-59)</p>
+    <h5><code>m</code></h5>
+    <p>1-digit minute (0-59)</p>
+    <h5><code>ss</code></h5>
+    <p>2-digit second (00-59)</p>
+    <h5><code>s</code></h5>
+    <p>1-digit second (0-59)</p>
+    <h5><code>iiii, iii, ii, i</code></h5>
+    <p>Milliseconds with different padding</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    
+    <h4>Date Formats</h4>
+    <pre><code class="hljs javascript">const timestamp = 1633024800000;
+
+formatTimestamp(timestamp, 'YYYY-MM-DD');     // "2021-10-01"
+formatTimestamp(timestamp, 'MM/DD/YYYY');     // "10/01/2021"
+formatTimestamp(timestamp, 'DD-MM-YY');       // "01-10-21"</code></pre>
+
+    <h4>Time Formats</h4>
+    <pre><code class="hljs javascript">formatTimestamp(timestamp, 'hh:mm:ss');       // "00:00:00"
+formatTimestamp(timestamp, 'h:mm');           // "0:00"
+formatTimestamp(timestamp, 'hh:mm:ss.iii');   // "00:00:00.000"</code></pre>
+
+    <h4>Combined Formats</h4>
+    <pre><code class="hljs javascript">formatTimestamp(timestamp, 'YYYY-MM-DD hh:mm:ss'); 
+// "2021-10-01 00:00:00"
+
+formatTimestamp(timestamp, 'MM/DD/YY at h:mm');
+// "10/01/21 at 0:00"</code></pre>
+
+    <h4>Locale Formatting</h4>
+    <pre><code class="hljs javascript">// Uses browser locale when no format specified
+formatTimestamp(timestamp);                   // "10/1/2021, 12:00:00 AM"
+
+// Force specific locale
+formatTimestamp(timestamp, null, 'de-DE');    // German formatting</code></pre>
+
+  </main>
+  <div style="height:33vh"></div>
+</body>
+</html>