wj-elements 0.0.4 → 0.0.6

package/dist/wj-radio.js

@@ -1,13 +1,11 @@
 var c = Object.defineProperty;
-var s = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var a = (i, t, e) => (s(i, typeof t != "symbol" ? t + "" : t, e), e);
-import l, { event as n } from "./wj-element.js";
+var l = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var a = (i, t, e) => (l(i, typeof t != "symbol" ? t + "" : t, e), e);
+import s, { event as n } from "./wj-element.js";
 import "./wj-store.js";
-const b = `/*!
-* direction.scss
-*/:host{--wj-radio-margin-top: 0;--wj-radio-margin-bottom: .5rem;--wj-radio-margin-inline: 0;display:block;margin-top:var(--wj-radio-margin-top);margin-bottom:var(--wj-radio-margin-bottom);margin-inline:var(--wj-radio-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-flex;cursor:pointer;position:relative;padding-left:25px;min-width:16px;min-height:16px;margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:#fff;border:1px solid #c9c9c9}.native-radio input[type=radio]+label:before{border-radius:99px;-webkit-transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33);transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33)}.native-radio input[type=radio]:checked+label:before{border-color:#757575;border-width:5px}.native-radio input[type=radio]:hover:active:not(:checked)+label:before{background-color:#00000014}.native-radio input[type=radio]:focus+label{color:#212121}.native-radio input[type=radio]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-radio input[type=radio]{opacity:0;position:absolute;top:3px;width:16px;height:16px}.native-radio input[type=radio][disabled]+label{cursor:not-allowed!important;color:#4b4b4b;opacity:.58}.native-radio input[type=radio][disabled]+label:before{cursor:not-allowed!important;background:#ececec}.success input[type=radio]:checked+label:before{border-color:#19ad79}.primary input[type=radio]:checked+label:before{border-color:#7252d3}.complete input[type=radio]:checked+label:before{border-color:#0072ec}.warning input[type=radio]:checked+label:before{border-color:#ffd945}.danger input[type=radio]:checked+label:before{border-color:#d83c31}.neutral input[type=radio]:checked+label:before{border-color:#3b4752}
+const p = `:host{--wj-radio-margin-top: 0;--wj-radio-margin-bottom: .5rem;--wj-radio-margin-inline: 0;display:block;margin-top:var(--wj-radio-margin-top);margin-bottom:var(--wj-radio-margin-bottom);margin-inline:var(--wj-radio-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-flex;cursor:pointer;position:relative;padding-left:1.5rem;min-width:16px;min-height:16px;margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wj-color-contrast-1);border:1px solid var(--wj-color-contrast-4)}.native-radio input[type=radio]+label:before{border-radius:var(--wj-border-radius-circle);transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33)}.native-radio input[type=radio]:checked+label:before{border-color:var(--wj-color-contrast-6);border-width:5px}.native-radio input[type=radio]:focus+label{color:var(--wj-color)}.native-radio input[type=radio]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-radio input[type=radio]{opacity:0;position:absolute;top:3px;width:16px;height:16px}.native-radio input[type=radio][disabled]+label{cursor:not-allowed!important;color:var(--wj-color-contrast-9);opacity:.5}.native-radio input[type=radio][disabled]+label:before{cursor:not-allowed!important}.success input[type=radio]:checked+label:before{border-color:var(--wj-color-success)}.primary input[type=radio]:checked+label:before{border-color:var(--wj-color-primary)}.complete input[type=radio]:checked+label:before{border-color:var(--wj-color-complete)}.warning input[type=radio]:checked+label:before{border-color:var(--wj-color-warning)}.danger input[type=radio]:checked+label:before{border-color:var(--wj-color-danger)}.neutral input[type=radio]:checked+label:before{border-color:var(--wj-color-info)}
 `;
-class p extends l {
+class h extends s {
   constructor() {
     super();
     a(this, "className", "Radio");
@@ -23,7 +21,7 @@ class p extends l {
     return this._checked;
   }
   static get cssStyleSheet() {
-    return b;
+    return p;
   }
   static get observedAttributes() {
     return ["checked"];
@@ -31,11 +29,11 @@ class p extends l {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, h, u) {
-    let d = document.createDocumentFragment(), o = document.createElement("div");
-    o.classList.add("native-radio"), this.color && o.classList.add(this.color), this.input = document.createElement("input"), this.input.type = "radio", this.input.id = "radio", this.input.name = this.name + "-radio", this.input.checked = this.hasAttribute("checked"), this.input.disabled = this.hasAttribute("disabled"), this.input.indeterminate = this.hasAttribute("indeterminate");
-    let r = document.createElement("label");
-    return r.htmlFor = "radio", r.innerHTML = "<slot></slot>", o.appendChild(this.input), o.appendChild(r), d.appendChild(o), d;
+  draw(e, b, u) {
+    let d = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-radio"), this.color && r.classList.add(this.color), this.input = document.createElement("input"), this.input.type = "radio", this.input.id = "radio", this.input.name = this.name + "-radio", this.input.checked = this.hasAttribute("checked"), this.input.disabled = this.hasAttribute("disabled"), this.input.indeterminate = this.hasAttribute("indeterminate");
+    let o = document.createElement("label");
+    return o.htmlFor = "radio", o.innerHTML = "<slot></slot>", r.appendChild(this.input), r.appendChild(o), d.appendChild(r), d;
   }
   afterDraw() {
     this.hasAttribute("disabled") || (n.addListener(this, "click", "wj:radio:change"), n.addListener(this, "click", "wj:radio:input"));
@@ -44,7 +42,7 @@ class p extends l {
     n.removeElement(this);
   }
 }
-customElements.get("wj-radio") || window.customElements.define("wj-radio", p);
+customElements.get("wj-radio") || window.customElements.define("wj-radio", h);
 export {
-  p as Radio
+  h as Radio
 };

package/dist/wj-rate.js

@@ -0,0 +1,127 @@
+var c = Object.defineProperty;
+var u = (a, o, e) => o in a ? c(a, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[o] = e;
+var n = (a, o, e) => (u(a, typeof o != "symbol" ? o + "" : o, e), e);
+import d from "./wj-element.js";
+import "./wj-store.js";
+const v = `:host{display:flex}.native-rate{position:relative;display:flex;gap:var(--wj-rate-gap, .25rem)}.wj-rate-icon{position:relative;cursor:pointer}.selected{color:var(--wj-color-danger)}:host(:not([readonly])) .wj-rate-icon:hover{transform:scale(1.2)}.half wj-icon:first-child{color:#fff}.half wj-icon:last-child{color:currentColor;position:absolute;top:0;left:0}:host([disabled]) .native-rate{pointer-events:none;opacity:.5}
+`;
+class m extends d {
+  constructor() {
+    super();
+    n(this, "className", "Rate");
+    /*
+     * Events - Mouse
+     */
+    n(this, "onMouseEnter", (e) => {
+      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.clientX), this.changeRate();
+    });
+    n(this, "onMouseLeave", (e) => {
+      e.preventDefault(), this.hoverValue = 0, this.changeRate();
+    });
+    n(this, "onMouseMove", (e) => {
+      e.preventDefault();
+      let i = this.getValueFromXPosition(e.clientX);
+      i != this.hoverValue && (this.hoverValue = i, this.changeRate());
+    });
+    /*
+     * Events - Touch
+     */
+    n(this, "onTouchStart", (e) => {
+      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX), this.changeRate();
+    });
+    n(this, "onTouchEnd", (e) => {
+      e.preventDefault(), this.hoverValue = 0, this.changeRate();
+    });
+    n(this, "onTouchMove", (e) => {
+      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX), this.changeRate();
+    });
+    n(this, "onClick", (e) => {
+      e.preventDefault(), this.value = +this.hoverValue;
+    });
+  }
+  set precision(e) {
+    this.setAttribute("precision", e);
+  }
+  get precision() {
+    return this.hasAttribute("precision") ? +this.getAttribute("precision") : 1;
+  }
+  set max(e) {
+    this.setAttribute("max", e);
+  }
+  get max() {
+    return this.hasAttribute("icons") ? this.icons.length : +this.getAttribute("max");
+  }
+  set icons(e) {
+    return e;
+  }
+  get icons() {
+    return this.hasAttribute("icons") ? JSON.parse(this.getAttribute("icons").replace(/'/g, '"')) : ["star-filled"];
+  }
+  set value(e) {
+    this.setAttribute("value", e);
+  }
+  get value() {
+    return this.hasAttribute("value") ? +this.getAttribute("value") : 0;
+  }
+  static get cssStyleSheet() {
+    return v;
+  }
+  static get observedAttributes() {
+    return ["is-hover"];
+  }
+  attributeChangedCallback(e, i, t) {
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, i, t) {
+    let r = document.createDocumentFragment(), s = document.createElement("div");
+    if (s.setAttribute("part", "native"), s.classList.add("native-rate"), this.native = s, this.hasAttribute("icons")) {
+      let h = this.icons;
+      for (let l = 0; l < h.length; l++)
+        s.appendChild(this.createIcons(l));
+    } else
+      for (let h = 0; h < this.max; h++)
+        s.appendChild(this.createIcons(h));
+    return this.changeRate(), r.appendChild(s), r;
+  }
+  afterDraw() {
+    this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this.addEventListener("mouseenter", this.onMouseEnter), this.addEventListener("mouseleave", this.onMouseLeave), this.addEventListener("mousemove", this.onMouseMove), this.addEventListener("touchstart", this.onTouchStart), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("touchmove", this.onTouchMove), this.addEventListener("click", this.onClick));
+  }
+  createIcons(e) {
+    let i = document.createElement("div");
+    i.classList.add("wj-rate-icon");
+    let t = this.getIcons(e);
+    if (i.appendChild(t), this.value > e && this.value < e + 1) {
+      let r = t.cloneNode(!0);
+      i.appendChild(r);
+    }
+    return i;
+  }
+  changeRate() {
+    const e = this.native.children, i = this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== void 0 ? this.hoverValue : this.value;
+    for (let t = 0; t < e.length; t++)
+      if (e[t].classList.remove("selected", "hovered"), e[t].children.length > 1 && (e[t].classList.remove("half"), e[t].querySelector("wj-icon:first-child").removeAttribute("style"), e[t].querySelector("wj-icon:last-child").remove()), t < i && e[t].classList.add("selected"), i > t && i < t + 1 && e[t].children.length === 1) {
+        let r = e[t].querySelector("wj-icon").cloneNode(!0);
+        e[t].appendChild(r);
+        let s = (i - t) * 100;
+        e[t].classList.add("half"), e[t].querySelector("wj-icon:first-child").style.clipPath = `inset(0 0 0 ${s}%)`, e[t].querySelector("wj-icon:last-child").style.clipPath = `inset(0 ${s}% 0 0)`;
+      }
+  }
+  getIcons(e) {
+    let i = document.createElement("wj-icon");
+    return i.setAttribute("name", this.max ? this.icons[0] : this.icons[e]), i;
+  }
+  getValueFromXPosition(e) {
+    const { left: i, right: t, width: r } = this.native.getBoundingClientRect(), s = this.roundToPrecision((e - i) / r * this.max, this.precision);
+    return Math.min(Math.max(s, 0), this.max);
+  }
+  roundToPrecision(e, i = 0.5) {
+    const t = 1 / i;
+    return Math.ceil(e * t) / t;
+  }
+}
+customElements.get("wj-rate") || window.customElements.define("wj-rate", m);
+export {
+  m as Rate
+};

package/dist/wj-relative-time.js

@@ -0,0 +1,50 @@
+var g = Object.defineProperty;
+var h = (n, i, t) => i in n ? g(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
+var d = (n, i, t) => (h(n, typeof i != "symbol" ? i + "" : i, t), t);
+import v from "./wj-element.js";
+import { L as p } from "./localize-762a9f0f.js";
+import "./wj-store.js";
+const w = "";
+class S extends v {
+  constructor() {
+    super();
+    d(this, "className", "RelativeTime");
+    this.localizer = new p(this);
+  }
+  get dateISO() {
+    let t = /* @__PURE__ */ new Date(), e = this.getAttribute("date");
+    return this.hasAttribute("date") && (this.isISODate(e) ? e = e : e = +e * 1e3, t = new Date(e)), t.toISOString();
+  }
+  static get cssStyleSheet() {
+    return w;
+  }
+  static get observedAttributes() {
+    return [""];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, e, l) {
+    let s = document.createDocumentFragment(), a = document.createElement("div");
+    return a.setAttribute("part", "native"), a.classList.add("native-relative-time"), a.innerText = this.getRelativeTimeString(this.dateISO), s.appendChild(a), s;
+  }
+  getRelativeTimeString(t, e = navigator.language) {
+    const s = new Date(t).getTime(), a = Math.round((s - Date.now()) / 1e3), o = [
+      60,
+      3600,
+      86400,
+      86400 * 7,
+      86400 * 30,
+      86400 * 365,
+      1 / 0
+    ], m = ["second", "minute", "hour", "day", "week", "month", "year"], r = o.findIndex((u) => u > Math.abs(a)), c = r ? o[r - 1] : 1;
+    return this.localizer.relativeTime(Math.floor(a / c), m[r], { numeric: "auto" });
+  }
+  isISODate(t) {
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\+\d{2}:\d{2}|Z)$/.test(t);
+  }
+}
+customElements.get("wj-relative-time") || window.customElements.define("wj-relative-time", S);
+export {
+  S as RelativeTime
+};

package/dist/wj-router-link.js

@@ -1,21 +1,19 @@
 var i = Object.defineProperty;
-var c = (e, t, s) => t in e ? i(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var o = (e, t, s) => (c(e, typeof t != "symbol" ? t + "" : t, s), s);
-import a from "./wj-element.js";
-import { b as l } from "./router-links-e0087f84.js";
+var a = (e, t, r) => t in e ? i(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var o = (e, t, r) => (a(e, typeof t != "symbol" ? t + "" : t, r), r);
+import c from "./wj-element.js";
+import { b as u } from "./router-links-e0087f84.js";
 import "./wj-store.js";
-const u = `/*!
-* direction.scss
-*/:host{display:block}:host(.active){cursor:pointer;font-weight:700}
+const l = `:host{display:block;background:transparent!important}:host(.active){cursor:pointer;font-weight:700}
 `;
-class m extends a {
+class m extends c {
   constructor() {
     super();
     o(this, "className", "RouterLink");
-    l(this, { selector: !1 });
+    u(this, { selector: !1 });
   }
   static get cssStyleSheet() {
-    return u;
+    return l;
   }
   static get observedAttributes() {
     return [];
@@ -23,9 +21,9 @@ class m extends a {
   setupAttributes() {
     this.isShadowRoot = "open", this.setAttribute("active-class", "active");
   }
-  draw(s, d, p) {
-    let r = document.createDocumentFragment(), n = document.createElement("slot");
-    return r.appendChild(n), r;
+  draw(r, p, d) {
+    let s = document.createDocumentFragment(), n = document.createElement("slot");
+    return s.appendChild(n), s;
   }
 }
 customElements.get("wj-router-link") || window.customElements.define("wj-router-link", m);

package/dist/wj-row.js

@@ -1,31 +1,30 @@
-var w = Object.defineProperty;
-var l = (e, t, g) => t in e ? w(e, t, { enumerable: !0, configurable: !0, writable: !0, value: g }) : e[t] = g;
-var o = (e, t, g) => (l(e, typeof t != "symbol" ? t + "" : t, g), g);
-import u from "./wj-element.js";
+var m = Object.defineProperty;
+var w = (e, t, g) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: g }) : e[t] = g;
+var o = (e, t, g) => (w(e, typeof t != "symbol" ? t + "" : t, g), g);
+import l from "./wj-element.js";
 import "./wj-store.js";
-const r = `/*!
+const u = `/*!
 * direction.scss
 */:host{display:flex;flex-wrap:wrap}:host(.wj-wrap){flex-wrap:wrap!important}:host{--wj-gutter-x: 1.5rem;--wj-gutter-y: 0;display:flex;flex-wrap:nowrap;margin-top:calc(var(--wj-gutter-y) * -1);margin-right:calc(var(--wj-gutter-x) * -.5);margin-left:calc(var(--wj-gutter-x) * -.5)}:host(.g-0),:host(.gx-0){--wj-gutter-x: 0}:host(.g-0),:host(.gy-0){--wj-gutter-y: 0}:host(.g-1),:host(.gx-1){--wj-gutter-x: .25rem}:host(.g-1),:host(.gy-1){--wj-gutter-y: .25rem}:host(.g-2),:host(.gx-2){--wj-gutter-x: .5rem}:host(.g-2),:host(.gy-2){--wj-gutter-y: .5rem}:host(.g-3),:host(.gx-3){--wj-gutter-x: 1rem}:host(.g-3),:host(.gy-3){--wj-gutter-y: 1rem}:host(.g-4),:host(.gx-4){--wj-gutter-x: 1.5rem}:host(.g-4),:host(.gy-4){--wj-gutter-y: 1.5rem}:host(.g-5),:host(.gx-5){--wj-gutter-x: 3rem}:host(.g-5),:host(.gy-5){--wj-gutter-y: 3rem}@media (min-width: 576px){:host(.g-sm-0),:host(.gx-sm-0){--wj-gutter-x: 0}:host(.g-sm-0),:host(.gy-sm-0){--wj-gutter-y: 0}:host(.g-sm-1),:host(.gx-sm-1){--wj-gutter-x: .25rem}:host(.g-sm-1),:host(.gy-sm-1){--wj-gutter-y: .25rem}:host(.g-sm-2),:host(.gx-sm-2){--wj-gutter-x: .5rem}:host(.g-sm-2),:host(.gy-sm-2){--wj-gutter-y: .5rem}:host(.g-sm-3),:host(.gx-sm-3){--wj-gutter-x: 1rem}:host(.g-sm-3),:host(.gy-sm-3){--wj-gutter-y: 1rem}:host(.g-sm-4),:host(.gx-sm-4){--wj-gutter-x: 1.5rem}:host(.g-sm-4),:host(.gy-sm-4){--wj-gutter-y: 1.5rem}:host(.g-sm-5),:host(.gx-sm-5){--wj-gutter-x: 3rem}:host(.g-sm-5),:host(.gy-sm-5){--wj-gutter-y: 3rem}}@media (min-width: 768px){:host(.g-md-0),:host(.gx-md-0){--wj-gutter-x: 0}:host(.g-md-0),:host(.gy-md-0){--wj-gutter-y: 0}:host(.g-md-1),:host(.gx-md-1){--wj-gutter-x: .25rem}:host(.g-md-1),:host(.gy-md-1){--wj-gutter-y: .25rem}:host(.g-md-2),:host(.gx-md-2){--wj-gutter-x: .5rem}:host(.g-md-2),:host(.gy-md-2){--wj-gutter-y: .5rem}:host(.g-md-3),:host(.gx-md-3){--wj-gutter-x: 1rem}:host(.g-md-3),:host(.gy-md-3){--wj-gutter-y: 1rem}:host(.g-md-4),:host(.gx-md-4){--wj-gutter-x: 1.5rem}:host(.g-md-4),:host(.gy-md-4){--wj-gutter-y: 1.5rem}:host(.g-md-5),:host(.gx-md-5){--wj-gutter-x: 3rem}:host(.g-md-5),:host(.gy-md-5){--wj-gutter-y: 3rem}}@media (min-width: 992px){:host(.g-lg-0),:host(.gx-lg-0){--wj-gutter-x: 0}:host(.g-lg-0),:host(.gy-lg-0){--wj-gutter-y: 0}:host(.g-lg-1),:host(.gx-lg-1){--wj-gutter-x: .25rem}:host(.g-lg-1),:host(.gy-lg-1){--wj-gutter-y: .25rem}:host(.g-lg-2),:host(.gx-lg-2){--wj-gutter-x: .5rem}:host(.g-lg-2),:host(.gy-lg-2){--wj-gutter-y: .5rem}:host(.g-lg-3),:host(.gx-lg-3){--wj-gutter-x: 1rem}:host(.g-lg-3),:host(.gy-lg-3){--wj-gutter-y: 1rem}:host(.g-lg-4),:host(.gx-lg-4){--wj-gutter-x: 1.5rem}:host(.g-lg-4),:host(.gy-lg-4){--wj-gutter-y: 1.5rem}:host(.g-lg-5),:host(.gx-lg-5){--wj-gutter-x: 3rem}:host(.g-lg-5),:host(.gy-lg-5){--wj-gutter-y: 3rem}}@media (min-width: 1200px){:host(.g-xl-0),:host(.gx-xl-0){--wj-gutter-x: 0}:host(.g-xl-0),:host(.gy-xl-0){--wj-gutter-y: 0}:host(.g-xl-1),:host(.gx-xl-1){--wj-gutter-x: .25rem}:host(.g-xl-1),:host(.gy-xl-1){--wj-gutter-y: .25rem}:host(.g-xl-2),:host(.gx-xl-2){--wj-gutter-x: .5rem}:host(.g-xl-2),:host(.gy-xl-2){--wj-gutter-y: .5rem}:host(.g-xl-3),:host(.gx-xl-3){--wj-gutter-x: 1rem}:host(.g-xl-3),:host(.gy-xl-3){--wj-gutter-y: 1rem}:host(.g-xl-4),:host(.gx-xl-4){--wj-gutter-x: 1.5rem}:host(.g-xl-4),:host(.gy-xl-4){--wj-gutter-y: 1.5rem}:host(.g-xl-5),:host(.gx-xl-5){--wj-gutter-x: 3rem}:host(.g-xl-5),:host(.gy-xl-5){--wj-gutter-y: 3rem}}@media (min-width: 1400px){:host(.g-xxl-0),:host(.gx-xxl-0){--wj-gutter-x: 0}:host(.g-xxl-0),:host(.gy-xxl-0){--wj-gutter-y: 0}:host(.g-xxl-1),:host(.gx-xxl-1){--wj-gutter-x: .25rem}:host(.g-xxl-1),:host(.gy-xxl-1){--wj-gutter-y: .25rem}:host(.g-xxl-2),:host(.gx-xxl-2){--wj-gutter-x: .5rem}:host(.g-xxl-2),:host(.gy-xxl-2){--wj-gutter-y: .5rem}:host(.g-xxl-3),:host(.gx-xxl-3){--wj-gutter-x: 1rem}:host(.g-xxl-3),:host(.gy-xxl-3){--wj-gutter-y: 1rem}:host(.g-xxl-4),:host(.gx-xxl-4){--wj-gutter-x: 1.5rem}:host(.g-xxl-4),:host(.gy-xxl-4){--wj-gutter-y: 1.5rem}:host(.g-xxl-5),:host(.gx-xxl-5){--wj-gutter-x: 3rem}:host(.g-xxl-5),:host(.gy-xxl-5){--wj-gutter-y: 3rem}}:host(.wj-justify-content-center){justify-content:center!important}:host(.wj-justify-content-end){justify-content:flex-end!important}:host(.wj-justify-content-between){justify-content:space-between!important}:host(.wj-justify-content-around){justify-content:space-around!important}:host(.wj-align-items-start){align-items:baseline!important}:host(.wj-align-items-center){align-items:center!important}:host(.wj-align-items-end){align-items:flex-end!important}
 `;
-console.log("STYLES ROW:", r);
-class j extends u {
+class j extends l {
   constructor() {
     super();
     o(this, "className", "Row");
   }
   static get cssStyleSheet() {
-    return r;
+    return u;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(g, h, x) {
+  beforeDraw(g, r, h) {
   }
-  draw(g, h, x) {
+  draw(g, r, h) {
     let s = document.createDocumentFragment();
     this.hasAttribute("wrap") && this.classList.add("wj-wrap");
-    let m = document.createElement("slot");
-    return s.appendChild(m), s;
+    let x = document.createElement("slot");
+    return s.appendChild(x), s;
   }
 }
 customElements.get("wj-row") || window.customElements.define("wj-row", j);

package/dist/wj-slider.js

@@ -5,7 +5,7 @@ import w from "./wj-element.js";
 import "./wj-store.js";
 const p = `/*!
 * direction.scss
-*/:host{--wj-slider-track-height: 4px;position:relative;display:flex;align-items:center;max-width:100%}:host .native-slider{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit}:host .slider{display:flex;align-items:center;position:relative;flex:1 1 0%;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}input[type=range]{-webkit-appearance:none;width:100%;height:var(--wj-slider-track-height);margin:0;border-radius:5px;background-size:70% 100%;background-repeat:no-repeat;--wj-slider-color: #7252D3;--wj-slider-thumb-color: #7252D3;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #7252D3),var(--wj-slider-color, #7252D3))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-moz-range-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:pointer;transition:background .3s ease-in-out;border:0}input[type=range]::-ms-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range][color=primary]{--wj-slider-color: #7252D3;--wj-slider-thumb-color: #7252D3;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #7252D3),var(--wj-slider-color, #7252D3))}input[type=range][color=primary]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-ms-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=success]{--wj-slider-color: #19AD79;--wj-slider-thumb-color: #19AD79;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #d6f7f0;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #19AD79),var(--wj-slider-color, #19AD79))}input[type=range][color=success]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-ms-thumb{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=complete]{--wj-slider-color: #0072EC;--wj-slider-thumb-color: #0072EC;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #d3eeff;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #0072EC),var(--wj-slider-color, #0072EC))}input[type=range][color=complete]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-ms-thumb{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=danger]{--wj-slider-color: #D83C31;--wj-slider-thumb-color: #D83C31;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #fde2da;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #D83C31),var(--wj-slider-color, #D83C31))}input[type=range][color=danger]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-ms-thumb{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=warning]{--wj-slider-color: #FFd945;--wj-slider-thumb-color: #FFd945;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #fffde1;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #FFd945),var(--wj-slider-color, #FFd945))}input[type=range][color=warning]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-ms-thumb{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=contrast]{--wj-slider-color: #fff;--wj-slider-thumb-color: #fff;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px white;--wj-slider-track-color: #757575;background-color:var(--wj-slider-track-color, #757575);background-image:linear-gradient(var(--wj-slider-color, #fff),var(--wj-slider-color, #fff))}input[type=range][color=contrast]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px white)}input[type=range][color=contrast]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px white)}input[type=range][color=contrast]::-ms-thumb{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px white)}input[type=range][color=contrast]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range]::-ms-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}datalist{display:flex;justify-content:space-between;height:auto;overflow:hidden;margin-top:16px}datalist option:before{content:"";display:block;width:0;height:auto;padding-left:3px;text-indent:0}output{position:absolute;background:#000;color:#fff;top:-46px;padding:4px 8px;border-radius:4px}::slotted([slot=label]){margin-inline:0 1rem;font-size:14px}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}
+*/:host{--wj-slider-track-height: 4px;position:relative;display:flex;align-items:center;max-width:100%}:host .native-slider{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit}:host .slider{display:flex;align-items:center;position:relative;flex:1 1 0%;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}input[type=range]{-webkit-appearance:none;width:100%;height:var(--wj-slider-track-height);margin:0;border-radius:5px;background-size:70% 100%;background-repeat:no-repeat;--wj-slider-color: #7252D3;--wj-slider-thumb-color: #7252D3;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #7252D3),var(--wj-slider-color, #7252D3))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-moz-range-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:pointer;transition:background .3s ease-in-out;border:0}input[type=range]::-ms-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range][color=primary]{--wj-slider-color: #7252D3;--wj-slider-thumb-color: #7252D3;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #7252D3),var(--wj-slider-color, #7252D3))}input[type=range][color=primary]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-ms-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=primary]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range][color=success]{--wj-slider-color: #19AD79;--wj-slider-thumb-color: #19AD79;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #d6f7f0;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #19AD79),var(--wj-slider-color, #19AD79))}input[type=range][color=success]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-ms-thumb{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=success]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #19AD79);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0)}input[type=range][color=complete]{--wj-slider-color: #0072EC;--wj-slider-thumb-color: #0072EC;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #d3eeff;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #0072EC),var(--wj-slider-color, #0072EC))}input[type=range][color=complete]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-ms-thumb{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=complete]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #0072EC);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff)}input[type=range][color=danger]{--wj-slider-color: #D83C31;--wj-slider-thumb-color: #D83C31;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #fde2da;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #D83C31),var(--wj-slider-color, #D83C31))}input[type=range][color=danger]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-ms-thumb{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=danger]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #D83C31);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da)}input[type=range][color=warning]{--wj-slider-color: #FFd945;--wj-slider-thumb-color: #FFd945;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px #fffde1;--wj-slider-track-color: #dbe6e8;background-color:var(--wj-slider-track-color, #dbe6e8);background-image:linear-gradient(var(--wj-slider-color, #FFd945),var(--wj-slider-color, #FFd945))}input[type=range][color=warning]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-ms-thumb{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=warning]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #FFd945);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1)}input[type=range][color=contrast]{--wj-slider-color: #fff;--wj-slider-thumb-color: #fff;--wj-slider-thumb-shadow: none;--wj-slider-thumb-shadow-active: 0 0 0 7px white;--wj-slider-track-color: #757575;background-color:var(--wj-slider-track-color, #757575);background-image:linear-gradient(var(--wj-slider-color, #fff),var(--wj-slider-color, #fff))}input[type=range][color=contrast]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px white)}input[type=range][color=contrast]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px white)}input[type=range][color=contrast]::-ms-thumb{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px white)}input[type=range][color=contrast]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range][color=contrast]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #fff);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px white)}input[type=range]::-webkit-slider-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range]::-moz-range-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range]::-ms-thumb{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb)}input[type=range]::-webkit-slider-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-moz-range-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-ms-thumb:active{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-webkit-slider-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-moz-range-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}input[type=range]::-ms-thumb:hover{background:var(--wj-slider-thumb-color, #7252D3);box-shadow:var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb)}datalist{display:flex;justify-content:space-between;height:auto;overflow:hidden;margin-top:16px}datalist option:before{content:"";display:block;width:0;height:auto;padding-left:3px;text-indent:0}output{position:absolute;background:var(--wj-color-contrast-11);color:var(--wj-color-contrast-0);top:-46px;padding:4px 8px;border-radius:4px}::slotted([slot=label]){margin-inline:0 1rem;font-size:var(--wj-font-size)}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}
 `;
 class m extends w {
   constructor() {
@@ -47,7 +47,7 @@ class m extends w {
     return p;
   }
   static get observedAttributes() {
-    return ["max"];
+    return ["max", "value"];
   }
   setupAttributes() {
     this.isShadowRoot = "open";
@@ -59,16 +59,16 @@ class m extends w {
     i.className = "slider";
     let n = document.createElement("slot");
     n.name = "label";
-    let u = document.createElement("slot");
-    u.name = "start";
     let l = document.createElement("slot");
-    l.name = "end";
+    l.name = "start";
+    let u = document.createElement("slot");
+    u.name = "end";
     let d = document.createElement("output");
     d.setAttribute("for", "slider"), d.id = "output", d.setAttribute("hidden", "");
     let r = document.createElement("input");
     return r.type = "range", r.min = this.min, r.max = this.max, r.step = this.step, r.value = this.value, r.id = "slider", r.name = "slider", r.part = "slider", r.setAttribute("autocomplete", "off"), r.setAttribute("color", this.color || ""), r.addEventListener("input", (h) => {
       this.setHandlePosition(h.target);
-    }), i.appendChild(r), this.hasAttribute("bubble") && i.appendChild(d), t.appendChild(n), t.appendChild(u), t.appendChild(i), t.appendChild(l), e.appendChild(t), this.input = r, this.output = d, e;
+    }), i.appendChild(r), this.hasAttribute("bubble") && i.appendChild(d), t.appendChild(n), t.appendChild(l), t.appendChild(i), t.appendChild(u), e.appendChild(t), this.input = r, this.output = d, e;
   }
   afterDraw() {
     this.setHandlePosition(), this.hasAttribute("bubble") && (this.output.innerHTML = this.input.value, this.output.removeAttribute("hidden"), setTimeout(this.setBubble, 50)), this.dispatchInit(this.input.value), this.input.addEventListener("input", (e) => {

package/dist/wj-split-view.js

@@ -13,9 +13,7 @@ function m(s, e) {
   }
   document.addEventListener("pointermove", t, { passive: !0 }), document.addEventListener("pointerup", l), (e == null ? void 0 : e.initialEvent) instanceof PointerEvent && t(e.initialEvent);
 }
-const u = `/*!
-* direction.scss
-*/:host{--wj-split-view-divider-area: 12px;--wj-split-view-divider-width: 4px;--wj-split-view-min: 0%;--wj-split-view-max: 100%;--wj-split-view-calc-a: 50%;--wj-split-view-calc-b: 50%;--wj-split-view-clamp-a: clamp(var(--wj-split-view-min), var(--wj-split-view-calc-a), var(--wj-split-view-max));--wj-split-view-clamp-b: clamp(var(--wj-split-view-min), var(--wj-split-view-calc-b), var(--wj-split-view-max));--wj-split-view-divider-background: var(--wj-border-color);--wj-split-view-divider-size: 4px;height:100%;width:100%}::slotted([slot=start]),::slotted([slot=end]){width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}:host(:not([vertical])) ::slotted([slot=start]){width:var(--wj-split-view-clamp-a)}:host(:not([vertical])) ::slotted([slot=end]){width:var(--wj-split-view-clamp-b)}:host([vertical]) ::slotted([slot=start]){height:var(--wj-split-view-clamp-a);width:100%}:host([vertical]) ::slotted([slot=end]){height:var(--wj-split-view-clamp-b);width:100%}.native-split-view{height:100%;width:100%;display:flex;flex-direction:row;overflow:hidden;position:relative}:host([vertical]) .native-split-view{flex-direction:column}.wj-divider{display:flex;position:relative;align-items:center;justify-content:center;z-index:1;background-color:var(--wj-split-view-divider-background);height:100%;width:var(--wj-split-view-divider-size);cursor:col-resize}.wj-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wj-split-view-divider-area) / -2 + var(--wj-split-view-divider-width) / 2);width:var(--wj-split-view-divider-area)}:host([vertical]) .wj-divider{height:var(--wj-split-view-divider-size);width:100%;cursor:row-resize}:host([vertical]) .wj-divider:after{width:100%;top:calc(var(--wj-split-view-divider-area) / -2 + var(--wj-split-view-divider-width) / 2);height:var(--wj-split-view-divider-area)}
+const u = `:host{--wj-split-view-divider-area: 12px;--wj-split-view-divider-width: 4px;--wj-split-view-min: 0%;--wj-split-view-max: 100%;--wj-split-view-calc-a: 50%;--wj-split-view-calc-b: 50%;--wj-split-view-clamp-a: clamp(var(--wj-split-view-min), var(--wj-split-view-calc-a), var(--wj-split-view-max));--wj-split-view-clamp-b: clamp(var(--wj-split-view-min), var(--wj-split-view-calc-b), var(--wj-split-view-max));--wj-split-view-divider-background: var(--wj-border-color);--wj-split-view-divider-size: 4px;height:100%;width:100%}::slotted([slot=start]),::slotted([slot=end]){width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}:host(:not([vertical])) ::slotted([slot=start]){width:var(--wj-split-view-clamp-a)}:host(:not([vertical])) ::slotted([slot=end]){width:var(--wj-split-view-clamp-b)}:host([vertical]) ::slotted([slot=start]){height:var(--wj-split-view-clamp-a);width:100%}:host([vertical]) ::slotted([slot=end]){height:var(--wj-split-view-clamp-b);width:100%}.native-split-view{height:100%;width:100%;display:flex;flex-direction:row;overflow:hidden;position:relative}:host([vertical]) .native-split-view{flex-direction:column}.wj-divider{display:flex;position:relative;align-items:center;justify-content:center;z-index:1;background-color:var(--wj-split-view-divider-background);height:100%;width:var(--wj-split-view-divider-size);cursor:col-resize}.wj-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wj-split-view-divider-area) / -2 + var(--wj-split-view-divider-width) / 2);width:var(--wj-split-view-divider-area)}:host([vertical]) .wj-divider{height:var(--wj-split-view-divider-size);width:100%;cursor:row-resize}:host([vertical]) .wj-divider:after{width:100%;top:calc(var(--wj-split-view-divider-area) / -2 + var(--wj-split-view-divider-width) / 2);height:var(--wj-split-view-divider-area)}
 `;
 class j extends h {
   constructor() {

package/dist/wj-textarea.js

@@ -1,20 +1,18 @@
 var u = Object.defineProperty;
 var x = (r, a, t) => a in r ? u(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
-var d = (r, a, t) => (x(r, typeof a != "symbol" ? a + "" : a, t), t);
+var s = (r, a, t) => (x(r, typeof a != "symbol" ? a + "" : a, t), t);
 import p, { event as h } from "./wj-element.js";
 import "./wj-store.js";
-const b = `/*!
-* direction.scss
-*/:host{--wj-textarea-font-family: Inter UI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;--wj-textarea-background-color: #fff;--wj-textarea-color: #212121;--wj-textarea-color-invalid: #b91e1e;--wj-textarea-border-width: 1px;--wj-textarea-border-style: solid;--wj-textarea-border-color: rgba(33, 33, 33, .14);--wj-textarea-border-color-focus: #7252D3;--wj-textarea-border-radius: 4px;--wj-textarea-margin-bottom: .5rem;--wj-textarea-line-height: 20px;--wj-textarea-padding: .5rem;width:100%;margin-bottom:var(--wj-textarea-margin-bottom);display:block}:host .wrapper{display:flex;width:100%;border-width:var(--wj-textarea-border-width);border-style:var(--wj-textarea-border-style);border-color:var(--wj-textarea-border-color);border-radius:var(--wj-textarea-border-radius)}:host textarea{font-family:var(--wj-textarea-font-family);color:var(--wj-textarea-color);font-size:14px;border:0 none;padding:0 var(--wj-textarea-padding)}:host textarea:focus{outline:none}:host([resize=auto]) textarea,:host([resize=none]) textarea{resize:none}.native-textarea .input-wrapper{width:100%;line-height:normal}.native-textarea.default{background-color:var(--wj-textarea-background-color);font-family:var(--wj-textarea-font-family);position:relative;padding-inline:0;padding-top:0;transition:background-color .2s ease;cursor:text}.native-textarea.default.focused .wrapper{border-color:var(--wj-textarea-border-color-focus)!important}.native-textarea.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}.native-textarea.default textarea{border:none;padding-top:0;background:none;box-shadow:none;width:calc(100% - var(--wj-textarea-padding) * 2);max-width:calc(100% - var(--wj-textarea-padding) * 2);min-width:calc(100% - var(--wj-textarea-padding) * 2)}.native-textarea.default label{padding:0 var(--wj-textarea-padding);display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-textarea-line-height);padding-top:.25rem}.native-textarea.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-textarea.default ::slotted([slot=start]){border-left:none;border-top:none;border-bottom:none}.native-textarea.default ::slotted([slot=end]){border-right:none;border-top:none;border-bottom:none}.native-textarea.standard{background-color:var(--wj-textarea-background-color);font-family:var(--wj-textarea-font-family);position:relative;border-radius:var(--wj-textarea-border-radius);padding:0;transition:background-color .2s ease;cursor:text}.native-textarea.standard.focused .wrapper{border-color:var(--wj-textarea-border-color-focus)!important}.native-textarea.standard textarea{display:block;min-height:32px;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wj-textarea-border-radius)}.native-textarea.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-textarea-line-height)}.native-textarea.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-textarea-border-radius) 0 0 var(--wj-textarea-border-radius)}.native-textarea.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-textarea-border-radius) var(--wj-textarea-border-radius) 0}.native-textarea.standard.has-start textarea{border-top-left-radius:0;border-bottom-left-radius:0}.native-textarea.standard.has-end textarea{border-top-right-radius:0;border-bottom-right-radius:0}.native-textarea.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wj-textarea-color-invalid);font-size:12px;line-height:normal}.counter{float:right}
+const b = `:host{--wj-textarea-font-family: var(--wj-font-family);--wj-textarea-background-color: var(--wj-background);--wj-textarea-color: var(--wj-color);--wj-textarea-color-invalid: var(--wj-color-danger);--wj-textarea-border-width: 1px;--wj-textarea-border-style: solid;--wj-textarea-border-color: var(--wj-border-color);--wj-textarea-border-color-focus: var(--wj-color-primary);--wj-textarea-border-radius: 4px;--wj-textarea-margin-bottom: .5rem;--wj-textarea-line-height: 20px;--wj-textarea-padding: .5rem;width:100%;margin-bottom:var(--wj-textarea-margin-bottom);display:block}:host .wrapper{display:flex;width:100%;border-width:var(--wj-textarea-border-width);border-style:var(--wj-textarea-border-style);border-color:var(--wj-textarea-border-color);border-radius:var(--wj-textarea-border-radius)}:host textarea{font-family:var(--wj-textarea-font-family);color:var(--wj-textarea-color);font-size:14px;border:0 none;padding:0 var(--wj-textarea-padding)}:host textarea:focus{outline:none}:host([resize=auto]) textarea,:host([resize=none]) textarea{resize:none}.native-textarea .input-wrapper{width:100%;line-height:normal}.native-textarea.default{background-color:var(--wj-textarea-background-color);font-family:var(--wj-textarea-font-family);position:relative;padding-inline:0;padding-top:0;transition:background-color .2s ease;cursor:text}.native-textarea.default.focused .wrapper{border-color:var(--wj-textarea-border-color-focus)!important}.native-textarea.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}.native-textarea.default textarea{border:none;padding-top:0;background:none;box-shadow:none;width:calc(100% - var(--wj-textarea-padding) * 2);max-width:calc(100% - var(--wj-textarea-padding) * 2);min-width:calc(100% - var(--wj-textarea-padding) * 2)}.native-textarea.default label{padding:0 var(--wj-textarea-padding);display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-textarea-line-height);padding-top:.25rem}.native-textarea.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-textarea.default ::slotted([slot=start]){border-left:none;border-top:none;border-bottom:none}.native-textarea.default ::slotted([slot=end]){border-right:none;border-top:none;border-bottom:none}.native-textarea.standard{background-color:var(--wj-textarea-background-color);font-family:var(--wj-textarea-font-family);position:relative;border-radius:var(--wj-textarea-border-radius);padding:0;transition:background-color .2s ease;cursor:text}.native-textarea.standard.focused .wrapper{border-color:var(--wj-textarea-border-color-focus)!important}.native-textarea.standard textarea{display:block;min-height:32px;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wj-textarea-border-radius)}.native-textarea.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-textarea-line-height)}.native-textarea.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-textarea-border-radius) 0 0 var(--wj-textarea-border-radius)}.native-textarea.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-textarea-border-radius) var(--wj-textarea-border-radius) 0}.native-textarea.standard.has-start textarea{border-top-left-radius:0;border-bottom-left-radius:0}.native-textarea.standard.has-end textarea{border-top-right-radius:0;border-bottom-right-radius:0}.native-textarea.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wj-textarea-color-invalid);font-size:12px;line-height:normal}.counter{float:right}
 `;
-class m extends p {
+class v extends p {
   constructor() {
     super();
-    d(this, "className", "Textarea");
-    d(this, "setTextareaHeight", () => {
+    s(this, "className", "Textarea");
+    s(this, "setTextareaHeight", () => {
       this.getAttribute("resize") === "auto" && (this.input.style.height = "auto", this.input.style.height = this.input.scrollHeight + "px");
     });
-    d(this, "counter", (t) => {
+    s(this, "counter", (t) => {
       this.counterElement.innerText = t.target.value.length + "/" + this.input.maxLength;
     });
     this._checked = !1;
@@ -34,22 +32,22 @@ class m extends p {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, v, g) {
+  draw(t, m, w) {
     let l = document.createDocumentFragment(), i = document.createElement("div");
     i.classList.add("native-textarea", this.variant || "default"), this.hasAttribute("invalid") && i.classList.add("has-error");
     let c = document.createElement("div");
     c.classList.add("wrapper");
-    let o = document.createElement("div");
-    o.classList.add("input-wrapper");
-    let n = document.createElement("label");
-    n.htmlFor = "textarea", n.innerHTML = this.label || "";
+    let n = document.createElement("div");
+    n.classList.add("input-wrapper");
+    let o = document.createElement("label");
+    o.htmlFor = "textarea", o.innerHTML = this.label || "";
     let e = document.createElement("textarea");
-    if (e.id = "textarea", e.name = this.name, e.disabled = this.hasAttribute("disabled"), e.innerText = this.innerText, e.classList.add("form-control"), e.setAttribute("part", "input"), e.setAttribute("rows", this.rows || 3), e.setAttribute("spellcheck", !1), this.resize === "auto" && e.addEventListener("input", this.setTextareaHeight), this.variant === "standard" ? this.label && i.appendChild(n) : o.appendChild(n), o.appendChild(e), c.appendChild(o), i.appendChild(c), l.appendChild(i), this.hasAttribute("counter")) {
+    if (e.id = "textarea", e.name = this.name, e.disabled = this.hasAttribute("disabled"), e.innerText = this.innerText, e.classList.add("form-control"), e.setAttribute("part", "input"), e.setAttribute("rows", this.rows || 3), e.setAttribute("spellcheck", !1), this.resize === "auto" && e.addEventListener("input", this.setTextareaHeight), this.variant === "standard" ? this.label && i.appendChild(o) : n.appendChild(o), n.appendChild(e), c.appendChild(n), i.appendChild(c), l.appendChild(i), this.hasAttribute("counter")) {
       e.maxLength = this.maxLength || 1e3, e.addEventListener("input", this.counter);
-      let s = document.createElement("div");
-      s.classList.add("counter"), s.innerText = `${e.value.length}/${e.maxLength}`, this.counterElement = s, l.appendChild(s);
+      let d = document.createElement("div");
+      d.classList.add("counter"), d.innerText = `${e.value.length}/${e.maxLength}`, this.counterElement = d, l.appendChild(d);
     }
-    return this.native = i, this.labelElement = n, this.input = e, l;
+    return this.native = i, this.labelElement = o, this.input = e, l;
   }
   afterDraw() {
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight), this.hasAttribute("disabled") || (h.addListener(this, "click", "wj:textarea:change"), h.addListener(this, "click", "wj:textarea:input")), this.input.addEventListener("focus", (t) => {
@@ -62,7 +60,7 @@ class m extends p {
     this.resizeObserver.unobserve(this.input);
   }
 }
-customElements.get("wj-textarea") || window.customElements.define("wj-textarea", m);
+customElements.get("wj-textarea") || window.customElements.define("wj-textarea", v);
 export {
-  m as Textarea
+  v as Textarea
 };

package/dist/wj-thumbnail.js

@@ -1,19 +1,17 @@
 var d = Object.defineProperty;
 var m = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var i = (r, t, e) => (m(r, typeof t != "symbol" ? t + "" : t, e), e);
-import h from "./wj-element.js";
+var s = (r, t, e) => (m(r, typeof t != "symbol" ? t + "" : t, e), e);
+import u from "./wj-element.js";
 import "./wj-store.js";
-const l = `/*!
-* direction.scss
-*/:host{--wj-thumbnail-width: 48px;--wj-thumbnail-height: 48px;--wj-border-radius: 0}:host{width:var(--wj-thumbnail-width);height:var(--wj-thumbnail-height);display:block;border-radius:var(--wj-border-radius)}::slotted(wj-img),::slotted(img){border-radius:var(--wj-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}
+const h = `:host{--wj-thumbnail-width: 48px;--wj-thumbnail-height: 48px;--wj-thumbnail-border-radius: var(--wj-border-radius-medium)}:host{width:var(--wj-thumbnail-width);height:var(--wj-thumbnail-height);display:block;border-radius:var(--wj-border-radius)}::slotted(wj-img),::slotted(img){border-radius:var(--wj-thumbnail-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}
 `;
-class u extends h {
+class l extends u {
   constructor() {
     super();
-    i(this, "className", "Thumbnail");
+    s(this, "className", "Thumbnail");
   }
   static get cssStyleSheet() {
-    return l;
+    return h;
   }
   static get observedAttributes() {
     return [];
@@ -21,14 +19,14 @@ class u extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(e, o, a) {
+  beforeDraw(e, a, o) {
   }
-  draw(e, o, a) {
-    let s = document.createDocumentFragment(), n = document.createElement("slot");
-    return s.appendChild(n), s;
+  draw(e, a, o) {
+    let i = document.createDocumentFragment(), n = document.createElement("slot");
+    return i.appendChild(n), i;
   }
 }
-customElements.get("wj-thumbnail") || window.customElements.define("wj-thumbnail", u);
+customElements.get("wj-thumbnail") || window.customElements.define("wj-thumbnail", l);
 export {
-  u as Thumbnail
+  l as Thumbnail
 };

package/dist/wj-toast.js

@@ -50,7 +50,7 @@ class w extends m {
       type: this.type || "success",
       title: this.title || "John Doe"
     };
-    return this.container = document.querySelector("body"), this.notification = document.createElement("div"), this.notification.classList.add("pgn", "push-on-sidebar-open"), this.classList.add("pgn-wrapper"), this.setAttribute("data-position", o.position), this.alert = document.createElement("div"), this.alert.classList.add("alert"), this.alert.classList.add("alert-" + o.type), o.style == "bar" ? g(this.notification, this.alert, o) : o.style == "flip" ? f(this.notification, this.alert, o) : o.style == "circle" ? b(this.notification, this.alert, o) : o.style == "simple" ? l(this.notification, this.alert, o) : l(this.notification, this.alert, o), console.log("alert", this.alert), this.notification.appendChild(this.alert), s.appendChild(this.notification), s;
+    return this.container = document.querySelector("body"), this.notification = document.createElement("div"), this.notification.classList.add("pgn", "push-on-sidebar-open"), this.classList.add("pgn-wrapper"), this.setAttribute("data-position", o.position), this.alert = document.createElement("div"), this.alert.classList.add("alert"), this.alert.classList.add("alert-" + o.type), o.style == "bar" ? g(this.notification, this.alert, o) : o.style == "flip" ? f(this.notification, this.alert, o) : o.style == "circle" ? b(this.notification, this.alert, o) : o.style == "simple" ? l(this.notification, this.alert, o) : l(this.notification, this.alert, o), this.notification.appendChild(this.alert), s.appendChild(this.notification), s;
   }
 }
 customElements.get("wj-toast") || window.customElements.define("wj-toast", w);