kempo 1.2.5 → 1.3.0

package/dist/components/Tags.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const tagsInputChangeHandler=Symbol(),tagsInputCommaHandler=Symbol();export default class Tags extends Component{constructor(){super(),this[tagsInputChangeHandler]=()=>{const t=this.shadowRoot.getElementById("tagsInput"),n=t.value;n&&(this.addTag(n),t.value="")},this[tagsInputCommaHandler]=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),n=t.value.split(",").filter((t=>!!t));n.length&&(n.forEach((t=>this.addTag(t))),t.value="")}},this.registerAttributes({value:"",allowedTags:"",disallowedTags:""})}attributeChangedCallback(t,n,e){if(super.attributeChangedCallback(t,n,e),"value"===t){const t=this.validateTags();t!==e?this.value=t:(dispatchEvent(this,"change",{oldValue:n,newValue:e}),this.renderTags())}else if(["allowed-tags","disallowed-tags"].includes(t)){const a=this.validateTags();a!==e?this.value=a:(dispatchEvent(this,`${t.replace("-","")}change`,{oldValue:n,newValue:e}),this.renderTags())}}async render(t){if(await super.render(t)){const t=this.shadowRoot.getElementById("tagsInput");return onEvent(t,"change",this[tagsInputChangeHandler]),onEvent(t,"input",this[tagsInputCommaHandler]),!0}return!1}disconnectedCallback(){super.disconnectedCallback();const t=this.shadowRoot.getElementById("tagsInput");offEvent(t,"change",this[tagsInputChangeHandler]),offEvent(t,"input",this[tagsInputCommaHandler])}async renderTags(){this.render(!1),await window.customElements.whenDefined("k-tag");const t=this.shadowRoot.getElementById("tags");t.innerHTML="";const n=this.value;n&&n.split(",").forEach((n=>{t.appendChild(new Tag(n))}))}addTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.add(t),this.value=[...n].filter((t=>!!t)).join(","),dispatchEvent(this,"addtag",{tag:t})}removeTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.delete(t),this.value=[...n].join(","),dispatchEvent(this,"removetag",{tag:t})}validateTags(){return this.value.split(",").map((t=>t.trim())).map((t=>{const n=new Set(this.allowedTags.split(",").filter((t=>!!t)));if(n.size)return n.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter((t=>!!t)));return e.size&&e.has(t)?"":t})).filter((t=>!!t)).join(",")}get shadowTemplate(){return`\n      <label for="tagsInput">\n        ${super.shadowTemplate}\n        <div id="tagsHolder">\n          <span id="tags"></span>\n          <input id="tagsInput" />\n        </div>\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        \n      }\n      #tagsHolder {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-start;\n        width: 100%;\n        background-color: var(--input_bg);\n        color: var(--input_tc);\n        border: var(--input_border_width) solid var(--c_border);\n        padding: 0;\n        margin-bottom: var(--spacer);\n        border-radius: var(--radius);\n        outline: none;\n        transition: box-shadow var(--animation_ms);\n        cursor: default;\n      }\n      #tagsHolder:focus-within {\n        box-shadow: var(--focus_shadow);\n      }\n      #tags {\n        display: contents;\n      }\n      #tagsInput {\n        display: inline-block;\n        min-width: 5rem;\n        width: auto;\n        max-width: 100%;\n        background-color: transparent;\n        color: inherit;\n        border: 0 solid transparent;\n        margin-bottom: 0;\n        border-radius: 0;\n        transition: none;\n      }\n      #tagsInput {\n        box-shadow: 0 0 0 transparent;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value","allowed-tags","disallowed-tags"]}window.customElements.define("k-tags",Tags);const tagClickHandler=Symbol();class Tag extends Component{constructor(t){super(),this[tagClickHandler]=()=>{this.getRootNode().host.removeTag(t)},this.innerHTML=t}async render(t){return!!await super.render(t)&&(onEvent(this,"click",this[tagClickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[tagClickHandler])}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline-block;\n        width: min-content;\n        margin: var(--spacer_q);\n        padding: var(--spacer_q) var(--spacer_h);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        cursor: pointer;\n      }\n      :host(:hover) {\n        text-decoration: line-through;\n      }\n    `}}window.customElements.define("k-tag",Tag);

package/dist/components/ThemeSwitcher.js

@@ -1 +1 @@
-import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      :host([current-theme="dark"]) #darkMode,\n      :host([current-theme="light"]) #lightMode {\n        display: none;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||(e=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),e}}ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);
+import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      :host([current-theme="dark"]) #darkMode,\n      :host([current-theme="light"]) #lightMode {\n        display: none;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e}}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()),window.customElements.define("k-theme-switcher",ThemeSwitcher);

package/dist/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

package/dist/kempo-vars.css

@@ -1 +1 @@
-:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_border_width:2px}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}
+:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_border_width:2px}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}

package/docs/kempo/components/Tags.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const tagsInputChangeHandler=Symbol(),tagsInputCommaHandler=Symbol();export default class Tags extends Component{constructor(){super(),this[tagsInputChangeHandler]=()=>{const t=this.shadowRoot.getElementById("tagsInput"),n=t.value;n&&(this.addTag(n),t.value="")},this[tagsInputCommaHandler]=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),n=t.value.split(",").filter((t=>!!t));n.length&&(n.forEach((t=>this.addTag(t))),t.value="")}},this.registerAttributes({value:"",allowedTags:"",disallowedTags:""})}attributeChangedCallback(t,n,e){if(super.attributeChangedCallback(t,n,e),"value"===t){const t=this.validateTags();t!==e?this.value=t:(dispatchEvent(this,"change",{oldValue:n,newValue:e}),this.renderTags())}else if(["allowed-tags","disallowed-tags"].includes(t)){const a=this.validateTags();a!==e?this.value=a:(dispatchEvent(this,`${t.replace("-","")}change`,{oldValue:n,newValue:e}),this.renderTags())}}async render(t){if(await super.render(t)){const t=this.shadowRoot.getElementById("tagsInput");return onEvent(t,"change",this[tagsInputChangeHandler]),onEvent(t,"input",this[tagsInputCommaHandler]),!0}return!1}disconnectedCallback(){super.disconnectedCallback();const t=this.shadowRoot.getElementById("tagsInput");offEvent(t,"change",this[tagsInputChangeHandler]),offEvent(t,"input",this[tagsInputCommaHandler])}async renderTags(){this.render(!1),await window.customElements.whenDefined("k-tag");const t=this.shadowRoot.getElementById("tags");t.innerHTML="";const n=this.value;n&&n.split(",").forEach((n=>{t.appendChild(new Tag(n))}))}addTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.add(t),this.value=[...n].filter((t=>!!t)).join(","),dispatchEvent(this,"addtag",{tag:t})}removeTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.delete(t),this.value=[...n].join(","),dispatchEvent(this,"removetag",{tag:t})}validateTags(){return this.value.split(",").map((t=>t.trim())).map((t=>{const n=new Set(this.allowedTags.split(",").filter((t=>!!t)));if(n.size)return n.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter((t=>!!t)));return e.size&&e.has(t)?"":t})).filter((t=>!!t)).join(",")}get shadowTemplate(){return`\n      <label for="tagsInput">\n        ${super.shadowTemplate}\n        <div id="tagsHolder">\n          <span id="tags"></span>\n          <input id="tagsInput" />\n        </div>\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        \n      }\n      #tagsHolder {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-start;\n        width: 100%;\n        background-color: var(--input_bg);\n        color: var(--input_tc);\n        border: var(--input_border_width) solid var(--c_border);\n        padding: 0;\n        margin-bottom: var(--spacer);\n        border-radius: var(--radius);\n        outline: none;\n        transition: box-shadow var(--animation_ms);\n        cursor: default;\n      }\n      #tagsHolder:focus-within {\n        box-shadow: var(--focus_shadow);\n      }\n      #tags {\n        display: contents;\n      }\n      #tagsInput {\n        display: inline-block;\n        min-width: 5rem;\n        width: auto;\n        max-width: 100%;\n        background-color: transparent;\n        color: inherit;\n        border: 0 solid transparent;\n        margin-bottom: 0;\n        border-radius: 0;\n        transition: none;\n      }\n      #tagsInput {\n        box-shadow: 0 0 0 transparent;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value","allowed-tags","disallowed-tags"]}window.customElements.define("k-tags",Tags);const tagClickHandler=Symbol();class Tag extends Component{constructor(t){super(),this[tagClickHandler]=()=>{this.getRootNode().host.removeTag(t)},this.innerHTML=t}async render(t){return!!await super.render(t)&&(onEvent(this,"click",this[tagClickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[tagClickHandler])}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline-block;\n        width: min-content;\n        margin: var(--spacer_q);\n        padding: var(--spacer_q) var(--spacer_h);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        cursor: pointer;\n      }\n      :host(:hover) {\n        text-decoration: line-through;\n      }\n    `}}window.customElements.define("k-tag",Tag);

package/docs/kempo/components/ThemeSwitcher.js

@@ -1 +1 @@
-import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      :host([current-theme="dark"]) #darkMode,\n      :host([current-theme="light"]) #lightMode {\n        display: none;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||(e=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),e}}ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);
+import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      :host([current-theme="dark"]) #darkMode,\n      :host([current-theme="light"]) #lightMode {\n        display: none;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e}}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()),window.customElements.define("k-theme-switcher",ThemeSwitcher);

package/docs/kempo/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

package/docs/kempo/kempo-vars.css

@@ -1 +1 @@
-:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_border_width:2px}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}
+:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_border_width:2px}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/Tags.js

@@ -0,0 +1,224 @@
+import Component from './Component.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const tagsInputChangeHandler = Symbol(),
+      tagsInputCommaHandler = Symbol();
+export default class Tags extends Component {
+  constructor(){
+    super();
+
+    this[tagsInputChangeHandler] = () => {
+      const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+      const tag = $tagsInput.value;
+      if(tag){
+        this.addTag(tag);
+        $tagsInput.value = '';
+      }
+    }
+    this[tagsInputCommaHandler] = (event) => {
+      if(event.data === ',' || event.inputType === 'insertFromPaste'){
+        const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+        const tags = $tagsInput.value.split(',').filter(i=>!!i);
+        if(tags.length){
+          tags.forEach(tag=>this.addTag(tag));
+          $tagsInput.value = '';
+        }
+      }
+    }
+
+    this.registerAttributes({
+      value: '',
+      allowedTags: '',
+      disallowedTags: ''
+    });
+  }
+  attributeChangedCallback(name, oldValue, newValue){
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if(name === 'value'){
+      const validTags = this.validateTags();
+      if(validTags !== newValue){
+        this.value = validTags;
+      } else {
+        dispatchEvent(this, 'change', {
+          oldValue,
+          newValue
+        });
+        this.renderTags();
+      }
+    } else if(['allowed-tags', 'disallowed-tags'].includes(name)){
+      const validTags = this.validateTags();
+      if(validTags !== newValue){
+        this.value = validTags;
+      } else {
+        dispatchEvent(this, `${name.replace('-','')}change`, {
+          oldValue,
+          newValue
+        });
+        this.renderTags();
+      }
+    }
+  }
+  async render(force){
+    if(await super.render(force)){
+      const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+      onEvent($tagsInput, 'change', this[tagsInputChangeHandler]);
+      onEvent($tagsInput, 'input', this[tagsInputCommaHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+    offEvent($tagsInput, 'change', this[tagsInputChangeHandler]);
+    offEvent($tagsInput, 'input', this[tagsInputCommaHandler]);
+  }
+  async renderTags(){
+    this.render(false);
+    await window.customElements.whenDefined('k-tag');
+    const $tags = this.shadowRoot.getElementById('tags');
+    $tags.innerHTML = '';
+    const v = this.value;
+    if(v) v.split(',').forEach(tag => {
+      $tags.appendChild(new Tag(tag));
+    });
+  }
+  addTag(tag){
+    const tags = new Set(this.value.split(',').filter(i=>!!i));
+    tags.add(tag);
+    this.value = [...tags].filter(i=>!!i).join(',');
+    dispatchEvent(this, 'addtag', {tag});
+  }
+  removeTag(tag){
+    const tags = new Set(this.value.split(',').filter(i=>!!i));
+    tags.delete(tag);
+    this.value = [...tags].join(',');
+    dispatchEvent(this, 'removetag', {tag});
+  }
+  validateTags(){
+    return this.value
+      .split(',')
+      .map(t=>t.trim())
+      .map(tag => {
+        const allowed = new Set(this.allowedTags.split(',').filter(i=>!!i));
+        if(allowed.size) return allowed.has(tag)?tag:'';
+        const disallowed = new Set(this.disallowedTags.split(',').filter(i=>!!i));
+        if(disallowed.size) return disallowed.has(tag)?'':tag;
+        return tag;
+      })
+      .filter(i=>!!i).join(',');
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <label for="tagsInput">
+        ${super.shadowTemplate}
+        <div id="tagsHolder">
+          <span id="tags"></span>
+          <input id="tagsInput" />
+        </div>
+      </label>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        
+      }
+      #tagsHolder {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        width: 100%;
+        background-color: var(--input_bg);
+        color: var(--input_tc);
+        border: var(--input_border_width) solid var(--c_border);
+        padding: 0;
+        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-bottom: 0;
+        border-radius: 0;
+        transition: none;
+      }
+      #tagsInput {
+        box-shadow: 0 0 0 transparent;
+      }
+    `;
+  }
+
+  static observedAttributes = [
+    ...Component.observedAttributes,
+    'value',
+    'allowed-tags',
+    'disallowed-tags'
+  ];
+}
+window.customElements.define('k-tags', Tags);
+
+const tagClickHandler = Symbol();
+class Tag extends Component {
+  constructor(tag){
+    super();
+
+    /* Private Methods */
+    this[tagClickHandler] = () => {
+      this.getRootNode().host.removeTag(tag);
+    }
+
+    /* init */
+    this.innerHTML = tag;
+  }
+  async render(force){
+    if(await super.render(force)){
+      onEvent(this, 'click', this[tagClickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this, 'click', this[tagClickHandler]);
+  }
+
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :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;
+      }
+    `;
+  }
+}
+window.customElements.define('k-tag', Tag);

package/src/components/ThemeSwitcher.js

@@ -69,9 +69,13 @@ export default class ThemeSwitcher extends Component {
   static getCurrentTheme(){
     let theme = document.documentElement.getAttribute('theme');
     if(!theme) theme = localStorage.getItem('theme');
-    if(!theme) theme = window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
     return theme;
   }
 }
+const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const colorSchemeChangeHandler = (event) => document.documentElement.setAttribute('auto-theme', event.matches?'dark':'light');
+colorSchemeQuery.addEventListener('change', colorSchemeChangeHandler);
+colorSchemeChangeHandler(colorSchemeQuery);
+
 ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme());
-window.customElements.define('k-theme-switcher', ThemeSwitcher);
+window.customElements.define('k-theme-switcher', ThemeSwitcher)

package/src/kempo-vars.css

@@ -78,6 +78,7 @@
   --input_tc: rgba(0, 0, 0, 0.93);
   --drop_shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.333); 
 }
+[auto-theme="dark"]:not([theme="light"]),
 [theme="dark"] {
   color-scheme: dark;
   --c_bg: #333;