wj-elements 0.0.11 → 0.0.13

package/dist/wj-input-file.js

@@ -1,17 +1,19 @@
-var c = Object.defineProperty;
-var b = (i, r, t) => r in i ? c(i, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[r] = t;
-var u = (i, r, t) => (b(i, typeof r != "symbol" ? r + "" : r, t), t);
-import m from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const h = `:host{--wj-input-font-family: var(--wj-font-family);--wj-input-background-color: var(--wj-background);--wj-input-color: var(--wj-color);--wj-input-color-invalid: var(--wj-color-danger);--wj-input-border-color: var(--wj-border-color);--wj-input-border-color-focus: var(--wj-color-primary);--wj-input-border-width: 1px;--wj-input-border-style: solid;--wj-input-border-radius: 4px;--wj-input-margin-bottom: .5rem;--wj-input-line-height: 20px;--wj-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wj-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%;position:relative}:host .native-input.default{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot=start]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot=end]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.standard .input-wrapper:hover .clear{visibility:visible}:host .native-input.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius)}:host .native-input.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wj-input-color-invalid);font-size:12px;line-height:normal}.clear{visibility:hidden;position:absolute;right:0;top:3px;--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem;--wj-button-margin-inline: 0 .25rem}:host([required]) .input-wrapper:after{color:var(--wj-input-color-invalid);content:"*";font-family:var(--wj-force-mac-font-family);font-size:20px;position:absolute;right:10px;top:2px}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wj-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot=start]),::slotted([slot=end]){display:flex;align-items:center;border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:var(--wj-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}input{background-color:var(--wj-input-background-color);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);font-family:var(--wjinput-font-family);color:var(--wj-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wj-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:black;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}
-`;
-class w extends m {
-  constructor(t = {}) {
+const styles = '/*\n[ WJ Input ]\n*/\n:host {\n  --wj-input-font-family: var(--wj-font-family);\n  --wj-input-background-color: var(--wj-background);\n  --wj-input-color: var(--wj-color);\n  --wj-input-color-invalid: var(--wj-color-danger);\n  --wj-input-border-color: var(--wj-border-color);\n  --wj-input-border-color-focus: var(--wj-color-primary);\n  --wj-input-border-width: 1px;\n  --wj-input-border-style: solid;\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: .5rem;\n  --wj-input-line-height: 20px;\n  --wj-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wj-input-margin-bottom);\n  display: block;\n}\n:host .wrapper {\n  display: flex;\n  width: 100%;\n}\n:host .native-input .input-wrapper {\n  width: 100%;\n  position: relative;\n}\n:host .native-input.default {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: 0;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.default .input-wrapper {\n  margin-inline: 0.5rem;\n}\n:host .native-input.default.focused {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.default.focused label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default input {\n  border: none;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  margin-top: -4px;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n}\n:host .native-input.default label {\n  margin: 0;\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.default label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default ::slotted([slot=start]) {\n  border-left: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.default ::slotted([slot=end]) {\n  border-right: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.standard {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  padding-inline: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.standard.focused input {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.standard input {\n  display: block;\n  min-height: 32px;\n  padding-inline: 0.5rem;\n  padding-top: 0;\n  padding-bottom: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n}\n:host .native-input.standard label {\n  margin: 0;\n  display: inline-block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.standard .input-wrapper:hover .clear {\n  visibility: visible;\n}\n:host .native-input.standard ::slotted([slot=start]) {\n  border-right: none;\n  border-radius: var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius);\n}\n:host .native-input.standard ::slotted([slot=end]) {\n  border-left: none;\n  border-radius: 0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0;\n}\n:host .native-input.standard.has-start input {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n:host .native-input.standard.has-end input {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n:host .native-input.standard .error-message {\n  position: static;\n  background: transparent;\n  padding: 0.25rem 0;\n  left: auto;\n  transform: none;\n  color: var(--wj-input-color-invalid);\n  font-size: 12px;\n  line-height: normal;\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\n  --wj-padding-top: .25rem;\n  --wj-padding-start: .25rem;\n  --wj-padding-end: .25rem;\n  --wj-padding-bottom: .25rem;\n  --wj-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wj-input-color-invalid);\n  content: "*";\n  font-family: var(--wj-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 10px;\n  top: 2px;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) .error-message {\n  display: block;\n}\n:host([invalid]) .default label {\n  opacity: 1 !important;\n  color: var(--wj-input-color-invalid) !important;\n  animation-name: shake;\n  animation-duration: 0.4s;\n  animation-iteration-count: 1;\n}\n\n::slotted([slot=start]), ::slotted([slot=end]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: var(--wj-input-slot-padding-inline);\n}\n\nslot[name=start], slot[name=end] {\n  display: flex;\n}\n\ninput {\n  background-color: var(--wj-input-background-color);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  font-family: var(--wjinput-font-family);\n  color: var(--wj-input-color);\n  appearance: none;\n  outline: 0;\n  padding: 0.25rem 0.5rem;\n  line-height: var(--wj-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: 0.25rem 0.5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%, 41% {\n    transform: translateX(-4px);\n  }\n  25%, 58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%, 100% {\n    transform: translateX(0);\n  }\n}';
+class InputFile extends WJElement {
+  constructor(options = {}) {
     super();
-    u(this, "className", "Input");
+    __publicField(this, "className", "Input");
   }
   static get cssStyleSheet() {
-    return h;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,29 +21,50 @@ class w extends m {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, d, s) {
-    let o = document.createDocumentFragment(), n = document.createElement("div");
-    n.setAttribute("part", "native"), n.classList.add("native-input-file", this.variant || "default");
-    let a = document.createElement("input");
-    a.setAttribute("type", "file"), a.setAttribute("multiple", ""), a.setAttribute("hidden", "");
-    let e = document.createElement("wj-input");
-    e.setAttribute("variant", "standard"), e.setAttribute("type", "text"), e.setAttribute("placeholder", "Click to upload"), e.setAttribute("readonly", "");
-    let p = document.createElement("span");
-    p.setAttribute("slot", "start");
-    let l = document.createElement("wj-icon");
-    return l.setAttribute("slot", "icon-only"), l.setAttribute("name", "cloud-upload"), p.appendChild(l), e.appendChild(p), n.appendChild(e), n.appendChild(a), o.appendChild(n), this.native = n, this.input = e, this.fileInput = a, o;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-input-file", this.variant || "default");
+    let fileInput = document.createElement("input");
+    fileInput.setAttribute("type", "file");
+    fileInput.setAttribute("multiple", "");
+    fileInput.setAttribute("hidden", "");
+    let input = document.createElement("wj-input");
+    input.setAttribute("variant", "standard");
+    input.setAttribute("type", "text");
+    input.setAttribute("placeholder", "Click to upload");
+    input.setAttribute("readonly", "");
+    let span = document.createElement("span");
+    span.setAttribute("slot", "start");
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("slot", "icon-only");
+    icon.setAttribute("name", "cloud-upload");
+    span.appendChild(icon);
+    input.appendChild(span);
+    native.appendChild(input);
+    native.appendChild(fileInput);
+    fragment.appendChild(native);
+    this.native = native;
+    this.input = input;
+    this.fileInput = fileInput;
+    return fragment;
   }
   afterDraw() {
     this.input.addEventListener("click", () => {
       this.fileInput.click();
-    }), this.fileInput.addEventListener("change", (t) => {
-      for (var d = t.target.files, s = [], o = 0; o < d.length; o++)
-        s.push(d[o].name);
-      this.input.value = s.join(", ");
+    });
+    this.fileInput.addEventListener("change", (e) => {
+      var files = e.target.files;
+      var fileNames = [];
+      for (var i = 0; i < files.length; i++) {
+        fileNames.push(files[i].name);
+      }
+      this.input.value = fileNames.join(", ");
     });
   }
 }
-customElements.get("wj-input-file") || window.customElements.define("wj-input-file", w);
+customElements.get("wj-input-file") || window.customElements.define("wj-input-file", InputFile);
 export {
-  w as InputFile
+  InputFile
 };

package/dist/wj-input.js

@@ -1,18 +1,22 @@
-var j = Object.defineProperty;
-var y = (n, a, t) => a in n ? j(n, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[a] = t;
-var b = (n, a, t) => (y(n, typeof a != "symbol" ? a + "" : a, t), t);
-import x, { event as g } from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
 import "./wj-store.js";
-const A = `:host{--wj-input-font-family: var(--wj-font-family);--wj-input-background-color: var(--wj-background);--wj-input-color: var(--wj-color);--wj-input-color-invalid: var(--wj-color-danger);--wj-input-border-color: var(--wj-border-color);--wj-input-border-color-focus: var(--wj-color-primary);--wj-input-border-width: 1px;--wj-input-border-style: solid;--wj-input-border-radius: 4px;--wj-input-margin-bottom: .5rem;--wj-input-line-height: 20px;--wj-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wj-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%;position:relative}:host .native-input.default{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot=start]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot=end]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.standard .input-wrapper:hover .clear{visibility:visible}:host .native-input.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius)}:host .native-input.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wj-input-color-invalid);font-size:12px;line-height:normal}.clear{visibility:hidden;position:absolute;right:0;top:3px;--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem;--wj-button-margin-inline: 0 .25rem}:host([required]) .input-wrapper:after{color:var(--wj-input-color-invalid);content:"*";font-family:var(--wj-force-mac-font-family);font-size:20px;position:absolute;right:10px;top:2px}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wj-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot=start]),::slotted([slot=end]){display:flex;align-items:center;border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:var(--wj-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}input{background-color:var(--wj-input-background-color);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);font-family:var(--wjinput-font-family);color:var(--wj-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wj-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:black;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}
-`;
-class w extends x {
-  constructor(t = {}) {
+const styles = '/*\n[ WJ Input ]\n*/\n:host {\n  --wj-input-font-family: var(--wj-font-family);\n  --wj-input-background-color: var(--wj-background);\n  --wj-input-color: var(--wj-color);\n  --wj-input-color-invalid: var(--wj-color-danger);\n  --wj-input-border-color: var(--wj-border-color);\n  --wj-input-border-color-focus: var(--wj-color-primary);\n  --wj-input-border-width: 1px;\n  --wj-input-border-style: solid;\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: .5rem;\n  --wj-input-line-height: 20px;\n  --wj-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wj-input-margin-bottom);\n  display: block;\n}\n:host .wrapper {\n  display: flex;\n  width: 100%;\n}\n:host .native-input .input-wrapper {\n  width: 100%;\n  position: relative;\n}\n:host .native-input.default {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: 0;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.default .input-wrapper {\n  margin-inline: 0.5rem;\n}\n:host .native-input.default.focused {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.default.focused label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default input {\n  border: none;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  margin-top: -4px;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n}\n:host .native-input.default label {\n  margin: 0;\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.default label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default ::slotted([slot=start]) {\n  border-left: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.default ::slotted([slot=end]) {\n  border-right: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.standard {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  padding-inline: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.standard.focused input {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.standard input {\n  display: block;\n  min-height: 32px;\n  padding-inline: 0.5rem;\n  padding-top: 0;\n  padding-bottom: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n}\n:host .native-input.standard label {\n  margin: 0;\n  display: inline-block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.standard .input-wrapper:hover .clear {\n  visibility: visible;\n}\n:host .native-input.standard ::slotted([slot=start]) {\n  border-right: none;\n  border-radius: var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius);\n}\n:host .native-input.standard ::slotted([slot=end]) {\n  border-left: none;\n  border-radius: 0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0;\n}\n:host .native-input.standard.has-start input {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n:host .native-input.standard.has-end input {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n:host .native-input.standard .error-message {\n  position: static;\n  background: transparent;\n  padding: 0.25rem 0;\n  left: auto;\n  transform: none;\n  color: var(--wj-input-color-invalid);\n  font-size: 12px;\n  line-height: normal;\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\n  --wj-padding-top: .25rem;\n  --wj-padding-start: .25rem;\n  --wj-padding-end: .25rem;\n  --wj-padding-bottom: .25rem;\n  --wj-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wj-input-color-invalid);\n  content: "*";\n  font-family: var(--wj-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 10px;\n  top: 2px;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) .error-message {\n  display: block;\n}\n:host([invalid]) .default label {\n  opacity: 1 !important;\n  color: var(--wj-input-color-invalid) !important;\n  animation-name: shake;\n  animation-duration: 0.4s;\n  animation-iteration-count: 1;\n}\n\n::slotted([slot=start]), ::slotted([slot=end]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: var(--wj-input-slot-padding-inline);\n}\n\nslot[name=start], slot[name=end] {\n  display: flex;\n}\n\ninput {\n  background-color: var(--wj-input-background-color);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  font-family: var(--wjinput-font-family);\n  color: var(--wj-input-color);\n  appearance: none;\n  outline: 0;\n  padding: 0.25rem 0.5rem;\n  line-height: var(--wj-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: 0.25rem 0.5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%, 41% {\n    transform: translateX(-4px);\n  }\n  25%, 58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%, 100% {\n    transform: translateX(0);\n  }\n}';
+class Input extends WJElement {
+  constructor(options = {}) {
     super();
-    b(this, "className", "Input");
-    this.invalid = !1, this.pristine = !0, this.internals = this.attachInternals();
+    __publicField(this, "className", "Input");
+    this.invalid = false;
+    this.pristine = true;
+    this.internals = this.attachInternals();
   }
-  set value(t) {
-    this.setAttribute("value", t);
+  set value(value) {
+    this.setAttribute("value", value);
   }
   get value() {
     return this.getAttribute("value") || "";
@@ -26,8 +30,8 @@ class w extends x {
   get invalid() {
     return this.hasAttribute("invalid");
   }
-  set invalid(t) {
-    t && this.customErrorDisplay ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
+  set invalid(isInvalid) {
+    isInvalid && this.customErrorDisplay ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
   }
   get form() {
     return this.internals.form;
@@ -54,7 +58,7 @@ class w extends x {
     return this.internals.reportValidity();
   }
   static get cssStyleSheet() {
-    return A;
+    return styles;
   }
   static get observedAttributes() {
     return ["value"];
@@ -62,28 +66,88 @@ class w extends x {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, s) {
-    let o = this.hasSlot(this, "start"), m = this.hasSlot(this, "end"), v = document.createDocumentFragment(), r = document.createElement("div");
-    r.setAttribute("part", "native"), r.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && r.classList.add("has-error");
-    let l = document.createElement("div");
-    l.classList.add("wrapper");
-    let d = document.createElement("div");
-    d.classList.add("input-wrapper");
-    let u = document.createElement("label");
-    u.innerText = this.label, this.value && !this.hasAttribute("error") && u.classList.add("fade");
-    let i = document.createElement("input");
-    i.setAttribute("type", "text"), i.setAttribute("part", "input"), i.setAttribute("value", this.value || ""), i.classList.add("form-control"), this.hasAttribute("placeholder") && i.setAttribute("placeholder", this.placeholder), this.hasAttribute("multiple") && i.setAttribute("multiple", this.multiple), this.hasAttribute("disabled") && i.setAttribute("disabled", ""), this.hasAttribute("readonly") && i.setAttribute("readonly", ""), this.hasAttribute("maxlength") && i.setAttribute("maxlength", this.maxlength), this.hasAttribute("max") && i.setAttribute("max", this.max), this.hasAttribute("min") && i.setAttribute("min", this.min);
-    let p = document.createElement("div");
-    p.classList.add("error-message");
-    let h = null;
-    o && (h = document.createElement("slot"), h.setAttribute("name", "start"));
-    let c = null;
-    if (m && (c = document.createElement("slot"), c.setAttribute("name", "end")), o && (l.appendChild(h), r.classList.add("has-start")), this.variant === "standard" ? this.label && r.appendChild(u) : d.appendChild(u), d.appendChild(i), l.appendChild(d), r.appendChild(l), this.hasAttribute("clearable")) {
-      this.clear = document.createElement("wj-button"), this.clear.classList.add("clear"), this.clear.setAttribute("fill", "link"), this.clear.setAttribute("part", "clear");
-      let f = document.createElement("wj-icon");
-      f.setAttribute("name", "x"), this.clear.appendChild(f), d.appendChild(this.clear);
+  draw(context, store, params) {
+    let hasSlotStart = this.hasSlot(this, "start");
+    let hasSlotEnd = this.hasSlot(this, "end");
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-input", this.variant || "default");
+    if (this.hasAttribute("invalid"))
+      native.classList.add("has-error");
+    let wrapper = document.createElement("div");
+    wrapper.classList.add("wrapper");
+    let inputWrapper = document.createElement("div");
+    inputWrapper.classList.add("input-wrapper");
+    let label = document.createElement("label");
+    label.innerText = this.label;
+    if (this.value && !this.hasAttribute("error"))
+      label.classList.add("fade");
+    let input = document.createElement("input");
+    input.setAttribute("type", "text");
+    input.setAttribute("part", "input");
+    input.setAttribute("value", this.value || "");
+    input.classList.add("form-control");
+    if (this.hasAttribute("placeholder"))
+      input.setAttribute("placeholder", this.placeholder);
+    if (this.hasAttribute("multiple"))
+      input.setAttribute("multiple", this.multiple);
+    if (this.hasAttribute("disabled"))
+      input.setAttribute("disabled", "");
+    if (this.hasAttribute("readonly"))
+      input.setAttribute("readonly", "");
+    if (this.hasAttribute("maxlength"))
+      input.setAttribute("maxlength", this.maxlength);
+    if (this.hasAttribute("max"))
+      input.setAttribute("max", this.max);
+    if (this.hasAttribute("min"))
+      input.setAttribute("min", this.min);
+    let error = document.createElement("div");
+    error.classList.add("error-message");
+    let start = null;
+    if (hasSlotStart) {
+      start = document.createElement("slot");
+      start.setAttribute("name", "start");
+    }
+    let end = null;
+    if (hasSlotEnd) {
+      end = document.createElement("slot");
+      end.setAttribute("name", "end");
+    }
+    if (hasSlotStart) {
+      wrapper.appendChild(start);
+      native.classList.add("has-start");
+    }
+    if (this.variant === "standard") {
+      if (this.label)
+        native.appendChild(label);
+    } else {
+      inputWrapper.appendChild(label);
     }
-    return m && (l.appendChild(c), r.classList.add("has-end")), r.appendChild(p), v.appendChild(r), this.native = r, this.labelElement = u, this.input = i, this.errorMessage = p, v;
+    inputWrapper.appendChild(input);
+    wrapper.appendChild(inputWrapper);
+    native.appendChild(wrapper);
+    if (this.hasAttribute("clearable")) {
+      this.clear = document.createElement("wj-button");
+      this.clear.classList.add("clear");
+      this.clear.setAttribute("fill", "link");
+      this.clear.setAttribute("part", "clear");
+      let clearIcon = document.createElement("wj-icon");
+      clearIcon.setAttribute("name", "x");
+      this.clear.appendChild(clearIcon);
+      inputWrapper.appendChild(this.clear);
+    }
+    if (hasSlotEnd) {
+      wrapper.appendChild(end);
+      native.classList.add("has-end");
+    }
+    native.appendChild(error);
+    fragment.appendChild(native);
+    this.native = native;
+    this.labelElement = label;
+    this.input = input;
+    this.errorMessage = error;
+    return fragment;
   }
   afterDraw() {
     [
@@ -96,49 +160,84 @@ class w extends x {
       "minLength",
       "maxLength",
       "pattern"
-    ].forEach((t) => {
-      const e = t === "required" ? this.hasAttribute(t) : this.getAttribute(t);
-      e != null && (this.input[t] = e);
-    }), this.input.addEventListener("focus", (t) => {
-      this.labelElement.classList.add("fade"), this.native.classList.add("focused");
-    }), this.input.addEventListener("blur", (t) => {
-      this.native.classList.remove("focused"), t.target.value || this.labelElement.classList.remove("fade");
-    }), this.input.addEventListener("input", (t) => {
-      this.validateOnChange && (this.pristine = !1), this.input.classList.remove("pristine"), this.labelElement.classList.add("fade");
-      const e = new t.constructor(t.type, t);
-      this.dispatchEvent(e), this.validateInput(), g.dispatchCustomEvent(this, "wj-input:input", {
+    ].forEach((attr) => {
+      const attrValue = attr === "required" ? this.hasAttribute(attr) : this.getAttribute(attr);
+      if (attrValue !== null && attrValue !== void 0) {
+        this.input[attr] = attrValue;
+      }
+    });
+    this.input.addEventListener("focus", (e) => {
+      this.labelElement.classList.add("fade");
+      this.native.classList.add("focused");
+    });
+    this.input.addEventListener("blur", (e) => {
+      this.native.classList.remove("focused");
+      if (!e.target.value)
+        this.labelElement.classList.remove("fade");
+    });
+    this.input.addEventListener("input", (e) => {
+      if (this.validateOnChange) {
+        this.pristine = false;
+      }
+      this.input.classList.remove("pristine");
+      this.labelElement.classList.add("fade");
+      const clone = new e.constructor(e.type, e);
+      this.dispatchEvent(clone);
+      this.validateInput();
+      event.dispatchCustomEvent(this, "wj-input:input", {
         value: this.input.value
       });
-    }), this.addEventListener("invalid", (t) => {
-      this.invalid = !0, this.pristine = !1, this.errorMessage.textContent = this.internals.validationMessage, this.customErrorDisplay && t.preventDefault();
-    }), this.addEventListener("focus", () => this.input.focus()), this.clear && this.clear.addEventListener("wj:button-click", (t) => {
-      this.input.value = "", g.dispatchCustomEvent(this.clear, "wj-input:clear");
     });
+    this.addEventListener("invalid", (e) => {
+      this.invalid = true;
+      this.pristine = false;
+      this.errorMessage.textContent = this.internals.validationMessage;
+      if (this.customErrorDisplay) {
+        e.preventDefault();
+      }
+    });
+    this.addEventListener("focus", () => this.input.focus());
+    if (this.clear) {
+      this.clear.addEventListener("wj:button-click", (e) => {
+        this.input.value = "";
+        event.dispatchCustomEvent(this.clear, "wj-input:clear");
+      });
+    }
   }
   validateInput() {
-    const t = this.input.validity;
-    if (this.invalid = !1, t.valid)
-      this.internals.setValidity({}), this.pristine = !1, this.errorMessage.textContent = this.input.validationMessage;
-    else
-      for (let e in t) {
-        const s = `message-${e.toString()}`;
-        if (t[e]) {
-          this.validationError = e.toString(), this.invalid = !this.pristine && !t.valid;
-          let o = this.message;
-          this.hasAttribute("message") || (o = this.hasAttribute(s) ? this.getAttribute(s) : this.input.validationMessage), this.internals.setValidity(
-            { [this.validationError]: !0 },
-            o
-          ), this.invalid && this.customErrorDisplay && this.dispatchEvent(new Event("invalid"));
+    const validState = this.input.validity;
+    this.invalid = false;
+    if (!validState.valid) {
+      for (let state in validState) {
+        const attr = `message-${state.toString()}`;
+        if (validState[state]) {
+          this.validationError = state.toString();
+          this.invalid = !this.pristine && !validState.valid;
+          let errorMessage = this.message;
+          if (!this.hasAttribute("message"))
+            errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;
+          this.internals.setValidity(
+            { [this.validationError]: true },
+            errorMessage
+          );
+          if (this.invalid && this.customErrorDisplay) {
+            this.dispatchEvent(new Event("invalid"));
+          }
         }
       }
+    } else {
+      this.internals.setValidity({});
+      this.pristine = false;
+      this.errorMessage.textContent = this.input.validationMessage;
+    }
   }
-  hasSlot(t, e = null) {
-    let s = e ? `[slot="${e}"]` : "[slot]";
-    return t.querySelectorAll(s).length > 0;
+  hasSlot(el, slotName = null) {
+    let selector = slotName ? `[slot="${slotName}"]` : "[slot]";
+    return el.querySelectorAll(selector).length > 0 ? true : false;
   }
 }
-b(w, "formAssociated", !0);
-customElements.get("wj-input") || window.customElements.define("wj-input", w);
+__publicField(Input, "formAssociated", true);
+customElements.get("wj-input") || window.customElements.define("wj-input", Input);
 export {
-  w as Input
+  Input
 };

package/dist/wj-item.js

@@ -1,30 +1,47 @@
-var s = Object.defineProperty;
-var d = (i, e, t) => e in i ? s(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var o = (i, e, t) => (d(i, typeof e != "symbol" ? e + "" : e, t), t);
-import l from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const m = `:host{--wj-border-width: 0 0 1px 0;--wj-item-background: transparent;--wj-item-background-hover: var(--wj-color-contrast-3);--wj-item-padding-top: 0px;--wj-item-padding-bottom: 0px;--wj-item-padding-end: 0px;--wj-item-padding-start: 0px;--wj-item-inner-border-width: 0 0 1px 0;--wj-item-inner-padding-top: 0px;--wj-item-inner-padding-bottom: 0px;--wj-item-inner-padding-start: 0px;--wj-item-inner-padding-end: 0px;--wj-item-inner-box-shadow: none;--wj-item-min-height: 40px;--wj-item-transition: opacity 15ms linear, background-color 15ms linear;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--wj-item-color);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box;width:100%}.item-native{border-radius:var(--wj-item-border-radius);padding-top:var(--wj-item-padding-top);padding-bottom:var(--wj-item-padding-bottom);padding-inline:var(--wj-item-padding-start) var(--wj-item-padding-end);margin:0;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--wj-item-min-height);transition:var(--wj-item-transition);outline:none;background:var(--wj-item-background);overflow:inherit;box-sizing:border-box;z-index:1;text-decoration:none;color:var(--wj-item-color)}.item-native .item-inner{margin:0;padding:var(--wj-item-inner-padding-top) var(--wj-item-inner-padding-end) var(--wj-item-inner-padding-bottom) var(--wj-item-inner-padding-start);display:flex;position:relative;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--wj-border-width);border-style:var(--wj-border-style);border-color:var(--wj-border-color);box-shadow:var(--wj-item-inner-box-shadow);overflow:inherit;box-sizing:border-box}.item-native .item-inner .input-wrapper{display:flex;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}.item-native .item-bottom{padding:0 var(--wj-item-inner-padding-end) 0 var(--wj-item-padding-start);display:flex;justify-content:space-between}@media (any-hover: hover){:host(:hover) .item-native{color:var(--wj-item-color)}:host(:hover) .item-native :after{transition:var(--wj-item-transition);z-index:-1;top:0;right:0;bottom:0;left:0;position:absolute;content:"";background:var(--wj-item-background-hover);opacity:.7}}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted([slot=start]){margin-inline:0 1rem}::slotted(wj-label:not([slot=end])){flex:1 1 0}
-`;
-class p extends l {
+const styles = '/*\n[ WJ Item ]\n*/\n:host {\n  --wj-border-width: 0 0 1px 0;\n  --wj-item-background: transparent;\n  --wj-item-background-hover: var(--wj-color-contrast-3);\n  --wj-item-padding-top: 0px;\n  --wj-item-padding-bottom: 0px;\n  --wj-item-padding-end: 0px;\n  --wj-item-padding-start: 0px;\n  --wj-item-inner-border-width: 0 0 1px 0;\n  --wj-item-inner-padding-top: 0px;\n  --wj-item-inner-padding-bottom: 0px;\n  --wj-item-inner-padding-start: 0px;\n  --wj-item-inner-padding-end: 0px;\n  --wj-item-inner-box-shadow: none;\n  --wj-item-min-height: 40px;\n  --wj-item-transition: opacity 15ms linear, background-color 15ms linear;\n  display: block;\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n  outline: none;\n  color: var(--wj-item-color);\n  text-align: initial;\n  text-decoration: none;\n  overflow: hidden;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.item-native {\n  border-radius: var(--wj-item-border-radius);\n  padding-top: var(--wj-item-padding-top);\n  padding-bottom: var(--wj-item-padding-bottom);\n  padding-inline: var(--wj-item-padding-start) var(--wj-item-padding-end);\n  margin: 0;\n  display: flex;\n  position: relative;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  min-height: var(--wj-item-min-height);\n  transition: var(--wj-item-transition);\n  outline: none;\n  background: var(--wj-item-background);\n  overflow: inherit;\n  box-sizing: border-box;\n  z-index: 1;\n  text-decoration: none;\n  color: var(--wj-item-color);\n}\n.item-native .item-inner {\n  margin: 0;\n  padding: var(--wj-item-inner-padding-top) var(--wj-item-inner-padding-end) var(--wj-item-inner-padding-bottom) var(--wj-item-inner-padding-start);\n  display: flex;\n  position: relative;\n  flex: 1 1 0;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  min-height: inherit;\n  border-width: var(--wj-border-width);\n  border-style: var(--wj-border-style);\n  border-color: var(--wj-border-color);\n  box-shadow: var(--wj-item-inner-box-shadow);\n  overflow: inherit;\n  box-sizing: border-box;\n}\n.item-native .item-inner .input-wrapper {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  text-overflow: ellipsis;\n  overflow: inherit;\n  box-sizing: border-box;\n}\n.item-native .item-bottom {\n  padding: 0 var(--wj-item-inner-padding-end) 0 var(--wj-item-padding-start);\n  display: flex;\n  justify-content: space-between;\n}\n\n@media (any-hover: hover) {\n  :host(:hover) .item-native {\n    color: var(--wj-item-color);\n  }\n  :host(:hover) .item-native :after {\n    transition: var(--wj-item-transition);\n    z-index: -1;\n    inset: 0;\n    position: absolute;\n    content: "";\n    background: var(--wj-item-background-hover);\n    opacity: 0.7;\n  }\n}\nbutton,\na {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n\n::slotted(wj-label:not([slot=end])) {\n  flex: 1 1 0;\n}';
+class Item extends WJElement {
   constructor() {
     super();
-    o(this, "hostContext", (t, n) => n.closest(t) !== null);
-    this.labelColorStyles = {}, this.itemStyles = /* @__PURE__ */ new Map(), this.inheritedAriaAttributes = {}, this.multipleInputs = !1, this.focusable = !0, this.button = !1, this.detailIcon = "", this.disabled = !1, this.counter = !1, this.routerDirection = "forward", this.type = "button";
+    __publicField(this, "hostContext", (selector, el) => {
+      return el.closest(selector) !== null;
+    });
+    this.labelColorStyles = {};
+    this.itemStyles = /* @__PURE__ */ new Map();
+    this.inheritedAriaAttributes = {};
+    this.multipleInputs = false;
+    this.focusable = true;
+    this.button = false;
+    this.detailIcon = ``;
+    this.disabled = false;
+    this.counter = false;
+    this.routerDirection = "forward";
+    this.type = "button";
   }
   isClickable() {
     return this.hasAttribute("href") || this.button;
   }
   static get cssStyleSheet() {
-    return m;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(t, n, a) {
+  beforeDraw(context, store, params) {
   }
-  draw(t, n, a) {
-    const r = this.isClickable() ? this.hasAttribute("href") === void 0 ? "button" : "a" : "div";
-    return this.hostContext("wj-list", this) && this.classList.add("wj-item-list"), `<${r} class="item-native" part="native">
+  draw(context, store, params) {
+    const TagType = this.isClickable() ? this.hasAttribute("href") === void 0 ? "button" : "a" : "div";
+    if (this.hostContext("wj-list", this)) {
+      this.classList.add("wj-item-list");
+    }
+    return `<${TagType} class="item-native" part="native">
 			<slot name="start"></slot>
 			<div class="item-inner">
 					<div class="input-wrapper">
@@ -33,14 +50,14 @@ class p extends l {
 					<slot name="end"></slot>
 			</div>
 			<div class="item-highlight"></div>
-    </${r}>
+    </${TagType}>
 		<div class="item-bottom">
 				<slot name="error"></slot>
 				<slot name="helper"></slot>
 		</div>`;
   }
 }
-customElements.get("wj-item") || window.customElements.define("wj-item", p);
+customElements.get("wj-item") || window.customElements.define("wj-item", Item);
 export {
-  p as Item
+  Item
 };

package/dist/wj-label.js

@@ -1,19 +1,19 @@
-var i = Object.defineProperty;
-var c = (e, t, o) => t in e ? i(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var s = (e, t, o) => (c(e, typeof t != "symbol" ? t + "" : t, o), o);
-import w from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
-* direction.scss
-*/:host(.wj-color-primary){--wj-color: #7252D3 !important}:host(.wj-color-complete){--wj-color: #0072EC !important}:host(.wj-color-success){--wj-color-base: #19AD79 !important;--wj-color-contrast: #fff !important}:host(.wj-color-warning){--wj-color-base: #FFd945 !important;--wj-color-contrast: #4b4b4b !important}:host(.wj-color-danger){--wj-color-base: #D83C31 !important;--wj-color-contrast: #fff !important}:host(.wj-color-info){--wj-color-base: #3B4752 !important;--wj-color-contrast: #fff !important}:host(.wj-color-menu){--wj-color-base: #2b303b !important;--wj-color-contrast: #fff !important}:host{--wj-color: initial;display:block;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}:host(.wj-color){color:var(--wj-color-base)}:host(.wj-text-wrap),:host([text-wrap]){white-space:normal!important}:host(.label-fixed){flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.label-stacked),:host(.label-floating){margin:0;align-self:stretch;width:auto;max-width:100%}:host(.label-no-animate.label-floating){transition:none}::slotted(*) h1,::slotted(*) h2,::slotted(*) h3,::slotted(*) h4,::slotted(*) h5,::slotted(*) h6{text-overflow:inherit;overflow:inherit}:host(.wj-color){color:var(--wj-color)}::slotted(*:first-child){margin-top:0!important}::slotted(*:last-child){margin-bottom:0!important}
-`;
-class h extends w {
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host(.wj-color-primary) {\n  --wj-color: #7252D3 !important;\n}\n:host(.wj-color-complete) {\n  --wj-color: #0072EC !important;\n}\n:host(.wj-color-success) {\n  --wj-color-base: #19AD79 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-warning) {\n  --wj-color-base: #FFd945 !important;\n  --wj-color-contrast: #4b4b4b !important;\n}\n:host(.wj-color-danger) {\n  --wj-color-base: #D83C31 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-info) {\n  --wj-color-base: #3B4752 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-menu) {\n  --wj-color-base: #2b303b !important;\n  --wj-color-contrast: #fff !important;\n}\n:host {\n  --wj-color: initial;\n  display: block;\n  font-size: inherit;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n:host(.wj-color) {\n  color: var(--wj-color-base);\n}\n:host(.wj-text-wrap),\n:host([text-wrap]) {\n  white-space: normal !important;\n}\n:host(.label-fixed) {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n:host(.label-stacked),\n:host(.label-floating) {\n  margin: 0;\n  align-self: stretch;\n  width: auto;\n  max-width: 100%;\n}\n:host(.label-no-animate.label-floating) {\n  transition: none;\n}\n::slotted(*) h1,\n::slotted(*) h2,\n::slotted(*) h3,\n::slotted(*) h4,\n::slotted(*) h5,\n::slotted(*) h6 {\n  text-overflow: inherit;\n  overflow: inherit;\n}\n:host(.wj-color) {\n  color: var(--wj-color);\n}\n::slotted(*:first-child) {\n  margin-top: 0 !important;\n}\n::slotted(*:last-child) {\n  margin-bottom: 0 !important;\n}";
+class Label extends WJElement {
   constructor() {
     super();
-    s(this, "className", "Label");
+    __publicField(this, "className", "Label");
   }
   static get cssStyleSheet() {
-    return m;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -21,16 +21,18 @@ class h extends w {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(o, a, r) {
+  beforeDraw(context, store, params) {
   }
-  draw(o, a, r) {
-    let l = document.createDocumentFragment();
-    this.color && this.classList.add("wj-color-" + r.color, "wj-color");
-    let n = document.createElement("slot");
-    return l.appendChild(n), l;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    if (this.color)
+      this.classList.add("wj-color-" + params.color, "wj-color");
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
   }
 }
-customElements.get("wj-label") || window.customElements.define("wj-label", h);
+customElements.get("wj-label") || window.customElements.define("wj-label", Label);
 export {
-  h as Label
+  Label
 };