kempo-css 1.0.7 → 1.0.9

package/src/ColorEditor.js

@@ -1,26 +0,0 @@
-import { LitElement, html } from './lit-all.min.js';
-
-class ColorEditor extends LitElement {
-	/* Properties */
-	static properties = {
-		format: {
-			type: String,
-			attribute: 'format',
-			reflect: true
-		},
-		value: {
-			type: String,
-			attribute: 'value',
-			reflect: true
-		}
-	}
-	constructor(){
-		super();
-		this.format = 'hex';
-		this.value = '#000000';
-	}
-	
-	/* Rendering */
-	
-}
-window.customElements.define('color-editor', ColorEditor);

package/src/CssVar.js

@@ -1,56 +0,0 @@
-import { LitElement, html } from './lit-all.min.js';
-
-class CssVar extends LitElement {
-	/* Properties */
-	static properties = {
-		mode: {
-			type: String,
-			attribute: 'mode',
-			reflect: true
-		},
-		value: {
-			type: String,
-			attribute: 'value',
-			reflect: true
-		}
-	};
-	constructor(){
-		super();
-		this.mode = 'value';
-		this.value = '';
-	}
-	
-	
-	/* Rendering */
-	render(){
-		return html`
-			<div class="d-f">
-				<select id="mode">
-					
-				</select>
-			</div>
-		`;
-	}
-	
-	static modes = {
-		"color": {
-			label: "Color",
-			detector: (v) => {
-				if (typeof v !== 'string') return false;
-				const s = document.createElement('span');
-				s.style.color = '';
-				s.style.color = v.trim();
-				return !!s.style.color;
-			},
-			editor: (v) => html``
-		},
-		"var": {
-			
-		},
-		"value": {
-			label: "Value",
-			detector: ()=>true,
-			editor: (v) => html`<input type="text" value="${v}" />`
-		}
-	}
-}

package/src/lit-all.min.js

@@ -1,120 +0,0 @@
-/**
- * @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/theme-builder.html

@@ -1,286 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" theme="auto">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Kempo CSS</title>
-  <link rel="stylesheet" href="./kempo.css" />
-  <link rel="stylesheet" href="./kempo-hljs.css" />
-  <script src="CssVar.js"></script>
-  <script src="CssVarColor.js"></script>
-  <script src="CssVarLightDarkColor.js"></script>
-	<style>
-		html {
-			scrollbar-gutter: none !important;
-		}
-		body {
-			overflow: hidden;
-			height: 100vh;
-		}
-		#container {
-			display: grid;
-			grid-template-columns: 24rem 1fr;
-			grid-template-rows: auto 1fr;
-			height: 100vh;
-		}
-		#vars {
-			padding: var(--spacer, 1rem);
-			grid-row: 1 / -1;
-			overflow-y: auto;
-		}
-		#actions {
-			
-		}
-		#docs {
-			grid-row: 2;
-			height: 100%;
-		}
-	</style>
-</head>
-<body>
-  <div id="container">
-		<div id="vars" class="br">
-			<h5>Colors</h5>
-			<label for="c_bg">Background Color</label>
-			<input type="color" />
-			<label for="c_bg__inv">Inverted Background Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="c_bg__inv" value="light-dark(rgb(51, 51, 51), rgb(249, 249, 249))"></css-var-light-dark-color>
-			<label for="c_bg__alt">Alternative Background Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="c_bg__alt" value="light-dark(rgb(238, 238, 238), rgb(34, 34, 34))"></css-var-light-dark-color>
-			<label for="c_overscroll">Overscroll Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="c_overscroll" value="light-dark(rgb(255, 255, 255), rgb(0, 0, 0))"></css-var-light-dark-color>
-			<label for="c_border">Border Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="c_border" value="light-dark(rgb(204, 204, 204), rgb(119, 119, 119))"></css-var-light-dark-color>
-			<label for="c_border__inv">Inverted Border Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="c_border__inv" value="light-dark(var(--d_c_bg_border), rgb(204, 204, 204))"></css-var-light-dark-color>
-			<label for="c_primary">Primary Color</label>
-			<css-var-color id="c_primary" value="rgb(51, 102, 255)"></css-var-color>
-			<label for="c_primary__hover">Primary Hover Color</label>
-			<css-var-color id="c_primary__hover" value="rgb(17, 68, 221)"></css-var-color>
-			<label for="c_secondary">Secondary Color</label>
-			<css-var-color id="c_secondary" value="rgb(153, 51, 255)"></css-var-color>
-			<label for="c_secondary__hover">Secondary Hover Color</label>
-			<css-var-color id="c_secondary__hover" value="rgb(119, 17, 221)"></css-var-color>
-			<label for="c_success">Success Color</label>
-			<css-var-color id="c_success" value="rgb(0, 136, 0)"></css-var-color>
-			<label for="c_success__hover">Success Hover Color</label>
-			<css-var-color id="c_success__hover" value="rgb(0, 102, 0)"></css-var-color>
-			<label for="c_warning">Warning Color</label>
-			<css-var-color id="c_warning" value="rgb(255, 102, 0)"></css-var-color>
-			<label for="c_warning__hover">Warning Hover Color</label>
-			<css-var-color id="c_warning__hover" value="rgb(221, 68, 0)"></css-var-color>
-			<label for="c_danger">Danger Color</label>
-			<css-var-color id="c_danger" value="rgb(255, 0, 51)"></css-var-color>
-			<label for="c_danger__hover">Danger Hover Color</label>
-			<css-var-color id="c_danger__hover" value="rgb(221, 0, 17)"></css-var-color>
-			<label for="c_input_accent">Input Accent Color</label>
-			<css-var-color id="c_input_accent" value="rgb(51, 102, 255)"></css-var-color>
-			<label for="c_input_border">Input Border Color</label>
-			<css-var-color id="c_input_border" value="var(--c_border)"></css-var-color>
-			<label for="c_highlight">Highlight Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="c_highlight" value="light-dark(rgba(41, 100, 210, 0.25), rgba(0, 89, 255, 0.25))"></css-var-light-dark-color>
-			<label for="c_overlay">Overlay Color</label>
-			<css-var-color id="c_overlay" value="rgba(0, 0, 0, 0.5)"></css-var-color>
-
-			<h5>Fonts</h5>
-			<label for="ff_body">Body Font Family</label>
-			<css-var id="ff_body" value="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif"></css-var>
-			<label for="ff_heading">Heading Font Family</label>
-			<css-var id="ff_heading" value="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif"></css-var>
-			<label for="ff_mono">Monospace Font Family</label>
-			<css-var id="ff_mono" value="Consolas, monaco, monospace"></css-var>
-
-			<h5>Font Sizes</h5>
-			<label for="fs_base">Base Font Size</label>
-			<css-var id="fs_base" value="16px"></css-var>
-			<label for="fs_small">Small Font Size</label>
-			<css-var id="fs_small" value="calc(0.6 * var(--fs_base))"></css-var>
-			<label for="fs_large">Large Font Size</label>
-			<css-var id="fs_large" value="calc(1.5 * var(--fs_base))"></css-var>
-			<label for="fs_h6">H6 Font Size</label>
-			<css-var id="fs_h6" value="var(--fs_base)"></css-var>
-			<label for="fs_h5">H5 Font Size</label>
-			<css-var id="fs_h5" value="calc(1.25 * var(--fs_base))"></css-var>
-			<label for="fs_h4">H4 Font Size</label>
-			<css-var id="fs_h4" value="calc(1.5 * var(--fs_base))"></css-var>
-			<label for="fs_h3">H3 Font Size</label>
-			<css-var id="fs_h3" value="calc(1.75 * var(--fs_base))"></css-var>
-			<label for="fs_h2">H2 Font Size</label>
-			<css-var id="fs_h2" value="calc(2 * var(--fs_base))"></css-var>
-			<label for="fs_h1">H1 Font Size</label>
-			<css-var id="fs_h1" value="calc(2.5 * var(--fs_base))"></css-var>
-
-			<h5>Font Weights</h5>
-			<label for="fw_base">Base Font Weight</label>
-			<css-var id="fw_base" value="400"></css-var>
-			<label for="fw_bold">Bold Font Weight</label>
-			<css-var id="fw_bold" value="700"></css-var>
-
-			<h5>Spacing</h5>
-			<label for="spacer">Spacer</label>
-			<css-var id="spacer" value="1rem"></css-var>
-			<label for="spacer_h">Half Spacer</label>
-			<css-var id="spacer_h" value="calc(0.5 * var(--spacer))"></css-var>
-			<label for="spacer_q">Quarter Spacer</label>
-			<css-var id="spacer_q" value="calc(0.25 * var(--spacer))"></css-var>
-
-			<h5>Other</h5>
-			<label for="line_height">Line Height</label>
-			<css-var id="line_height" value="1.35em"></css-var>
-			<label for="container_width">Container Width</label>
-			<css-var id="container_width" value="90rem"></css-var>
-			<label for="animation_ms">Animation Duration</label>
-			<css-var id="animation_ms" value="256ms"></css-var>
-			<label for="radius">Border Radius</label>
-			<css-var id="radius" value="0.25rem"></css-var>
-			<label for="link_decoration">Link Decoration</label>
-			<css-var id="link_decoration" value="underline"></css-var>
-			<label for="input_padding">Input Padding</label>
-			<css-var id="input_padding" value="var(--spacer_h) var(--spacer)"></css-var>
-			<label for="input_border_width">Input Border Width</label>
-			<css-var id="input_border_width" value="1px"></css-var>
-			<label for="btn_padding">Button Padding</label>
-			<css-var id="btn_padding" value="var(--spacer_h) var(--spacer)"></css-var>
-
-			<h5>Text Colors</h5>
-			<label for="tc">Text Color</label>
-			<css-var id="tc" value="light-dark(rgba(0, 0, 0, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
-			<label for="tc_dark">Dark Text Color</label>
-			<css-var id="tc_dark" value="light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))"></css-var>
-			<label for="tc_light">Light Text Color</label>
-			<css-var id="tc_light" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
-			<label for="tc_inv">Inverted Text Color</label>
-			<css-var id="tc_inv" value="light-dark(rgba(255, 255, 255, 0.93), rgba(0, 0, 0, 0.93))"></css-var>
-			<label for="tc_muted">Muted Text Color</label>
-			<css-var id="tc_muted" value="light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5))"></css-var>
-			<label for="tc_on_primary">Text on Primary</label>
-			<css-var id="tc_on_primary" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
-			<label for="tc_on_secondary">Text on Secondary</label>
-			<css-var id="tc_on_secondary" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
-			<label for="tc_on_success">Text on Success</label>
-			<css-var id="tc_on_success" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
-			<label for="tc_on_warning">Text on Warning</label>
-			<css-var id="tc_on_warning" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
-			<label for="tc_on_danger">Text on Danger</label>
-			<css-var id="tc_on_danger" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
-			<label for="tc_primary">Primary Text Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="tc_primary" value="light-dark(#36f, rgb(138, 180, 248))"></css-var-light-dark-color>
-			<label for="tc_secondary">Secondary Text Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="tc_secondary" value="light-dark(#93f, rgb(187, 102, 255))"></css-var-light-dark-color>
-			<label for="tc_success">Success Text Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="tc_success" value="light-dark(#080, rgb(102, 187, 102))"></css-var-light-dark-color>
-			<label for="tc_warning">Warning Text Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="tc_warning" value="light-dark(#f60, rgb(255, 153, 51))"></css-var-light-dark-color>
-			<label for="tc_danger">Danger Text Color</label>
-			<css-var-light-dark-color class="b ml mb ph" id="tc_danger" value="light-dark(#f03, rgb(255, 85, 119))"></css-var-light-dark-color>
-
-			<h5>Buttons</h5>
-			<label for="btn_box_shadow">Button Box Shadow</label>
-			<css-var id="btn_box_shadow" value="0 0 0 transparent"></css-var>
-			<label for="btn_box_shadow__hover">Button Hover Box Shadow</label>
-			<css-var id="btn_box_shadow__hover" value="0 0 0 transparent"></css-var>
-			<label for="btn_border">Button Border</label>
-			<css-var id="btn_border" value="transparent"></css-var>
-			<label for="btn_bg">Button Background</label>
-			<css-var-light-dark-color id="btn_bg" value="light-dark(rgb(221, 221, 221), rgb(170, 170, 170))"></css-var-light-dark-color>
-			<label for="btn_bg__hover">Button Hover Background</label>
-			<css-var-light-dark-color id="btn_bg__hover" value="light-dark(rgb(204, 204, 204), rgb(187, 187, 187))"></css-var-light-dark-color>
-			<label for="btn_tc">Button Text Color</label>
-			<css-var id="btn_tc" value="light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))"></css-var>
-			<label for="btn_transparent__hover">Transparent Button Hover</label>
-			<css-var id="btn_transparent__hover" value="light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))"></css-var>
-
-			<h5>Links</h5>
-			<label for="tc_link">Link Text Color</label>
-			<css-var id="tc_link" value="var(--tc_primary)"></css-var>
-			<label for="tc_link__hover">Link Hover Text Color</label>
-			<css-var id="tc_link__hover" value="var(--tc_secondary)"></css-var>
-			<label for="tc_link__inv">Inverted Link Text Color</label>
-			<css-var id="tc_link__inv" value="var(--tc_primary__inv)"></css-var>
-			<label for="tc_link__inv__hover">Inverted Link Hover Text Color</label>
-			<css-var id="tc_link__inv__hover" value="var(--tc_secondary__inv)"></css-var>
-
-			<h5>Focus</h5>
-			<label for="focus_shadow">Focus Shadow</label>
-			<css-var id="focus_shadow" value="0 0 2px 2px var(--c_primary)"></css-var>
-			<label for="focus_shadow_on_primary">Focus Shadow on Primary</label>
-			<css-var id="focus_shadow_on_primary" value="0 0 2px 2px var(--tc_on_primary)"></css-var>
-
-			<h5>Inputs</h5>
-			<label for="input_bg">Input Background</label>
-			<css-var id="input_bg" value="light-dark(white, var(--c_bg__alt))"></css-var>
-			<label for="input_tc">Input Text Color</label>
-			<css-var id="input_tc" value="light-dark(rgba(0, 0, 0, 0.93), var(--tc))"></css-var>
-
-			<h5>Shadows</h5>
-			<label for="drop_shadow">Drop Shadow</label>
-			<css-var id="drop_shadow" value="light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25))"></css-var>
-
-			<h5>Misc</h5>
-			<label for="date_picker_icon_filter">Date Picker Icon Filter</label>
-			<css-var id="date_picker_icon_filter" value="light-dark(invert(0), invert(1))"></css-var>
-		</div>
-		<div id="actions" class="d-f bb ph">
-			<div class="flex"></div>
-			<button id="save-theme" class="primary">Save Theme</button>
-		</div>
-		<iframe id="docs" src="index.html"></iframe>
-	</div>
-	<script>
-		const iframe = document.getElementById('docs');
-		let iframeDoc;
-		const defaults = {};
-
-		document.querySelectorAll('#vars css-var, #vars css-var-color, #vars css-var-light-dark-color').forEach(cssVar => {
-			defaults[cssVar.id] = cssVar.value;
-		});
-
-		iframe.addEventListener('load', () => {
-			iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-		});
-
-		function updateTheme() {
-			const cssVars = document.querySelectorAll('#vars css-var, #vars css-var-color, #vars css-var-light-dark-color');
-			const changedVars = {};
-			cssVars.forEach(cssVar => {
-				if (cssVar.value !== defaults[cssVar.id]) {
-					const varName = '--' + cssVar.id;
-					changedVars[varName] = cssVar.value;
-				}
-			});
-			if (!iframeDoc) return;
-			const css = `:root {\n${Object.entries(changedVars).map(([k, v]) => `  ${k}: ${v};`).join('\n')}\n}`;
-			let style = iframeDoc.getElementById('dynamic-theme');
-			if (!style) {
-				style = iframeDoc.createElement('style');
-				style.id = 'dynamic-theme';
-				iframeDoc.head.appendChild(style);
-			}
-			style.textContent = css;
-		}
-
-		document.querySelectorAll('#vars css-var, #vars css-var-color').forEach(cssVar => {
-			cssVar.addEventListener('input', updateTheme);
-		});
-
-		document.getElementById('save-theme').addEventListener('click', () => {
-			const cssVars = document.querySelectorAll('#vars css-var, #vars css-var-color');
-			const changedVars = {};
-			cssVars.forEach(cssVar => {
-				if (cssVar.value !== defaults[cssVar.id]) {
-					const varName = '--' + cssVar.id;
-					changedVars[varName] = cssVar.value;
-				}
-			});
-			const css = `:root {\n${Object.entries(changedVars).map(([k, v]) => `  ${k}: ${v};`).join('\n')}\n}`;
-			const blob = new Blob([css], { type: 'text/css' });
-			const url = URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = 'theme.css';
-			a.click();
-			URL.revokeObjectURL(url);
-		});
-	</script>
-</body>
-</html>