wj-elements 0.0.3 → 0.0.4

package/dist/wj-input.js

@@ -1,22 +1,20 @@
-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";
+var g = Object.defineProperty;
+var w = (n, a, t) => a in n ? g(n, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[a] = t;
+var b = (n, a, t) => (w(n, typeof a != "symbol" ? a + "" : a, t), t);
+import y from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Input ]\n*/\n:host {\n  --wj-input-font-family: Inter UI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n  --wj-input-background-color: #fff;\n  --wj-input-color: #212121;\n  --wj-input-color-invalid: #b91e1e;\n  --wj-input-border-color: rgba(33, 33, 33, 0.14);\n  --wj-input-border-color-focus: #7252D3;\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}\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  border-top-color: rgba(8, 8, 8, 0.14);\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 ::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:host([required]) .input-wrapper::after {\n  color: var(--wj-input-color-invalid);\n  content: "*";\n  font-family: -apple-system, BlinkMacSystemFont, "Inter UI", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  font-size: 20px;\n  position: absolute;\n  right: 10px;\n  top: 2px;\n}\n:host([required]) .standard .input-wrapper::after {\n  top: 0px;\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::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}\nslot[name=start], slot[name=end] {\n  display: flex;\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  border-top-color: rgba(33, 33, 33, 0.21);\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.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@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 = {}) {
+const j = `/*!
+* direction.scss
+*/:host{--wj-input-font-family: Inter UI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;--wj-input-background-color: #fff;--wj-input-color: #212121;--wj-input-color-invalid: #b91e1e;--wj-input-border-color: rgba(33, 33, 33, .14);--wj-input-border-color-focus: #7252D3;--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%}: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);border-top-color:#08080824;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 ::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}:host([required]) .input-wrapper:after{color:var(--wj-input-color-invalid);content:"*";font-family:-apple-system,BlinkMacSystemFont,Inter UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;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);border-top-color:#21212136;-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 f extends y {
+  constructor(t = {}) {
     super();
-    __publicField(this, "className", "Input");
-    this.invalid = false;
-    this.pristine = true;
-    this.internals = this.attachInternals();
+    b(this, "className", "Input");
+    this.invalid = !1, this.pristine = !0, this.internals = this.attachInternals();
   }
-  set value(value) {
-    this.setAttribute("value", value);
+  set value(t) {
+    this.setAttribute("value", t);
   }
   get value() {
     return this.getAttribute("value") || "";
@@ -30,8 +28,8 @@ class Input extends WJElement {
   get invalid() {
     return this.hasAttribute("invalid");
   }
-  set invalid(isInvalid) {
-    isInvalid && this.customErrorDisplay ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
+  set invalid(t) {
+    t && this.customErrorDisplay ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
   }
   get form() {
     return this.internals.form;
@@ -58,7 +56,7 @@ class Input extends WJElement {
     return this.internals.reportValidity();
   }
   static get cssStyleSheet() {
-    return styles;
+    return j;
   }
   static get observedAttributes() {
     return ["value"];
@@ -66,70 +64,23 @@ class Input extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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("disabled"))
-      input.setAttribute("disabled", "");
-    if (this.hasAttribute("readonly"))
-      input.setAttribute("readonly", "");
-    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);
-    }
-    inputWrapper.appendChild(input);
-    wrapper.appendChild(inputWrapper);
-    native.appendChild(wrapper);
-    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;
+  draw(t, e, s) {
+    let o = this.hasSlot(this, "start"), v = this.hasSlot(this, "end"), m = document.createDocumentFragment(), i = document.createElement("div");
+    i.setAttribute("part", "native"), i.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && i.classList.add("has-error");
+    let l = document.createElement("div");
+    l.classList.add("wrapper");
+    let u = document.createElement("div");
+    u.classList.add("input-wrapper");
+    let d = document.createElement("label");
+    d.innerText = this.label, this.value && !this.hasAttribute("error") && d.classList.add("fade");
+    let r = document.createElement("input");
+    r.setAttribute("type", "text"), r.setAttribute("part", "input"), r.setAttribute("value", this.value || ""), r.classList.add("form-control"), this.hasAttribute("placeholder") && r.setAttribute("placeholder", this.placeholder), this.hasAttribute("disabled") && r.setAttribute("disabled", ""), this.hasAttribute("readonly") && r.setAttribute("readonly", "");
+    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;
+    return v && (c = document.createElement("slot"), c.setAttribute("name", "end")), o && (l.appendChild(h), i.classList.add("has-start")), this.variant === "standard" ? this.label && i.appendChild(d) : u.appendChild(d), u.appendChild(r), l.appendChild(u), i.appendChild(l), v && (l.appendChild(c), i.classList.add("has-end")), i.appendChild(p), m.appendChild(i), this.native = i, this.labelElement = d, this.input = r, this.errorMessage = p, m;
   }
   afterDraw() {
     [
@@ -142,75 +93,45 @@ class Input extends WJElement {
       "minLength",
       "maxLength",
       "pattern"
-    ].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();
-    });
-    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());
+    ].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();
+    }), 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());
   }
   validateInput() {
-    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"));
-          }
+    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"));
         }
       }
-    } else {
-      this.internals.setValidity({});
-      this.pristine = false;
-      this.errorMessage.textContent = this.input.validationMessage;
-    }
   }
-  hasSlot(el, slotName = null) {
-    let selector = slotName ? `[slot="${slotName}"]` : "[slot]";
-    return el.querySelectorAll(selector).length > 0 ? true : false;
+  hasSlot(t, e = null) {
+    let s = e ? `[slot="${e}"]` : "[slot]";
+    return t.querySelectorAll(s).length > 0;
   }
 }
-__publicField(Input, "formAssociated", true);
-customElements.get("wj-input") || window.customElements.define("wj-input", Input);
+b(f, "formAssociated", !0);
+customElements.get("wj-input") || window.customElements.define("wj-input", f);
 export {
-  Input
+  f as Input
 };

package/dist/wj-item.js

@@ -1,47 +1,32 @@
-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";
+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";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Item ]\n*/\n:host {\n  --wj-item-color: $color-contrast-higher;\n  --wj-border-width: 0 0 1px 0;\n  --wj-item-background: transparent;\n  --wj-item-background-hover: #f4f4f4;\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.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-left: var(--wj-item-padding-start);\n  padding-right: 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@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::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n::slotted(wj-label) {\n  margin: 10px 8px 10px 0;\n}\n::slotted(wj-label:not([slot=end])) {\n  flex: 1 1 0;\n}';
-class Item extends WJElement {
+const m = `/*!
+* direction.scss
+*/:host{--wj-item-color: $color-contrast-higher;--wj-border-width: 0 0 1px 0;--wj-item-background: transparent;--wj-item-background-hover: #f4f4f4;--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-left:var(--wj-item-padding-start);padding-right: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){margin:10px 8px 10px 0}::slotted(wj-label:not([slot=end])){flex:1 1 0}
+`;
+class p extends l {
   constructor() {
     super();
-    __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";
+    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";
   }
   isClickable() {
     return this.hasAttribute("href") || this.button;
   }
   static get cssStyleSheet() {
-    return styles;
+    return m;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(context, store, params) {
+  beforeDraw(t, n, a) {
   }
-  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">
+  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">
 			<slot name="start"></slot>
 			<div class="item-inner">
 					<div class="input-wrapper">
@@ -50,14 +35,14 @@ class Item extends WJElement {
 					<slot name="end"></slot>
 			</div>
 			<div class="item-highlight"></div>
-    </${TagType}>
+    </${r}>
 		<div class="item-bottom">
 				<slot name="error"></slot>
 				<slot name="helper"></slot>
 		</div>`;
   }
 }
-customElements.get("wj-item") || window.customElements.define("wj-item", Item);
+customElements.get("wj-item") || window.customElements.define("wj-item", p);
 export {
-  Item
+  p as Item
 };

package/dist/wj-label.js

@@ -1,19 +1,19 @@
-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";
+var n = Object.defineProperty;
+var c = (e, t, o) => t in e ? n(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";
 import "./wj-store.js";
-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-label-text-wrap-font-size: 13px;\n  --wj-label-text-wrap-line-height: 1.4;\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  font-size: var(--wj-label-text-wrap-font-size);\n  line-height: var(--wj-label-text-wrap-line-height);\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 {
+const h = `/*!
+* 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-label-text-wrap-font-size: 13px;--wj-label-text-wrap-line-height: 1.4}: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;font-size:var(--wj-label-text-wrap-font-size);line-height:var(--wj-label-text-wrap-line-height)}: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 m extends w {
   constructor() {
     super();
-    __publicField(this, "className", "Label");
+    s(this, "className", "Label");
   }
   static get cssStyleSheet() {
-    return styles;
+    return h;
   }
   static get observedAttributes() {
     return [];
@@ -21,18 +21,16 @@ class Label extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(context, store, params) {
+  beforeDraw(o, a, r) {
   }
-  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;
+  draw(o, a, r) {
+    let l = document.createDocumentFragment();
+    this.color && this.classList.add("wj-color-" + r.color, "wj-color");
+    let i = document.createElement("slot");
+    return l.appendChild(i), l;
   }
 }
-customElements.get("wj-label") || window.customElements.define("wj-label", Label);
+customElements.get("wj-label") || window.customElements.define("wj-label", m);
 export {
-  Label
+  m as Label
 };

package/dist/wj-list.js

@@ -1,35 +1,32 @@
-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";
+var o = Object.defineProperty;
+var a = (e, t, s) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var n = (e, t, s) => (a(e, typeof t != "symbol" ? t + "" : t, s), s);
+import l from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ List ]\n*/\n:host {\n  --wj-list-inset-padding: 1rem;\n  --wj-list-border-radius: 8px;\n  --wj-list-background: #fff;\n  margin: 0;\n  padding: 0;\n  display: block;\n  contain: content;\n  list-style-type: none;\n}\n:host(.wj-inset) {\n  background: var(--wj-list-background);\n  transform: translateZ(0);\n  overflow: hidden;\n  padding: var(--wj-list-inset-padding);\n  border-radius: var(--wj-list-border-radius);\n}\n:host(.wj-lines-none) ::slotted(wj-item) {\n  --wj-border-width: 0 !important;\n}";
-class List extends WJElement {
+const d = `/*!
+* direction.scss
+*/:host{--wj-list-inset-padding: 1rem;--wj-list-border-radius: 8px;--wj-list-background: #fff;margin:0;padding:0;display:block;contain:content;list-style-type:none}:host(.wj-inset){background:var(--wj-list-background);transform:translateZ(0);overflow:hidden;padding:var(--wj-list-inset-padding);border-radius:var(--wj-list-border-radius)}:host(.wj-lines-none) ::slotted(wj-item){--wj-border-width: 0 !important}
+`;
+class c extends l {
   constructor() {
     super();
-    __publicField(this, "className", "List");
+    n(this, "className", "List");
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(s, m, w) {
+    let i = document.createDocumentFragment(), r = document.createElement("slot");
+    return i.appendChild(r), i;
   }
   afterDraw() {
-    this.classList.toggle("wj-lines-" + this.lines, this.hasAttribute("lines"));
-    this.classList.toggle("wj-inset", this.hasAttribute("inset"));
+    this.classList.toggle("wj-lines-" + this.lines, this.hasAttribute("lines")), this.classList.toggle("wj-inset", this.hasAttribute("inset"));
   }
 }
-customElements.get("wj-list") || window.customElements.define("wj-list", List);
+customElements.get("wj-list") || window.customElements.define("wj-list", c);
 export {
-  List
+  c as List
 };

package/dist/wj-main.js

@@ -1,19 +1,19 @@
-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";
+var a = Object.defineProperty;
+var i = (t, e, s) => e in t ? a(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var o = (t, e, s) => (i(t, typeof e != "symbol" ? e + "" : e, s), s);
+import m from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Main ]\n*/\n:host {\n  display: block;\n  flex: 1;\n  flex-basis: auto;\n  padding: 1.5rem;\n  box-sizing: border-box;\n}";
-class Main extends WJElement {
+const c = `/*!
+* direction.scss
+*/:host{display:block;flex:1;flex-basis:auto;padding:1.5rem;box-sizing:border-box}
+`;
+class l extends m {
   constructor() {
     super();
-    __publicField(this, "className", "Main");
+    o(this, "className", "Main");
   }
   static get cssStyleSheet() {
-    return styles;
+    return c;
   }
   static get observedAttributes() {
     return [];
@@ -21,14 +21,12 @@ class Main extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(s, d, u) {
+    let n = document.createDocumentFragment(), r = document.createElement("slot");
+    return n.appendChild(r), n;
   }
 }
-customElements.get("wj-main") || window.customElements.define("wj-main", Main);
+customElements.get("wj-main") || window.customElements.define("wj-main", l);
 export {
-  Main
+  l as Main
 };