kempo 1.2.6 → 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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "1.2.6",
+  "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);