wj-elements 0.0.11 → 0.0.13

package/dist/wj-row.js

@@ -1,33 +1,35 @@
-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";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const 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}
-`;
-class j extends l {
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Row ]\n*/\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n:host(.wj-wrap) {\n  flex-wrap: wrap !important;\n}\n:host {\n  --wj-gutter-x: 1.5rem;\n  --wj-gutter-y: 0;\n  display: flex;\n  flex-wrap: nowrap;\n  margin-top: calc(var(--wj-gutter-y) * -1);\n  margin-right: calc(var(--wj-gutter-x) * -0.5);\n  margin-left: calc(var(--wj-gutter-x) * -0.5);\n}\n:host(.g-0),\n:host(.gx-0) {\n  --wj-gutter-x: 0;\n}\n:host(.g-0),\n:host(.gy-0) {\n  --wj-gutter-y: 0;\n}\n:host(.g-1),\n:host(.gx-1) {\n  --wj-gutter-x: 0.25rem;\n}\n:host(.g-1),\n:host(.gy-1) {\n  --wj-gutter-y: 0.25rem;\n}\n:host(.g-2),\n:host(.gx-2) {\n  --wj-gutter-x: 0.5rem;\n}\n:host(.g-2),\n:host(.gy-2) {\n  --wj-gutter-y: 0.5rem;\n}\n:host(.g-3),\n:host(.gx-3) {\n  --wj-gutter-x: 1rem;\n}\n:host(.g-3),\n:host(.gy-3) {\n  --wj-gutter-y: 1rem;\n}\n:host(.g-4),\n:host(.gx-4) {\n  --wj-gutter-x: 1.5rem;\n}\n:host(.g-4),\n:host(.gy-4) {\n  --wj-gutter-y: 1.5rem;\n}\n:host(.g-5),\n:host(.gx-5) {\n  --wj-gutter-x: 3rem;\n}\n:host(.g-5),\n:host(.gy-5) {\n  --wj-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  :host(.g-sm-0),\n  :host(.gx-sm-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-sm-0),\n  :host(.gy-sm-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-sm-1),\n  :host(.gx-sm-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-sm-1),\n  :host(.gy-sm-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-sm-2),\n  :host(.gx-sm-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-sm-2),\n  :host(.gy-sm-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-sm-3),\n  :host(.gx-sm-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-sm-3),\n  :host(.gy-sm-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-sm-4),\n  :host(.gx-sm-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-sm-4),\n  :host(.gy-sm-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-sm-5),\n  :host(.gx-sm-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-sm-5),\n  :host(.gy-sm-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  :host(.g-md-0),\n  :host(.gx-md-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-md-0),\n  :host(.gy-md-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-md-1),\n  :host(.gx-md-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-md-1),\n  :host(.gy-md-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-md-2),\n  :host(.gx-md-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-md-2),\n  :host(.gy-md-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-md-3),\n  :host(.gx-md-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-md-3),\n  :host(.gy-md-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-md-4),\n  :host(.gx-md-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-md-4),\n  :host(.gy-md-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-md-5),\n  :host(.gx-md-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-md-5),\n  :host(.gy-md-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  :host(.g-lg-0),\n  :host(.gx-lg-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-lg-0),\n  :host(.gy-lg-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-lg-1),\n  :host(.gx-lg-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-lg-1),\n  :host(.gy-lg-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-lg-2),\n  :host(.gx-lg-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-lg-2),\n  :host(.gy-lg-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-lg-3),\n  :host(.gx-lg-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-lg-3),\n  :host(.gy-lg-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-lg-4),\n  :host(.gx-lg-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-lg-4),\n  :host(.gy-lg-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-lg-5),\n  :host(.gx-lg-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-lg-5),\n  :host(.gy-lg-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.g-xl-0),\n  :host(.gx-xl-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-xl-0),\n  :host(.gy-xl-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-xl-1),\n  :host(.gx-xl-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-xl-1),\n  :host(.gy-xl-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-xl-2),\n  :host(.gx-xl-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-xl-2),\n  :host(.gy-xl-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-xl-3),\n  :host(.gx-xl-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-xl-3),\n  :host(.gy-xl-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-xl-4),\n  :host(.gx-xl-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-xl-4),\n  :host(.gy-xl-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-xl-5),\n  :host(.gx-xl-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-xl-5),\n  :host(.gy-xl-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.g-xxl-0),\n  :host(.gx-xxl-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-xxl-0),\n  :host(.gy-xxl-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-xxl-1),\n  :host(.gx-xxl-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-xxl-1),\n  :host(.gy-xxl-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-xxl-2),\n  :host(.gx-xxl-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-xxl-2),\n  :host(.gy-xxl-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-xxl-3),\n  :host(.gx-xxl-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-xxl-3),\n  :host(.gy-xxl-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-xxl-4),\n  :host(.gx-xxl-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-xxl-4),\n  :host(.gy-xxl-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-xxl-5),\n  :host(.gx-xxl-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-xxl-5),\n  :host(.gy-xxl-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n:host(.wj-justify-content-center) {\n  justify-content: center !important;\n}\n:host(.wj-justify-content-end) {\n  justify-content: flex-end !important;\n}\n:host(.wj-justify-content-between) {\n  justify-content: space-between !important;\n}\n:host(.wj-justify-content-around) {\n  justify-content: space-around !important;\n}\n:host(.wj-align-items-start) {\n  align-items: baseline !important;\n}\n:host(.wj-align-items-center) {\n  align-items: center !important;\n}\n:host(.wj-align-items-end) {\n  align-items: flex-end !important;\n}";
+class Row extends WJElement {
   constructor() {
     super();
-    o(this, "className", "Row");
+    __publicField(this, "className", "Row");
   }
   static get cssStyleSheet() {
-    return u;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(g, r, h) {
+  beforeDraw(context, store, params) {
   }
-  draw(g, r, h) {
-    let s = document.createDocumentFragment();
-    this.hasAttribute("wrap") && this.classList.add("wj-wrap");
-    let x = document.createElement("slot");
-    return s.appendChild(x), s;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    if (this.hasAttribute("wrap"))
+      this.classList.add("wj-wrap");
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
   }
 }
-customElements.get("wj-row") || window.customElements.define("wj-row", j);
+customElements.get("wj-row") || window.customElements.define("wj-row", Row);
 export {
-  j as Row
+  Row
 };

package/dist/wj-slider.js

@@ -1,50 +1,55 @@
-var b = Object.defineProperty;
-var c = (a, o, e) => o in a ? b(a, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[o] = e;
-var s = (a, o, e) => (c(a, typeof o != "symbol" ? o + "" : o, e), e);
-import w from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const 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: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 {
+const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-slider-track-height: 4px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 100%;\n}\n:host .native-slider {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  align-items: center;\n  height: inherit;\n}\n:host .slider {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 0%;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\ninput[type=range] {\n  -webkit-appearance: none;\n  width: 100%;\n  height: var(--wj-slider-track-height);\n  margin: 0;\n  border-radius: 5px;\n  background-size: 70% 100%;\n  background-repeat: no-repeat;\n  /* Input Track */\n  --wj-slider-color: #7252D3;\n  --wj-slider-thumb-color: #7252D3;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #7252D3), var(--wj-slider-color, #7252D3));\n  /* Input Thumb */\n}\ninput[type=range]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  height: 18px;\n  width: 18px;\n  border-radius: 50%;\n  cursor: ew-resize;\n  transition: background 0.3s ease-in-out;\n}\ninput[type=range]::-moz-range-thumb {\n  -webkit-appearance: none;\n  height: 18px;\n  width: 18px;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background 0.3s ease-in-out;\n  border: 0;\n}\ninput[type=range]::-ms-thumb {\n  -webkit-appearance: none;\n  height: 18px;\n  width: 18px;\n  border-radius: 50%;\n  cursor: ew-resize;\n  transition: background 0.3s ease-in-out;\n}\ninput[type=range]::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n  box-shadow: none;\n  border: none;\n  background: transparent;\n}\ninput[type=range]::-moz-range-track {\n  -webkit-appearance: none;\n  box-shadow: none;\n  border: none;\n  background: transparent;\n}\ninput[type=range]::-ms-track {\n  -webkit-appearance: none;\n  box-shadow: none;\n  border: none;\n  background: transparent;\n}\ninput[type=range][color=primary] {\n  --wj-slider-color: #7252D3;\n  --wj-slider-thumb-color: #7252D3;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #7252D3), var(--wj-slider-color, #7252D3));\n  /* Input Thumb */\n}\ninput[type=range][color=primary]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=success] {\n  --wj-slider-color: #19AD79;\n  --wj-slider-thumb-color: #19AD79;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #d6f7f0;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #19AD79), var(--wj-slider-color, #19AD79));\n  /* Input Thumb */\n}\ninput[type=range][color=success]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=complete] {\n  --wj-slider-color: #0072EC;\n  --wj-slider-thumb-color: #0072EC;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #d3eeff;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #0072EC), var(--wj-slider-color, #0072EC));\n  /* Input Thumb */\n}\ninput[type=range][color=complete]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=danger] {\n  --wj-slider-color: #D83C31;\n  --wj-slider-thumb-color: #D83C31;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #fde2da;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #D83C31), var(--wj-slider-color, #D83C31));\n  /* Input Thumb */\n}\ninput[type=range][color=danger]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=warning] {\n  --wj-slider-color: #FFd945;\n  --wj-slider-thumb-color: #FFd945;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #fffde1;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #FFd945), var(--wj-slider-color, #FFd945));\n  /* Input Thumb */\n}\ninput[type=range][color=warning]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=contrast] {\n  --wj-slider-color: #fff;\n  --wj-slider-thumb-color: #fff;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px white;\n  --wj-slider-track-color: #757575;\n  background-color: var(--wj-slider-track-color, #757575);\n  background-image: linear-gradient(var(--wj-slider-color, #fff), var(--wj-slider-color, #fff));\n  /* Input Thumb */\n}\ninput[type=range][color=contrast]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ndatalist {\n  display: flex;\n  justify-content: space-between;\n  height: auto;\n  overflow: hidden;\n  margin-top: 16px;\n}\ndatalist option:before {\n  content: "";\n  display: block;\n  width: 0;\n  height: auto;\n  padding-left: 3px;\n  text-indent: 0;\n}\noutput {\n  position: absolute;\n  background: var(--wj-color-contrast-11);\n  color: var(--wj-color-contrast-0);\n  top: -46px;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n::slotted([slot=label]) {\n  margin-inline: 0 1rem;\n  font-size: var(--wj-font-size);\n}\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n::slotted([slot=end]) {\n  margin-inline: 1rem 0;\n}';
+class Slider extends WJElement {
   constructor() {
     super();
-    s(this, "className", "Slider");
-    s(this, "setHandlePosition", () => {
+    __publicField(this, "className", "Slider");
+    __publicField(this, "setHandlePosition", () => {
       this.input.style.backgroundSize = this.getPercentage(this.input.value, this.input.min, this.input.max) + "% 100%";
     });
-    s(this, "setBubble", () => {
-      let e = this.getPercentage(this.input.value, this.input.min, this.input.max);
-      this.output.style.left = `calc(${e}% + (${8 - e * 0.15}px) - ${this.output.offsetWidth / 2}px)`, this.output.innerHTML = this.input.value;
+    __publicField(this, "setBubble", () => {
+      let newValue = this.getPercentage(this.input.value, this.input.min, this.input.max);
+      this.output.style.left = `calc(${newValue}% + (${8 - newValue * 0.15}px) - ${this.output.offsetWidth / 2}px)`;
+      this.output.innerHTML = this.input.value;
     });
   }
-  set value(e) {
-    this.setAttribute("value", e), this.input && (this.input.value = e, this.setHandlePosition());
+  set value(value) {
+    this.setAttribute("value", value);
+    if (this.input) {
+      this.input.value = value;
+      this.setHandlePosition();
+    }
   }
   get value() {
     return this.getAttribute("value") || 0;
   }
-  set min(e) {
-    this.setAttribute("min", e);
+  set min(value) {
+    this.setAttribute("min", value);
   }
   get min() {
     return this.getAttribute("min") || 0;
   }
-  set max(e) {
-    this.setAttribute("max", e);
+  set max(value) {
+    this.setAttribute("max", value);
   }
   get max() {
     return this.getAttribute("max") || 100;
   }
-  set step(e) {
-    this.setAttribute("step", e);
+  set step(value) {
+    this.setAttribute("step", value);
   }
   get step() {
     return this.getAttribute("step") || 1;
   }
   static get cssStyleSheet() {
-    return p;
+    return styles;
   }
   static get observedAttributes() {
     return ["max", "value"];
@@ -53,68 +58,105 @@ class m extends w {
     this.isShadowRoot = "open";
   }
   draw() {
-    let e = document.createDocumentFragment(), t = document.createElement("div");
-    t.className = "native-slider";
-    let i = document.createElement("div");
-    i.className = "slider";
-    let n = document.createElement("slot");
-    n.name = "label";
-    let l = document.createElement("slot");
-    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(l), t.appendChild(i), t.appendChild(u), e.appendChild(t), this.input = r, this.output = d, e;
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.className = "native-slider";
+    let slider = document.createElement("div");
+    slider.className = "slider";
+    let label = document.createElement("slot");
+    label.name = "label";
+    let start = document.createElement("slot");
+    start.name = "start";
+    let end = document.createElement("slot");
+    end.name = "end";
+    let output = document.createElement("output");
+    output.setAttribute("for", "slider");
+    output.id = "output";
+    output.setAttribute("hidden", "");
+    let input = document.createElement("input");
+    input.type = "range";
+    input.min = this.min;
+    input.max = this.max;
+    input.step = this.step;
+    input.value = this.value;
+    input.id = "slider";
+    input.name = "slider";
+    input.part = "slider";
+    input.setAttribute("autocomplete", "off");
+    input.setAttribute("color", this.color || "");
+    input.addEventListener("input", (e) => {
+      this.setHandlePosition(e.target);
+    });
+    slider.appendChild(input);
+    if (this.hasAttribute("bubble")) {
+      slider.appendChild(output);
+    }
+    element.appendChild(label);
+    element.appendChild(start);
+    element.appendChild(slider);
+    element.appendChild(end);
+    fragment.appendChild(element);
+    this.input = input;
+    this.output = output;
+    return fragment;
   }
   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) => {
-      this.value = e.target.value, this.dispatchMove(this.value), this.hasAttribute("bubble") && this.setBubble();
-    }), this.input.addEventListener("change", (e) => {
+    this.setHandlePosition();
+    if (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) => {
+      this.value = e.target.value;
+      this.dispatchMove(this.value);
+      if (this.hasAttribute("bubble")) {
+        this.setBubble();
+      }
+    });
+    this.input.addEventListener("change", (e) => {
       this.dispatchChange(e.target.value);
     });
   }
-  dispatchInit(e) {
+  dispatchInit(value) {
     this.dispatchEvent(
       new CustomEvent("wj:slider-init", {
-        bubbles: !0,
+        bubbles: true,
         detail: {
-          value: e,
+          value,
           output: this.output
         }
       })
     );
   }
-  dispatchMove(e) {
+  dispatchMove(value) {
     this.dispatchEvent(
       new CustomEvent("wj:slider-move", {
-        bubbles: !0,
+        bubbles: true,
         detail: {
-          value: e,
+          value,
           output: this.output
         }
       })
     );
   }
-  dispatchChange(e) {
+  dispatchChange(value) {
     this.dispatchEvent(
       new CustomEvent("wj:slider-change", {
-        bubbles: !0,
+        bubbles: true,
         detail: {
-          value: e,
+          value,
           output: this.output
         }
       })
     );
   }
-  getPercentage(e = 0, t, i) {
-    return Number((e - t) * 100 / (i - t)) || 0;
+  getPercentage(value = 0, min, max) {
+    return Number((value - min) * 100 / (max - min)) || 0;
   }
 }
-customElements.get("wj-slider") || customElements.define("wj-slider", m);
+customElements.get("wj-slider") || customElements.define("wj-slider", Slider);
 export {
-  m as Slider
+  Slider
 };

package/dist/wj-split-view.js

@@ -1,38 +1,58 @@
-var o = Object.defineProperty;
-var p = (s, e, t) => e in s ? o(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var c = (s, e, t) => (p(s, typeof e != "symbol" ? e + "" : e, t), t);
-import h from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-function m(s, e) {
-  function t(n) {
-    const r = s.getBoundingClientRect(), i = s.ownerDocument.defaultView, d = r.left + i.pageXOffset, v = r.top + i.pageYOffset, w = n.pageX - d, a = n.pageY - v;
-    e != null && e.onMove && e.onMove(w, a);
+function drag(container, options) {
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+    if (options == null ? void 0 : options.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener("pointermove", move);
+    document.removeEventListener("pointerup", stop);
+    if (options == null ? void 0 : options.onStop) {
+      options.onStop();
+    }
   }
-  function l() {
-    document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", l), e != null && e.onStop && e.onStop();
+  document.addEventListener("pointermove", move, { passive: true });
+  document.addEventListener("pointerup", stop);
+  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
+    move(options.initialEvent);
   }
-  document.addEventListener("pointermove", t, { passive: !0 }), document.addEventListener("pointerup", l), (e == null ? void 0 : e.initialEvent) instanceof PointerEvent && t(e.initialEvent);
 }
-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 {
+const styles = '/*\n[ WJ Split View ]\n*/\n:host {\n  --wj-split-view-divider-area: 12px;\n  --wj-split-view-divider-width: 4px;\n  --wj-split-view-min: 0%;\n  --wj-split-view-max: 100%;\n  --wj-split-view-calc-a: 50%;\n  --wj-split-view-calc-b: 50%;\n  --wj-split-view-clamp-a: clamp(var(--wj-split-view-min), var(--wj-split-view-calc-a), var(--wj-split-view-max));\n  --wj-split-view-clamp-b: clamp(var(--wj-split-view-min), var(--wj-split-view-calc-b), var(--wj-split-view-max));\n  --wj-split-view-divider-background: var(--wj-border-color);\n  --wj-split-view-divider-size: 4px;\n  height: 100%;\n  width: 100%;\n}\n\n::slotted([slot=start]), ::slotted([slot=end]) {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n:host(:not([vertical])) ::slotted([slot=start]) {\n  width: var(--wj-split-view-clamp-a);\n}\n\n:host(:not([vertical])) ::slotted([slot=end]) {\n  width: var(--wj-split-view-clamp-b);\n}\n\n:host([vertical]) ::slotted([slot=start]) {\n  height: var(--wj-split-view-clamp-a);\n  width: 100%;\n}\n\n:host([vertical]) ::slotted([slot=end]) {\n  height: var(--wj-split-view-clamp-b);\n  width: 100%;\n}\n\n.native-split-view {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([vertical]) .native-split-view {\n  flex-direction: column;\n}\n\n.wj-divider {\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  background-color: var(--wj-split-view-divider-background);\n  height: 100%;\n  width: var(--wj-split-view-divider-size);\n  cursor: col-resize;\n}\n.wj-divider:after {\n  display: flex;\n  content: "";\n  position: absolute;\n  height: 100%;\n  left: calc(var(--wj-split-view-divider-area) / -2 + var(--wj-split-view-divider-width) / 2);\n  width: var(--wj-split-view-divider-area);\n}\n\n:host([vertical]) .wj-divider {\n  height: var(--wj-split-view-divider-size);\n  width: 100%;\n  cursor: row-resize;\n}\n:host([vertical]) .wj-divider:after {\n  width: 100%;\n  top: calc(var(--wj-split-view-divider-area) / -2 + var(--wj-split-view-divider-width) / 2);\n  height: var(--wj-split-view-divider-area);\n}';
+class SplitView extends WJElement {
   constructor() {
     super();
-    c(this, "className", "SplitView");
-    c(this, "handleDrag", (t) => {
+    __publicField(this, "className", "SplitView");
+    __publicField(this, "handleDrag", (e) => {
       if (this.hasAttribute("disabled"))
-        return !1;
-      m(this, {
-        onMove: (l, n) => {
-          let r = this.hasAttribute("vertical") ? n : l, i = this.pixelsToPercentage(r), d = 100 - this.pixelsToPercentage(r);
-          this.style.setProperty("--wj-split-view-calc-a", i + "%"), this.style.setProperty("--wj-split-view-calc-b", d + "%");
+        return false;
+      drag(this, {
+        onMove: (x, y) => {
+          let newPositionInPixels = this.hasAttribute("vertical") ? y : x;
+          let sizeA = this.pixelsToPercentage(newPositionInPixels);
+          let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
+          this.style.setProperty("--wj-split-view-calc-a", sizeA + "%");
+          this.style.setProperty("--wj-split-view-calc-b", sizeB + "%");
         },
-        initialEvent: t
+        initialEvent: e
       });
     });
   }
   static get cssStyleSheet() {
-    return u;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -40,33 +60,51 @@ class j extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, l, n) {
-    let r = document.createDocumentFragment(), i = document.createElement("div");
-    i.classList.add("native-split-view");
-    let d = document.createElement("slot");
-    d.setAttribute("name", "start");
-    let v = document.createElement("slot");
-    v.setAttribute("name", "end");
-    let w = document.createElement("slot");
-    w.setAttribute("name", "divider");
-    let a = document.createElement("div");
-    return a.classList.add("wj-divider"), a.setAttribute("part", "divider"), a.appendChild(w), a.addEventListener("mousedown", this.handleDrag, !1), i.appendChild(d), i.appendChild(a), i.appendChild(v), r.appendChild(i), r;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-split-view");
+    let start = document.createElement("slot");
+    start.setAttribute("name", "start");
+    let end = document.createElement("slot");
+    end.setAttribute("name", "end");
+    let divider = document.createElement("slot");
+    divider.setAttribute("name", "divider");
+    let dividerElement = document.createElement("div");
+    dividerElement.classList.add("wj-divider");
+    dividerElement.setAttribute("part", "divider");
+    dividerElement.appendChild(divider);
+    dividerElement.addEventListener("mousedown", this.handleDrag, false);
+    native.appendChild(start);
+    native.appendChild(dividerElement);
+    native.appendChild(end);
+    fragment.appendChild(native);
+    return fragment;
   }
   afterDraw() {
-    this.detectSize(), this.min && this.style.setProperty("--wj-split-view-min", this.pixelsToPercentage(this.min) + "%"), this.max && this.style.setProperty("--wj-split-view-max", 100 - this.pixelsToPercentage(this.max) + "%"), this.initial && (this.style.setProperty("--wj-split-view-calc-a", this.pixelsToPercentage(this.initial) + "%"), this.style.setProperty("--wj-split-view-calc-b", 100 - this.pixelsToPercentage(this.initial) + "%")), this.resizeObserver = new ResizeObserver((t) => this.handleResize(t));
+    this.detectSize();
+    if (this.min)
+      this.style.setProperty("--wj-split-view-min", this.pixelsToPercentage(this.min) + "%");
+    if (this.max)
+      this.style.setProperty("--wj-split-view-max", 100 - this.pixelsToPercentage(this.max) + "%");
+    if (this.initial) {
+      this.style.setProperty("--wj-split-view-calc-a", this.pixelsToPercentage(this.initial) + "%");
+      this.style.setProperty("--wj-split-view-calc-b", 100 - this.pixelsToPercentage(this.initial) + "%");
+    }
+    this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));
   }
   detectSize() {
-    const { width: t, height: l } = this.getBoundingClientRect();
-    this.size = this.hasAttribute("vertical") ? l : t;
+    const { width, height } = this.getBoundingClientRect();
+    this.size = this.hasAttribute("vertical") ? height : width;
   }
-  percentageToPixels(t) {
-    return this.size * (t / 100);
+  percentageToPixels(value) {
+    return this.size * (value / 100);
   }
-  pixelsToPercentage(t) {
-    return t / this.size * 100;
+  pixelsToPercentage(value) {
+    return value / this.size * 100;
   }
 }
-customElements.get("wj-split-view") || window.customElements.define("wj-split-view", j);
+customElements.get("wj-split-view") || window.customElements.define("wj-split-view", SplitView);
 export {
-  j as SplitView
+  SplitView
 };