wj-elements 0.1.127 → 0.1.128

package/dist/wje-router-link.js

@@ -1,11 +1,8 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-import { b as bindRouterLinks } from "./router-links-F7MJWhZi.js";
+import { b as bindRouterLinks } from "./router-links-I2vcmVCs.js";
 const styles = "/*\n[ WJ Router Link ]\n*/\n\n:host{\n    display: block;\n    background: transparent !important;\n}\n\n:host(.active){\n    cursor: pointer;\n    font-weight: bold;\n}";
 class RouterLink extends WJElement {
   /**

package/dist/wje-router-outlet.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 class AnimationHook {
   constructor(options = {}) {
@@ -107,8 +104,7 @@ function runTransition(el, name, type, cb) {
     el.classList.add(`${name}-${type}-to`);
     whenTransitionEnds(el, function() {
       el.classList.remove(`${name}-${type}-active`, `${name}-${type}-to`);
-      if (cb)
-        cb();
+      if (cb) cb();
     });
   });
 }
@@ -173,8 +169,7 @@ class AnimatedOutlet extends HTMLElement {
       if (this.removing && this.removing.parentNode === this) {
         super.removeChild(this.removing);
       }
-      if (this.appending)
-        hook.enter(this, this.appending);
+      if (this.appending) hook.enter(this, this.appending);
       this.appending = null;
       this.removing = null;
     });

package/dist/wje-routerx.js

@@ -1,11 +1,8 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-import { r as routerLinks } from "./router-links-F7MJWhZi.js";
+import { r as routerLinks } from "./router-links-I2vcmVCs.js";
 var DEFAULT_DELIMITER = "/";
 function balanced(open, close, str, index) {
   var count = 0;
@@ -392,8 +389,7 @@ class History {
       if (this._hasPushState || !this._wantsHashChange || forcePushState) {
         fragment = decodeURI(this.location.pathname + this.location.search);
         const root = this.root.replace(trailingSlash, "");
-        if (!fragment.indexOf(root))
-          fragment = fragment.slice(root.length);
+        if (!fragment.indexOf(root)) fragment = fragment.slice(root.length);
       } else {
         fragment = this.getHash();
       }
@@ -426,8 +422,7 @@ class History {
         this.history.replaceState({}, document.title, this.root + this.fragment);
       }
     }
-    if (!this.options.silent)
-      return this.loadUrl();
+    if (!this.options.silent) return this.loadUrl();
   }
   // Disable Backbone.history, perhaps temporarily. Not useful in a real app,
   // but possibly useful for unit testing Routers.
@@ -444,8 +439,7 @@ class History {
   // calls `loadUrl`.
   checkUrl() {
     const current = this.getFragment();
-    if (current === this.fragment)
-      return false;
+    if (current === this.fragment) return false;
     this.loadUrl();
   }
   // Attempt to load the current URL fragment. If a route succeeds with a
@@ -468,17 +462,13 @@ class History {
   // route callback be fired (not usually desirable), or `replace: true`, if
   // you wish to modify the current URL without adding an entry to the history.
   update(fragment, options) {
-    if (!this.started)
-      return false;
-    if (!options || options === true)
-      options = { trigger: !!options };
+    if (!this.started) return false;
+    if (!options || options === true) options = { trigger: !!options };
     let url = this.root + (fragment = this.getFragment(fragment || ""));
     fragment = fragment.replace(pathStripper, "");
-    if (this.fragment === fragment)
-      return;
+    if (this.fragment === fragment) return;
     this.fragment = fragment;
-    if (fragment === "" && url !== "/")
-      url = url.slice(0, -1);
+    if (fragment === "" && url !== "/") url = url.slice(0, -1);
     if (this._hasPushState) {
       this.history[options.replace ? "replaceState" : "pushState"]({}, document.title, url);
     } else if (this._wantsHashChange) {
@@ -486,8 +476,7 @@ class History {
     } else {
       return this.location.assign(url);
     }
-    if (options.trigger)
-      return this.loadUrl(fragment);
+    if (options.trigger) return this.loadUrl(fragment);
   }
   // Update the hash location, either replacing the current entry, or adding
   // a new one to the browser history.
@@ -804,8 +793,7 @@ function transition(options) {
 }
 function intercept(el, fn) {
   const cb = delegate(el, "click", function(e, el2) {
-    if (clickable(e, el2))
-      fn(e, el2);
+    if (clickable(e, el2)) fn(e, el2);
   });
   return function dispose() {
     undelegate(el, "click", cb);
@@ -837,27 +825,17 @@ function undelegate(el, type, fn) {
   unbindEvent(el, type, fn);
 }
 function clickable(e, el) {
-  if (which(e) !== 1)
-    return;
-  if (e.metaKey || e.ctrlKey || e.shiftKey)
-    return;
-  if (e.defaultPrevented)
-    return;
-  if (el.target)
-    return;
-  if (el.getAttribute("data-bypass") !== null)
-    return;
+  if (which(e) !== 1) return;
+  if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+  if (e.defaultPrevented) return;
+  if (el.target) return;
+  if (el.getAttribute("data-bypass") !== null) return;
   const href = el.getAttribute("href");
-  if (!href || href.length === 0)
-    return;
-  if (href[0] === "#")
-    return;
-  if (href.indexOf("http://") === 0 || href.indexOf("https://") === 0)
-    return;
-  if (href.indexOf("mailto:") === 0)
-    return;
-  if (href.indexOf("javascript:") === 0)
-    return;
+  if (!href || href.length === 0) return;
+  if (href[0] === "#") return;
+  if (href.indexOf("http://") === 0 || href.indexOf("https://") === 0) return;
+  if (href.indexOf("mailto:") === 0) return;
+  if (href.indexOf("javascript:") === 0) return;
   return true;
 }
 function which(e) {
@@ -865,8 +843,7 @@ function which(e) {
   return e.which === null ? e.button : e.which;
 }
 function defineLogger(router2, method, fn) {
-  if (fn === true)
-    return;
+  if (fn === true) return;
   router2[method] = typeof fn === "function" ? fn : () => {
   };
 }
@@ -1259,10 +1236,8 @@ function getOutlet(el) {
   return renderRoot.querySelector(el.constructor.outlet || "wje-router-outlet");
 }
 function resolveRootOutlet() {
-  if (rootOutletEl)
-    return rootOutletEl;
-  if (!rootOutlet)
-    return document.body;
+  if (rootOutletEl) return rootOutletEl;
+  if (!rootOutlet) return document.body;
   rootOutletEl = typeof rootOutlet === "string" ? document.querySelector(rootOutlet) : rootOutlet;
   if (!rootOutletEl) {
     throw new Error(`slick-router(wc): Invalid outlet option ${rootOutlet}`);
@@ -1301,8 +1276,7 @@ async function runLifeCycle(transition2, routes, prefix, suffix) {
         transition2.cancel();
       }
     }
-    if (transition2.isCancelled)
-      break;
+    if (transition2.isCancelled) break;
     const elMethod = el && el[`${prefix}Route${suffix}`];
     if (typeof elMethod === "function") {
       result = await elMethod.call(el, transition2);
@@ -1310,8 +1284,7 @@ async function runLifeCycle(transition2, routes, prefix, suffix) {
         transition2.cancel();
       }
     }
-    if (transition2.isCancelled)
-      break;
+    if (transition2.isCancelled) break;
   }
 }
 function resolveModule(value) {
@@ -1381,8 +1354,7 @@ function updateDOMTree(activated, deactivated) {
     const { route, el } = deactivated[routeIndex];
     if (!activated.some(({ route: activeRoute }) => activeRoute.name === route.name)) {
       if (el) {
-        if (!parentElRemoved && !removedEls.has(el))
-          el.remove();
+        if (!parentElRemoved && !removedEls.has(el)) el.remove();
         parentElRemoved = true;
       }
       routeElMap[route.name] = void 0;
@@ -1398,12 +1370,10 @@ async function resolve(transition2) {
     deactivated.push({ el: routeElMap[route.name], route });
   }
   await runLifeCycle(transition2, deactivated, "before", "Leave");
-  if (transition2.isCancelled)
-    return;
+  if (transition2.isCancelled) return;
   const activated = await resolveComponents(transition2.routes.slice(changingIndex));
   await runLifeCycle(transition2, activated, "before", "Enter");
-  if (transition2.isCancelled)
-    return;
+  if (transition2.isCancelled) return;
   await renderElements(transition2, activated, changingIndex);
   updateDOMTree(activated, deactivated);
   transition2.activated = activated;

package/dist/wje-row.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ Row ]\n*/\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n:host(.wje-wrap) {\n  flex-wrap: wrap !important;\n}\n:host {\n  --wje-gutter-x: 1.5rem;\n  --wje-gutter-y: 0;\n  display: flex;\n  flex-wrap: nowrap;\n  margin-top: calc(var(--wje-gutter-y) * -1);\n  margin-right: calc(var(--wje-gutter-x) * -0.5);\n  margin-left: calc(var(--wje-gutter-x) * -0.5);\n}\n:host(.g-0),\n:host(.gx-0) {\n  --wje-gutter-x: 0;\n}\n:host(.g-0),\n:host(.gy-0) {\n  --wje-gutter-y: 0;\n}\n:host(.g-1),\n:host(.gx-1) {\n  --wje-gutter-x: 0.25rem;\n}\n:host(.g-1),\n:host(.gy-1) {\n  --wje-gutter-y: 0.25rem;\n}\n:host(.g-2),\n:host(.gx-2) {\n  --wje-gutter-x: 0.5rem;\n}\n:host(.g-2),\n:host(.gy-2) {\n  --wje-gutter-y: 0.5rem;\n}\n:host(.g-3),\n:host(.gx-3) {\n  --wje-gutter-x: 1rem;\n}\n:host(.g-3),\n:host(.gy-3) {\n  --wje-gutter-y: 1rem;\n}\n:host(.g-4),\n:host(.gx-4) {\n  --wje-gutter-x: 1.5rem;\n}\n:host(.g-4),\n:host(.gy-4) {\n  --wje-gutter-y: 1.5rem;\n}\n:host(.g-5),\n:host(.gx-5) {\n  --wje-gutter-x: 3rem;\n}\n:host(.g-5),\n:host(.gy-5) {\n  --wje-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  :host(.g-sm-0),\n  :host(.gx-sm-0) {\n    --wje-gutter-x: 0;\n  }\n  :host(.g-sm-0),\n  :host(.gy-sm-0) {\n    --wje-gutter-y: 0;\n  }\n  :host(.g-sm-1),\n  :host(.gx-sm-1) {\n    --wje-gutter-x: 0.25rem;\n  }\n  :host(.g-sm-1),\n  :host(.gy-sm-1) {\n    --wje-gutter-y: 0.25rem;\n  }\n  :host(.g-sm-2),\n  :host(.gx-sm-2) {\n    --wje-gutter-x: 0.5rem;\n  }\n  :host(.g-sm-2),\n  :host(.gy-sm-2) {\n    --wje-gutter-y: 0.5rem;\n  }\n  :host(.g-sm-3),\n  :host(.gx-sm-3) {\n    --wje-gutter-x: 1rem;\n  }\n  :host(.g-sm-3),\n  :host(.gy-sm-3) {\n    --wje-gutter-y: 1rem;\n  }\n  :host(.g-sm-4),\n  :host(.gx-sm-4) {\n    --wje-gutter-x: 1.5rem;\n  }\n  :host(.g-sm-4),\n  :host(.gy-sm-4) {\n    --wje-gutter-y: 1.5rem;\n  }\n  :host(.g-sm-5),\n  :host(.gx-sm-5) {\n    --wje-gutter-x: 3rem;\n  }\n  :host(.g-sm-5),\n  :host(.gy-sm-5) {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  :host(.g-md-0),\n  :host(.gx-md-0) {\n    --wje-gutter-x: 0;\n  }\n  :host(.g-md-0),\n  :host(.gy-md-0) {\n    --wje-gutter-y: 0;\n  }\n  :host(.g-md-1),\n  :host(.gx-md-1) {\n    --wje-gutter-x: 0.25rem;\n  }\n  :host(.g-md-1),\n  :host(.gy-md-1) {\n    --wje-gutter-y: 0.25rem;\n  }\n  :host(.g-md-2),\n  :host(.gx-md-2) {\n    --wje-gutter-x: 0.5rem;\n  }\n  :host(.g-md-2),\n  :host(.gy-md-2) {\n    --wje-gutter-y: 0.5rem;\n  }\n  :host(.g-md-3),\n  :host(.gx-md-3) {\n    --wje-gutter-x: 1rem;\n  }\n  :host(.g-md-3),\n  :host(.gy-md-3) {\n    --wje-gutter-y: 1rem;\n  }\n  :host(.g-md-4),\n  :host(.gx-md-4) {\n    --wje-gutter-x: 1.5rem;\n  }\n  :host(.g-md-4),\n  :host(.gy-md-4) {\n    --wje-gutter-y: 1.5rem;\n  }\n  :host(.g-md-5),\n  :host(.gx-md-5) {\n    --wje-gutter-x: 3rem;\n  }\n  :host(.g-md-5),\n  :host(.gy-md-5) {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  :host(.g-lg-0),\n  :host(.gx-lg-0) {\n    --wje-gutter-x: 0;\n  }\n  :host(.g-lg-0),\n  :host(.gy-lg-0) {\n    --wje-gutter-y: 0;\n  }\n  :host(.g-lg-1),\n  :host(.gx-lg-1) {\n    --wje-gutter-x: 0.25rem;\n  }\n  :host(.g-lg-1),\n  :host(.gy-lg-1) {\n    --wje-gutter-y: 0.25rem;\n  }\n  :host(.g-lg-2),\n  :host(.gx-lg-2) {\n    --wje-gutter-x: 0.5rem;\n  }\n  :host(.g-lg-2),\n  :host(.gy-lg-2) {\n    --wje-gutter-y: 0.5rem;\n  }\n  :host(.g-lg-3),\n  :host(.gx-lg-3) {\n    --wje-gutter-x: 1rem;\n  }\n  :host(.g-lg-3),\n  :host(.gy-lg-3) {\n    --wje-gutter-y: 1rem;\n  }\n  :host(.g-lg-4),\n  :host(.gx-lg-4) {\n    --wje-gutter-x: 1.5rem;\n  }\n  :host(.g-lg-4),\n  :host(.gy-lg-4) {\n    --wje-gutter-y: 1.5rem;\n  }\n  :host(.g-lg-5),\n  :host(.gx-lg-5) {\n    --wje-gutter-x: 3rem;\n  }\n  :host(.g-lg-5),\n  :host(.gy-lg-5) {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.g-xl-0),\n  :host(.gx-xl-0) {\n    --wje-gutter-x: 0;\n  }\n  :host(.g-xl-0),\n  :host(.gy-xl-0) {\n    --wje-gutter-y: 0;\n  }\n  :host(.g-xl-1),\n  :host(.gx-xl-1) {\n    --wje-gutter-x: 0.25rem;\n  }\n  :host(.g-xl-1),\n  :host(.gy-xl-1) {\n    --wje-gutter-y: 0.25rem;\n  }\n  :host(.g-xl-2),\n  :host(.gx-xl-2) {\n    --wje-gutter-x: 0.5rem;\n  }\n  :host(.g-xl-2),\n  :host(.gy-xl-2) {\n    --wje-gutter-y: 0.5rem;\n  }\n  :host(.g-xl-3),\n  :host(.gx-xl-3) {\n    --wje-gutter-x: 1rem;\n  }\n  :host(.g-xl-3),\n  :host(.gy-xl-3) {\n    --wje-gutter-y: 1rem;\n  }\n  :host(.g-xl-4),\n  :host(.gx-xl-4) {\n    --wje-gutter-x: 1.5rem;\n  }\n  :host(.g-xl-4),\n  :host(.gy-xl-4) {\n    --wje-gutter-y: 1.5rem;\n  }\n  :host(.g-xl-5),\n  :host(.gx-xl-5) {\n    --wje-gutter-x: 3rem;\n  }\n  :host(.g-xl-5),\n  :host(.gy-xl-5) {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.g-xxl-0),\n  :host(.gx-xxl-0) {\n    --wje-gutter-x: 0;\n  }\n  :host(.g-xxl-0),\n  :host(.gy-xxl-0) {\n    --wje-gutter-y: 0;\n  }\n  :host(.g-xxl-1),\n  :host(.gx-xxl-1) {\n    --wje-gutter-x: 0.25rem;\n  }\n  :host(.g-xxl-1),\n  :host(.gy-xxl-1) {\n    --wje-gutter-y: 0.25rem;\n  }\n  :host(.g-xxl-2),\n  :host(.gx-xxl-2) {\n    --wje-gutter-x: 0.5rem;\n  }\n  :host(.g-xxl-2),\n  :host(.gy-xxl-2) {\n    --wje-gutter-y: 0.5rem;\n  }\n  :host(.g-xxl-3),\n  :host(.gx-xxl-3) {\n    --wje-gutter-x: 1rem;\n  }\n  :host(.g-xxl-3),\n  :host(.gy-xxl-3) {\n    --wje-gutter-y: 1rem;\n  }\n  :host(.g-xxl-4),\n  :host(.gx-xxl-4) {\n    --wje-gutter-x: 1.5rem;\n  }\n  :host(.g-xxl-4),\n  :host(.gy-xxl-4) {\n    --wje-gutter-y: 1.5rem;\n  }\n  :host(.g-xxl-5),\n  :host(.gx-xxl-5) {\n    --wje-gutter-x: 3rem;\n  }\n  :host(.g-xxl-5),\n  :host(.gy-xxl-5) {\n    --wje-gutter-y: 3rem;\n  }\n}\n:host(.wje-justify-content-center) {\n  justify-content: center !important;\n}\n:host(.wje-justify-content-end) {\n  justify-content: flex-end !important;\n}\n:host(.wje-justify-content-between) {\n  justify-content: space-between !important;\n}\n:host(.wje-justify-content-around) {\n  justify-content: space-around !important;\n}\n:host(.wje-align-items-start) {\n  align-items: baseline !important;\n}\n:host(.wje-align-items-center) {\n  align-items: center !important;\n}\n:host(.wje-align-items-end) {\n  align-items: flex-end !important;\n}";
 class Row extends WJElement {

package/dist/wje-select.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
 import Button from "./wje-button.js";
 import "./wje-popup.js";
@@ -13,7 +10,7 @@ import Chip from "./wje-chip.js";
 import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
-import { P as Popup } from "./popup.element-DvPGL_NN.js";
+import { P as Popup } from "./popup.element-l8v-dMoK.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n  --wje-select-border-width: 1px;\n  --wje-select-border-style: solid;\n  --wje-select-border-color: var(--wje-border-color);\n\n  --wje-select-options-border-width: 1px;\n  --wje-select-options-border-style: var(--wje-border-style);\n  --wje-select-options-border-color: var(--wje-border-color);\n\n  --wje-select-background: var(--wje-background);\n  --wje-select-line-height: 20px;\n  --wje-select-color: var(--wje-color);\n  --wje-select-border-radius: var(--wje-border-radius-medium);\n\n  --wje-select-margin-bottom: .5rem;\n  margin-bottom: var(--wje-select-margin-bottom);\n\n  width: 100%;\n  display: block;\n  [slot=arrow] {\n    transform: rotate(0deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.native-select {\n  &.default{\n    .wrapper {\n      display: block;\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n      padding-inline: .5rem;\n      padding-top: 0.125rem;\n      padding-bottom: 0.125rem;\n    }\n    .input-wrapper {\n      padding: 0;\n      min-height: 28px;\n      margin-top: -4px;\n    }\n    &.focused {\n      wje-label {\n        opacity: 0.67;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n    wje-label {\n      margin: 0;\n      display: block;\n      opacity: 1;\n      cursor: text;\n      transition: opacity 0.2s ease 0s;\n      line-height: var(--wje-select-line-height);\n      &.fade {\n        opacity: 0.5;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n  }\n  &.standard {\n    .wrapper {\n      background-color: var(--wje-select-background);\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n    }\n    .input-wrapper {\n      background: transparent;\n      width: 100%;\n    }\n  }\n}\n\n.wrapper {\n  display: flex;\n  width: 100%;\n}\n\n.input-wrapper {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  align-items: center;\n  background-color: var(--wje-select-background);\n  min-height: 28px;\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  appearance: none;\n  padding: 2px .5rem;\n  font-size: 14px !important;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\ninput {\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  font-size: 14px !important;\n  font-weight: 400;\n  letter-spacing: .01em;\n  border: medium;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  outline: 0;\n  font-size: 14px !important;\n}\n\n::placeholder {\n  opacity: 1;\n}\n\n:host [active] {\n  .wrapper {\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n  }\n  [slot=arrow] {\n    transform: rotate(180deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.options-wrapper {\n  border-width: var(--wje-select-options-border-width);\n  border-style: var(--wje-select-options-border-style);\n  border-color: var(--wje-select-options-border-color);\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n  margin-top: calc(0px - var(--wje-select-border-width));\n  background: var(--wje-select-background);\n  overflow: hidden;\n\n}\n\n.find {\n  --wje-input-border-radius: 0;\n  --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n  overflow: auto;\n  height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n  height: calc(100% - 32px - .5rem);\n}\n\n:host([multiple]) input {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n}\n\n:host([multiple]) .chips {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper{\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.counter {\n  padding-inline: .5rem;\n}\n\nwje-chip {\n  --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n.slot-start, .slot-end {\n  &:not(:empty) {\n    margin-right: .5rem;\n  }\n}\n";
 class Select extends WJElement {
   /**
@@ -466,8 +463,7 @@ class Select extends WJElement {
     } else {
       this.selectionChanged();
     }
-    if (silence)
-      return;
+    if (silence) return;
     event.dispatchCustomEvent(this, "wje-select:change");
   }
   /**
@@ -531,8 +527,7 @@ class Select extends WJElement {
    * @param {object} [map={ value: "value", text: "text" }] - The mapping object specifying the properties of the option data to be used for the value and text of the option.
    */
   addOption(optionData, silent = false, map = { value: "value", text: "text" }) {
-    if (!optionData)
-      return;
+    if (!optionData) return;
     const optionsElement = this.querySelector("wje-options");
     if (optionsElement) {
       optionsElement.addOption(optionData, silent, map);
@@ -569,8 +564,7 @@ class Select extends WJElement {
    * @param {boolean} [silent=false] - Whether to suppress firing events.
    */
   selectOption(value, silent = false) {
-    if (!value)
-      return;
+    if (!value) return;
     let option = this.querySelector(`wje-option[value="${value}"]`);
     if (option) {
       option.selected = true;

package/dist/wje-slider.js

@@ -1,11 +1,8 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
-const styles = ':host {\n  --wje-slider-track-height: .25rem;\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}\n\ninput[type=range] {\n  -webkit-appearance: none;\n  width: 100%;\n  height: var(--wje-slider-track-height);\n  margin: 0;\n  border-radius: 5px;\n  background-size: 70% 100%;\n  background-repeat: no-repeat;\n  /* Input Track */\n  --wje-slider-color: var(--wje-color-primary);\n  --wje-slider-thumb-color: var(--wje-color-primary);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-2);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-2));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-primary)), var(--wje-slider-color, var(--wje-color-primary)));\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  --wje-slider-color: var(--wje-color-primary);\n  --wje-slider-thumb-color: var(--wje-color-primary);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-2);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-2));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-primary)), var(--wje-slider-color, var(--wje-color-primary)));\n  /* Input Thumb */\n}\ninput[type=range][color=primary]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=primary]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=primary]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success] {\n  --wje-slider-color: var(--wje-color-success);\n  --wje-slider-thumb-color: var(--wje-color-success);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-2);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-2));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-success)), var(--wje-slider-color, var(--wje-color-success)));\n  /* Input Thumb */\n}\ninput[type=range][color=success]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=success]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=success]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete] {\n  --wje-slider-color: var(--wje-color-complete);\n  --wje-slider-thumb-color: var(--wje-color-complete);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-2);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-2));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-complete)), var(--wje-slider-color, var(--wje-color-complete)));\n  /* Input Thumb */\n}\ninput[type=range][color=complete]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=complete]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=complete]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger] {\n  --wje-slider-color: var(--wje-color-danger);\n  --wje-slider-thumb-color: var(--wje-color-danger);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-2);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-2));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-danger)), var(--wje-slider-color, var(--wje-color-danger)));\n  /* Input Thumb */\n}\ninput[type=range][color=danger]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=danger]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=danger]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning] {\n  --wje-slider-color: var(--wje-color-warning);\n  --wje-slider-thumb-color: var(--wje-color-warning);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-2);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-2));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-warning)), var(--wje-slider-color, var(--wje-color-warning)));\n  /* Input Thumb */\n}\ninput[type=range][color=warning]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=warning]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=warning]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark] {\n  --wje-slider-color: var(--wje-color-contrast-10);\n  --wje-slider-thumb-color: var(--wje-color-contrast-10);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-6) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-6);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-6));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-contrast-10)), var(--wje-slider-color, var(--wje-color-contrast-10)));\n  /* Input Thumb */\n}\ninput[type=range][color=dark]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=dark]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=dark]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=dark]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-10));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\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}\n\noutput {\n  position: absolute;\n  background: var(--wje-color-contrast-11);\n  color: var(--wje-color-contrast-0);\n  top: -46px;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n\n::slotted([slot=label]) {\n  margin-inline: 0 1rem;\n  font-size: var(--wje-font-size);\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n\n::slotted([slot=end]) {\n  margin-inline: 1rem 0;\n}';
+const styles = ':host {\n  --wje-slider-track-height: .25rem;\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}\n\ninput[type=range] {\n  -webkit-appearance: none;\n  width: 100%;\n  height: var(--wje-slider-track-height);\n  margin: 0;\n  border-radius: 5px;\n  background-size: 70% 100%;\n  background-repeat: no-repeat;\n  /* Input Track */\n  --wje-slider-color: var(--wje-color-primary-9);\n  --wje-slider-thumb-color: var(--wje-color-primary-9);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-4);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-4));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-primary-9)), var(--wje-slider-color, var(--wje-color-primary-9)));\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  --wje-slider-color: var(--wje-color-primary-9);\n  --wje-slider-thumb-color: var(--wje-color-primary-9);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-4);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-4));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-primary-9)), var(--wje-slider-color, var(--wje-color-primary-9)));\n  /* Input Thumb */\n}\ninput[type=range][color=primary]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=primary]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=primary]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=primary]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success] {\n  --wje-slider-color: var(--wje-color-success-9);\n  --wje-slider-thumb-color: var(--wje-color-success-9);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-4);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-4));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-success-9)), var(--wje-slider-color, var(--wje-color-success-9)));\n  /* Input Thumb */\n}\ninput[type=range][color=success]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=success]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=success]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=success]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-success-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete] {\n  --wje-slider-color: var(--wje-color-complete-9);\n  --wje-slider-thumb-color: var(--wje-color-complete-9);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-4);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-4));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-complete-9)), var(--wje-slider-color, var(--wje-color-complete-9)));\n  /* Input Thumb */\n}\ninput[type=range][color=complete]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=complete]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=complete]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=complete]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-complete-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger] {\n  --wje-slider-color: var(--wje-color-danger);\n  --wje-slider-thumb-color: var(--wje-color-danger);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-4);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-4));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-danger)), var(--wje-slider-color, var(--wje-color-danger)));\n  /* Input Thumb */\n}\ninput[type=range][color=danger]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=danger]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=danger]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=danger]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-danger));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning] {\n  --wje-slider-color: var(--wje-color-warning-9);\n  --wje-slider-thumb-color: var(--wje-color-warning-9);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-4);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-4));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-warning-9)), var(--wje-slider-color, var(--wje-color-warning-9)));\n  /* Input Thumb */\n}\ninput[type=range][color=warning]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=warning]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=warning]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=warning]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-warning-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark] {\n  --wje-slider-color: var(--wje-color-contrast-11);\n  --wje-slider-thumb-color: var(--wje-color-contrast-11);\n  --wje-slider-thumb-shadow: none;\n  --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n  --wje-slider-track-color: var(--wje-color-contrast-4);\n  background-color: var(--wje-slider-track-color, var(--wje-color-contrast-4));\n  background-image: linear-gradient(var(--wje-slider-color, var(--wje-color-contrast-11)), var(--wje-slider-color, var(--wje-color-contrast-11)));\n  /* Input Thumb */\n}\ninput[type=range][color=dark]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=dark]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=dark]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range][color=dark]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range][color=dark]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-contrast-11));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-webkit-slider-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range]::-moz-range-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range]::-ms-thumb {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow);\n}\ninput[type=range]::-webkit-slider-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-moz-range-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-ms-thumb:active {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-webkit-slider-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-moz-range-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\ninput[type=range]::-ms-thumb:hover {\n  background: var(--wje-slider-thumb-color, var(--wje-color-primary-9));\n  box-shadow: var(--wje-slider-thumb-shadow-active);\n}\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}\n\noutput {\n  position: absolute;\n  background: var(--wje-color-contrast-11);\n  color: var(--wje-color-contrast-0);\n  top: -46px;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n\n::slotted([slot=label]) {\n  margin-inline: 0 1rem;\n  font-size: var(--wje-font-size);\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n\n::slotted([slot=end]) {\n  margin-inline: 1rem 0;\n}';
 class Slider extends WJElement {
   /**
    * Creates an instance of Slider.

package/dist/wje-sliding-container.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "\n:host \n    {\n        display: block;\n        /* make css property for width height position  and if it is on top lef bottom right  */\n    }\n\n.sliding-container-wrapper{\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n    overflow: auto;\n}\n\n";
 class SlidingContainer extends WJElement {

package/dist/wje-split-view.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 function drag(container, options) {
   function move(pointerEvent) {

package/dist/wje-status.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = '/*\n[ WJ Status ]\n*/\n\n.native-status {\n  display: flex;\n  align-items: center;\n}\n\n.bullet {\n  width: var(--wje-status-size);\n  height: var(--wje-status-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  border-radius: var(--wje-border-radius-circle);\n}\n\n:host ::slotted([slot="start"]) {\n  margin-right: var(--wje-spacing-x-small);\n}\n\n:host ::slotted([slot="end"]) {\n  margin-left: var(--wje-spacing-x-small);\n}\n\n/* Size */\n:host([size=small]) {\n  --wje-status-size: var(--wje-size-small);\n}\n\n:host([size=medium]) {\n  --wje-status-size: var(--wje-size);\n}\n\n:host([size=large]) {\n  --wje-status-size: var(--wje-size-large);\n}\n\n/* Color */\n:host([color=primary]) .bullet {\n  background-color: var(--wje-color-primary-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=complete]) .bullet {\n  background-color: var(--wje-color-complete-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=success]) .bullet {\n  background-color: var(--wje-color-success-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=warning]) .bullet{\n  background-color: var(--wje-color-warning-9);\n  color: var(--wje-color-contrast-11);\n}\n\n:host([color=danger]) .bullet {\n  background-color: var(--wje-color-danger-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=contrast]) .bullet {\n  background-color: var(--wje-color-contrast-2);\n  color: var(--wje-color-contrast-11);\n}\n\n:host([color=contrast-reverse]) .bullet {\n  background-color: var(--wje-color-contrast-11);\n  color: var(--wje-color-contrast-0);\n}\n\n/* Border */\n:host([border=primary]) .bullet {\n  border-color: var(--wje-color-primary-9);\n}\n\n:host([border=complete]) .bullet {\n  border-color: var(--wje-color-complete-9);\n}\n\n:host([border=success]) .bullet {\n  border-color: var(--wje-color-success-9);\n}\n\n:host([border=warning]) .bullet {\n  border-color: var(--wje-color-warning-9);\n}\n\n:host([border=danger]) .bullet {\n  border-color: var(--wje-color-danger-9);\n}\n\n:host([border=contrast]) .bullet {\n  border-color: var(--wje-color-contrast-2);\n}\n\n:host([border=contrast-reverse]) .bullet {\n  border-color: var(--wje-color-contrast-11);\n}';
 class Status extends WJElement {

package/dist/wje-step.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "";
 class Step extends WJElement {