wj-elements 0.0.20 → 0.0.22

package/dist/wj-select.js

@@ -0,0 +1,229 @@
+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";
+const styles = "/*\n[ WJ Select ]\n*/\n:host {\n  --wj-select-border-width: 1px;\n  --wj-select-border-style: solid;\n  --wj-select-border-color: var(--wj-border-color);\n  --wj-select-options-border-width: 1px;\n  --wj-select-options-border-style: var(--wj-border-style);\n  --wj-select-options-border-color: var(--wj-border-color);\n  --wj-select-background: var(--wj-background);\n  --wj-select-line-height: 20px;\n  --wj-select-color: var(--wj-color);\n  --wj-select-border-radius: var(--wj-border-radius-medium);\n  width: 100%;\n  display: block;\n}\n:host [slot=arrow] {\n  transform: rotate(0deg);\n  transition: all 0.2s ease-in;\n}\n\n.native-select.default .wrapper {\n  display: block;\n  border-width: var(--wj-select-border-width);\n  border-style: var(--wj-select-border-style);\n  border-color: var(--wj-select-border-color);\n  border-radius: var(--wj-select-border-radius);\n  padding-inline: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.native-select.default .input-wrapper {\n  padding: 0;\n  min-height: 25px;\n  margin-top: -4px;\n}\n.native-select.default.focused wj-label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-select.default wj-label {\n  margin: 0;\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease 0s;\n  line-height: var(--wj-select-line-height);\n}\n.native-select.default wj-label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-select.standard .input-wrapper {\n  border-width: var(--wj-select-border-width);\n  border-style: var(--wj-select-border-style);\n  border-color: var(--wj-select-border-color);\n  border-radius: var(--wj-select-border-radius);\n  width: 100%;\n}\n\n.wrapper {\n  display: flex;\n  width: 100%;\n}\n\n.input-wrapper {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  background-color: var(--wj-select-background);\n  min-height: 28px;\n  color: var(--wj-select-color);\n  line-height: var(--wj-select-line-height);\n  appearance: none;\n  padding: 2px 0.5rem;\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\ninput {\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}\n\n::placeholder {\n  opacity: 1;\n}\n\n:host [active] .input-wrapper {\n  border-radius: var(--wj-select-border-radius) var(--wj-select-border-radius) 0 0;\n}\n:host [active] [slot=arrow] {\n  transform: rotate(180deg);\n  transition: all 0.2s ease-in;\n}\n\n.option-wrapper {\n  border-width: var(--wj-select-options-border-width);\n  border-style: var(--wj-select-options-border-style);\n  border-color: var(--wj-select-options-border-color);\n  border-radius: 0 0 var(--wj-select-border-radius) var(--wj-select-border-radius);\n  margin-top: -1px;\n  background: var(--wj-select-background);\n  overflow: auto;\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: 0.5rem;\n}\n\nwj-chip {\n  --wj-chip-margin: 0 .25rem 0 0;\n}\n\nwj-button {\n  --wj-padding-top: .25rem;\n  --wj-padding-start: .25rem;\n  --wj-padding-end: .25rem;\n  --wj-padding-bottom: .25rem;\n  --wj-button-margin-inline: 0 .25rem;\n}";
+class Select extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Select");
+    __publicField(this, "optionChange", (e) => {
+      let allOptions = this.getAllOptions();
+      if (!this.hasAttribute("multiple")) {
+        allOptions.forEach((option) => {
+          option.selected = false;
+          option.removeAttribute("selected");
+        });
+        this.popup.removeAttribute("active");
+      }
+      e.target.selected = !e.target.hasAttribute("selected");
+      this.selections(e.target);
+    });
+    __publicField(this, "removeChip", (e) => {
+      let option = e.target.option;
+      option.selected = false;
+      option.removeAttribute("selected");
+      e.target.parentNode.removeChild(e.target);
+      this.selections(null, 0);
+    });
+    this._selected = [];
+    this.counterEl = null;
+  }
+  set selected(value) {
+    this._selected = value;
+  }
+  get selected() {
+    return this.getSelected();
+  }
+  set trigger(value) {
+    this.setAttribute("trigger", value);
+  }
+  get trigger() {
+    return this.getAttribute("trigger") || "click";
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return ["active", "value"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-select", this.variant || "default");
+    let wrapper = document.createElement("div");
+    wrapper.classList.add("wrapper");
+    wrapper.setAttribute("slot", "anchor");
+    let label = document.createElement("wj-label");
+    label.innerText = this.label || "";
+    let inputWrapper = document.createElement("div");
+    inputWrapper.classList.add("input-wrapper");
+    let input = document.createElement("input");
+    input.setAttribute("type", "text");
+    input.setAttribute("part", "input");
+    input.setAttribute("autocomplete", "off");
+    input.setAttribute("readonly", "");
+    input.setAttribute("placeholder", this.placeholder || "");
+    let arrow = document.createElement("wj-icon");
+    arrow.setAttribute("name", "chevron-down");
+    arrow.setAttribute("slot", "arrow");
+    let chips = document.createElement("div");
+    chips.classList.add("chips");
+    chips.innerText = this.placeholder || "";
+    let optionsWrapper = document.createElement("div");
+    optionsWrapper.classList.add("option-wrapper");
+    optionsWrapper.style.setProperty("height", this.maxHeight || "auto");
+    let slot = document.createElement("slot");
+    let clear = document.createElement("wj-button");
+    clear.setAttribute("fill", "link");
+    clear.setAttribute("part", "clear");
+    let clearIcon = document.createElement("wj-icon");
+    clearIcon.setAttribute("name", "x");
+    clear.appendChild(clearIcon);
+    let popup = document.createElement("wj-popup");
+    popup.setAttribute("placement", "bottom-start");
+    popup.setAttribute("manual", "");
+    popup.setAttribute("size", "");
+    if (this.hasAttribute("disabled"))
+      popup.setAttribute("disabled", "");
+    if (this.variant === "standard") {
+      if (this.hasAttribute("label"))
+        native.appendChild(label);
+    } else {
+      wrapper.appendChild(label);
+    }
+    inputWrapper.appendChild(input);
+    if (this.hasAttribute("multiple"))
+      inputWrapper.appendChild(chips);
+    if (this.hasAttribute("clearable"))
+      inputWrapper.appendChild(clear);
+    inputWrapper.appendChild(arrow);
+    optionsWrapper.appendChild(slot);
+    wrapper.appendChild(inputWrapper);
+    popup.appendChild(wrapper);
+    popup.appendChild(optionsWrapper);
+    if (this.trigger === "click")
+      popup.setAttribute("manual", "");
+    native.appendChild(popup);
+    this.native = native;
+    this.popup = popup;
+    this.labelElement = label;
+    this.input = input;
+    this.optionsWrapper = optionsWrapper;
+    this.chips = chips;
+    this.clear = clear;
+    fragment.appendChild(native);
+    return fragment;
+  }
+  afterDraw(context, store, params) {
+    this.input.addEventListener("focus", (e) => {
+      this.labelElement.classList.add("fade");
+      this.native.classList.add("focused");
+    });
+    this.input.addEventListener("blur", (e) => {
+      this.native.classList.remove("focused");
+      if (!e.target.value)
+        this.labelElement.classList.remove("fade");
+    });
+    this.addEventListener("wj:option-change", this.optionChange);
+    this.clear.addEventListener("wj:button-click", (e) => {
+      this.getAllOptions().forEach((option) => {
+        option.selected = false;
+        option.removeAttribute("selected");
+      });
+      this.selections();
+      e.stopPropagation();
+    });
+    this.selections();
+    this.optionsWrapper.addEventListener("wj:options-load", (e) => {
+      this.optionsWrapper.scrollTo(0, 0);
+    });
+  }
+  getAllOptions() {
+    return this.querySelectorAll("wj-option");
+  }
+  getSelectedOptions() {
+    return this.querySelectorAll("wj-option[selected]");
+  }
+  getSelected(option) {
+    let selectedOptions = this.getSelectedOptions();
+    selectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Array.from(selectedOptions);
+    selectedOptions = selectedOptions.map((option2) => {
+      return {
+        value: option2.value,
+        text: option2.textContent.trim()
+      };
+    });
+    return selectedOptions;
+  }
+  selectionChanged(option = null, length = 0) {
+    if (this.hasAttribute("multiple")) {
+      this.value = this.selectedOptions.map((el) => el).reverse();
+      if (this.placeholder && length === 0) {
+        this.chips.innerHTML = this.placeholder;
+        this.input.value = "";
+      } else {
+        if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {
+          this.counter();
+        } else {
+          if (option != null)
+            this.chips.appendChild(this.getChip(option));
+        }
+      }
+    } else {
+      let value = (option == null ? void 0 : option.textContent.trim()) || "";
+      this.value = value;
+      this.input.value = value;
+    }
+  }
+  selections(option) {
+    let options = this.getSelectedOptions();
+    this.selectedOptions = Array.isArray(options) ? options : Array.from(options);
+    if (this.selectedOptions.length >= +this.maxOptions) {
+      this.counterEl = null;
+    }
+    this.chips.innerHTML = "";
+    if (this.selectedOptions.length > 0) {
+      this.selectedOptions.forEach((option2, index) => {
+        this.selectionChanged(option2, ++index);
+      });
+    } else {
+      this.selectionChanged();
+    }
+  }
+  counter() {
+    if (this.counterEl && this.value.length === +this.maxOptions) {
+      this.counterEl.remove();
+      this.counterEl = null;
+      return;
+    }
+    if (!this.counterEl) {
+      this.counterEl = document.createElement("span");
+      this.counterEl.classList.add("counter");
+      this.chips.appendChild(this.counterEl);
+    }
+    this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;
+  }
+  getChip(option) {
+    let chip = document.createElement("wj-chip");
+    chip.setAttribute("removable", "");
+    chip.addEventListener("wj:chip-remove", this.removeChip);
+    chip.option = option;
+    let label = document.createElement("wj-label");
+    label.innerText = option.textContent.trim();
+    chip.appendChild(label);
+    return chip;
+  }
+}
+customElements.get("wj-select") || window.customElements.define("wj-select", Select);
+export {
+  Select
+};

package/dist/wj-slider.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 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() {

package/dist/wj-split-view.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 function drag(container, options) {
   function move(pointerEvent) {
     const dims = container.getBoundingClientRect();

package/dist/wj-tab-group.js

@@ -0,0 +1,76 @@
+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";
+const styles = "/*\n[ WJ Tab Group ]\n*/\n:host {\n  --wj-tab-top: 0;\n  --wj-tab-start: 0;\n  --wj-tab-end: 0;\n  --wj-tab-bottom: 0;\n}\n\n.native-tab-group {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n}\n\n.native-tab-group > header {\n  display: flex;\n  flex-direction: column;\n}\n.native-tab-group > header > nav {\n  display: flex;\n}\n\n.native-tab-group > section {\n  width: 100%;\n}\n.native-tab-group > section > article {\n  scroll-snap-align: start;\n  overflow-y: auto;\n  overscroll-behavior-y: contain;\n}\n\n:host([variant=top]) {\n  --wj-tab-top: auto !important;\n  --wj-tab-writing-mode: horizontal-tb;\n}\n:host([variant=top]) .native-tab-group {\n  flex-direction: column;\n}\n:host([variant=top]) nav {\n  border-bottom: 1px solid var(--wj-border-color);\n}\n\n:host([variant=start]) {\n  --wj-tab-start: auto !important;\n  --wj-tab-writing-mode: vertical-rl;\n}\n:host([variant=start]) .native-tab-group {\n  flex-direction: row;\n}\n:host([variant=start]) nav {\n  flex-direction: column;\n  border-right: 1px solid var(--wj-border-color);\n}\n\n:host([variant=end]) {\n  --wj-tab-writing-mode: vertical-rl;\n}\n:host([variant=end]) .native-tab-group {\n  flex-direction: row-reverse;\n}\n:host([variant=end]) nav {\n  flex-direction: column;\n  border-left: 1px solid var(--wj-border-color);\n}\n\n:host([variant=bottom]) {\n  --wj-tab-bottom: auto !important;\n  --wj-tab-writing-mode: horizontal-tb;\n}\n:host([variant=bottom]) .native-tab-group {\n  flex-direction: column-reverse;\n}\n:host([variant=bottom]) nav {\n  border-top: 1px solid var(--wj-border-color);\n}";
+class TabGroup extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "TabGroup");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-tab-group");
+    let header = document.createElement("header");
+    header.classList.add("scroll-snap-x");
+    let nav = document.createElement("nav");
+    let section = document.createElement("section");
+    let slot = document.createElement("slot");
+    let slotNav = document.createElement("slot");
+    slotNav.setAttribute("name", "nav");
+    header.appendChild(nav);
+    nav.appendChild(slotNav);
+    section.appendChild(slot);
+    native.appendChild(header);
+    native.appendChild(section);
+    fragment.appendChild(native);
+    return fragment;
+  }
+  afterDraw() {
+    let activeTab = this.getActiveTab();
+    let activeTabName = activeTab ? activeTab[0].name : this.getTabAll()[0].panel;
+    this.setActiveTab(activeTabName);
+    this.addEventListener("wj:tab-change", (e) => {
+      if (e.detail.context.hasAttribute("disabled"))
+        return false;
+      this.setActiveTab(e.detail.context.panel);
+    });
+  }
+  removeActiveTab() {
+    this.getPanelAll().forEach((el) => {
+      el.removeAttribute("active");
+    });
+    this.getTabAll().forEach((el) => {
+      el.removeAttribute("active");
+    });
+  }
+  setActiveTab(tab) {
+    this.removeActiveTab();
+    this.querySelector(`[panel="${tab}"]`).setAttribute("active", "");
+    this.querySelector(`[name="${tab}"]`).setAttribute("active", "");
+  }
+  getActiveTab() {
+    let activeTabs = Array.from(this.context.querySelectorAll("[active]"));
+    return activeTabs.length > 0 ? activeTabs[0] : null;
+  }
+  getTabAll() {
+    return this.context.querySelector('[name="nav"]').assignedElements();
+  }
+  getPanelAll() {
+    return Array.from(this.querySelectorAll("wj-tab-panel"));
+  }
+}
+customElements.get("wj-tab-group") || window.customElements.define("wj-tab-group", TabGroup);
+export {
+  TabGroup
+};

package/dist/wj-tab-panel.js

@@ -0,0 +1,30 @@
+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";
+const styles = "/*\n[ WJ Tab Panel ]\n*/\n:host {\n  display: none;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 1rem;\n}\n\n:host([active]) {\n  display: block;\n}";
+class TabPanel extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "TabPanel");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", TabPanel);
+export {
+  TabPanel
+};

package/dist/wj-tab.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
+const styles = '/*\n[ WJ Tab ]\n*/\n:host {\n  --wj-font-size: 10px;\n  --wj-tab-text-transfrom: uppercase;\n  --wj-tab-font-weight: 500;\n  --wj-tab-letter-spacing: 0.06em;\n  --wj-tab-padding-inline: 1rem;\n  --wj-tab-padding-top: .75rem;\n  --wj-tab-padding-bottom: .75rem;\n  --wj-tab-color-active: var(--wj-color-primary-11);\n  --wj-tab-color-hover: var(--wj-color-primary-1);\n  display: block;\n  position: relative;\n}\n:host a {\n  display: block;\n  align-items: center;\n  white-space: nowrap;\n  font-family: var(--wj-font-family-secondary);\n  font-size: var(--wj-font-size);\n  letter-spacing: var(--wj-tab-letter-spacing);\n  text-transform: var(--wj-tab-text-transfrom);\n  font-weight: var(--wj-tab-font-weight);\n  text-decoration: none;\n  padding-inline: var(--wj-tab-padding-inline);\n  padding-top: var(--wj-tab-padding-top);\n  padding-bottom: var(--wj-tab-padding-bottom);\n  color: var(--wj-color);\n}\n:host a > svg {\n  inline-size: 1.5em;\n  pointer-events: none;\n}\n:host a:hover {\n  background: var(--wj-tab-color-hover);\n}\n:host a:hover:after {\n  display: block;\n}\n:host a:after {\n  content: " ";\n  display: none;\n  block-size: 0.15rem;\n  writing-mode: var(--wj-tab-writing-mode);\n  background: var(--wj-tab-color-active);\n  position: absolute;\n  bottom: var(--wj-tab-bottom);\n  left: var(--wj-tab-start);\n  right: var(--wj-tab-end);\n  top: var(--wj-tab-top);\n}\n\n:host([disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: inherit;\n}\n:host([disabled]) a:after {\n  display: none;\n}\n\n:host([active]) a:after {\n  display: block;\n}';
+class Tab extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Tab");
+    this.last = false;
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let a = document.createElement("a");
+    a.setAttribute("href", "#" + this.panel);
+    a.innerHTML = this.innerHTML;
+    fragment.appendChild(a);
+    return fragment;
+  }
+  afterDraw() {
+    event.addListener(this, "click", "wj:tab-change");
+  }
+}
+customElements.get("wj-tab") || window.customElements.define("wj-tab", Tab);
+export {
+  Tab
+};

package/dist/wj-textarea.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wj-element.js";
-import "./wj-store.js";
 const styles = "/*\n[ WJ Textarea ]\n*/\n:host {\n  --wj-textarea-font-family: var(--wj-font-family);\n  --wj-textarea-background-color: var(--wj-background);\n  --wj-textarea-color: var(--wj-color);\n  --wj-textarea-color-invalid: var(--wj-color-danger);\n  --wj-textarea-border-width: 1px;\n  --wj-textarea-border-style: solid;\n  --wj-textarea-border-color: var(--wj-border-color);\n  --wj-textarea-border-color-focus: var(--wj-color-primary);\n  --wj-textarea-border-radius: 4px;\n  --wj-textarea-margin-bottom: .5rem;\n  --wj-textarea-line-height: 20px;\n  --wj-textarea-padding: 0.5rem;\n  width: 100%;\n  margin-bottom: var(--wj-textarea-margin-bottom);\n  display: block;\n}\n:host .wrapper {\n  display: flex;\n  width: 100%;\n  border-width: var(--wj-textarea-border-width);\n  border-style: var(--wj-textarea-border-style);\n  border-color: var(--wj-textarea-border-color);\n  border-radius: var(--wj-textarea-border-radius);\n}\n:host textarea {\n  font-family: var(--wj-textarea-font-family);\n  color: var(--wj-textarea-color);\n  font-size: 14px;\n  border: 0 none;\n  padding: 0 var(--wj-textarea-padding);\n}\n:host textarea:focus {\n  outline: none;\n}\n\n:host([resize=auto]) textarea,\n:host([resize=none]) textarea {\n  resize: none;\n}\n\n.native-textarea .input-wrapper {\n  width: 100%;\n  line-height: normal;\n}\n.native-textarea.default {\n  background-color: var(--wj-textarea-background-color);\n  font-family: var(--wj-textarea-font-family);\n  position: relative;\n  padding-inline: 0;\n  padding-top: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n.native-textarea.default.focused .wrapper {\n  border-color: var(--wj-textarea-border-color-focus) !important;\n}\n.native-textarea.default.focused label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-textarea.default textarea {\n  border: none;\n  padding-top: 0;\n  background: none;\n  box-shadow: none;\n  width: calc(100% - var(--wj-textarea-padding) * 2);\n  max-width: calc(100% - var(--wj-textarea-padding) * 2);\n  min-width: calc(100% - var(--wj-textarea-padding) * 2);\n}\n.native-textarea.default label {\n  padding: 0 var(--wj-textarea-padding);\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-textarea-line-height);\n  padding-top: 0.25rem;\n}\n.native-textarea.default label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-textarea.default ::slotted([slot=start]) {\n  border-left: none;\n  border-top: none;\n  border-bottom: none;\n}\n.native-textarea.default ::slotted([slot=end]) {\n  border-right: none;\n  border-top: none;\n  border-bottom: none;\n}\n.native-textarea.standard {\n  background-color: var(--wj-textarea-background-color);\n  font-family: var(--wj-textarea-font-family);\n  position: relative;\n  border-radius: var(--wj-textarea-border-radius);\n  padding: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n.native-textarea.standard.focused .wrapper {\n  border-color: var(--wj-textarea-border-color-focus) !important;\n}\n.native-textarea.standard textarea {\n  display: block;\n  min-height: 32px;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: var(--wj-textarea-border-radius);\n}\n.native-textarea.standard label {\n  margin: 0;\n  display: inline-block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-textarea-line-height);\n}\n.native-textarea.standard ::slotted([slot=start]) {\n  border-right: none;\n  border-radius: var(--wj-textarea-border-radius) 0 0 var(--wj-textarea-border-radius);\n}\n.native-textarea.standard ::slotted([slot=end]) {\n  border-left: none;\n  border-radius: 0 var(--wj-textarea-border-radius) var(--wj-textarea-border-radius) 0;\n}\n.native-textarea.standard.has-start textarea {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.native-textarea.standard.has-end textarea {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.native-textarea.standard .error-message {\n  position: static;\n  background: transparent;\n  padding: 0.25rem 0;\n  left: auto;\n  transform: none;\n  color: var(--wj-textarea-color-invalid);\n  font-size: 12px;\n  line-height: normal;\n}\n\n.counter {\n  float: right;\n}";
 class Textarea extends WJElement {
   constructor() {

package/dist/wj-thumbnail.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const styles = "/*\n[ WJ Thumbnail ]\n*/\n:host {\n  --wj-thumbnail-width: 48px;\n  --wj-thumbnail-height: 48px;\n  --wj-thumbnail-border-radius: var(--wj-border-radius-medium);\n}\n\n:host {\n  width: var(--wj-thumbnail-width);\n  height: var(--wj-thumbnail-height);\n  display: block;\n  border-radius: var(--wj-border-radius);\n}\n\n::slotted(wj-img),\n::slotted(img) {\n  border-radius: var(--wj-thumbnail-border-radius);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n}";
 class Thumbnail extends WJElement {
   constructor() {

package/dist/wj-toast.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const simple = (notification, alert, options) => {
   notification.classList.add("pgn-simple");
   alert.innerHTML = "<div>" + options.message + "</div>";

package/dist/wj-toggle.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ WJ Toggle ]\n*/\n:host(.wj-color-primary) {\n  --wj-toggle-color-base: var(--wj-color-primary);\n}\n:host(.wj-color-complete) {\n  --wj-toggle-color-base: var(--wj-color-complete);\n}\n:host(.wj-color-success) {\n  --wj-toggle-color-base: var(--wj-color-success) !important;\n}\n:host(.wj-color-warning) {\n  --wj-toggle-color-base: var(--wj-color-warning);\n}\n:host(.wj-color-danger) {\n  --wj-toggle-color-base: var(--wj-color-danger);\n}\n:host(.wj-color-info) {\n  --wj-toggle-color-base: var(--wj-color-info);\n}\n:host {\n  --wj-toggle-color-base: var(--wj-color-contrast-3);\n  --wj-toggle-width: 30px;\n  --wj-toggle-height: 18px;\n  --wj-toggle-border-radius: 50px;\n  --wj-toggle-handle-width: 14px;\n  --wj-toggle-handle-height: 14px;\n  --wj-toggle-handle-border-radius: 9px;\n  --wj-toggle-handle-color: #fff;\n  --wj-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2);\n  --wj-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3);\n  --switch-duration: 250ms;\n  --switch-curve: cubic-bezier(.4,0,.2,1);\n}\n.native-toggle {\n  display: flex;\n}\nlabel {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  user-select: none;\n}\nlabel .label-wrapper {\n  width: var(--wj-toggle-width);\n  height: var(--wj-toggle-height);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\nlabel .label-wrapper:before {\n  content: "";\n  position: absolute;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  top: auto;\n  left: 0;\n  background: var(--wj-toggle-color-base);\n  background-size: 300%;\n  background-position: right;\n  border-radius: var(--wj-toggle-border-radius);\n  border: none;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n  transition: background calc(var(--switch-duration) + var(--switch-duration) * 0.24), box-shadow var(--switch-duration);\n  transition-timing-function: var(--switch-curve);\n}\nlabel .label-wrapper:after {\n  content: "";\n  position: absolute;\n  transform: translateX(0%);\n  background: var(--wj-toggle-handle-color);\n  width: var(--wj-toggle-handle-width);\n  height: var(--wj-toggle-handle-height);\n  border-radius: var(--wj-toggle-handle-border-radius);\n  top: auto;\n  left: 2px;\n  box-shadow: var(--wj-toggle-handle-shadow);\n  transition: transform, box-shadow;\n  transition-duration: var(--switch-duration);\n  transition-timing-function: var(--switch-curve);\n}\ninput[type=checkbox][disabled] + label {\n  cursor: not-allowed !important;\n  color: var(--wj-color-contrast-9);\n  opacity: 0.58;\n}\ninput[type=checkbox][disabled] + label:before {\n  cursor: not-allowed !important;\n}\ninput[type=checkbox] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\ninput[type=checkbox]:checked + label .label-wrapper:before {\n  background-position: left;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n}\ninput[type=checkbox]:checked + label .label-wrapper:after {\n  transform: translateX(calc(var(--wj-toggle-width) - var(--wj-toggle-handle-width) - 4px));\n  box-shadow: var(--wj-toggle-handle-shadow-checked);\n}\ninput[type=checkbox]:focus + label .label-wrapper:before {\n  outline: none !important;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 0 #78c8fe;\n}\ninput[type=checkbox][disabled]:active + label .label-wrapper:after {\n  transform: scaleX(1.1);\n  transform-origin: center left;\n  transition: transform step-start;\n}\ninput[type=checkbox]:checked[disabled]:active + label .label-wrapper:after {\n  transform: translateX(calc(100% - 6px)) scaleX(1.1);\n  transform-origin: center right;\n}\ninput[type=checkbox]:hover:active + label .label-wrapper:before {\n  background-color: transparent;\n}\n:host .text {\n  margin-inline: 0.5rem 0;\n}';
 class Toggle extends WJElement {
   constructor() {

package/dist/wj-toolbar-action.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ WJ Toolbar Action ]\n*/\n:host .native-toolbar-action {\n  display: flex;\n}";
 class ToolbarAction extends WJElement {
   constructor() {

package/dist/wj-toolbar.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import { w as withRouterLinks } from "./router-links-26e4a166.js";
-import "./wj-store.js";
+import { w as withRouterLinks } from "./router-links-F7MJWhZi.js";
 const styles = "/*\n[ WJ Toolbar ]\n*/\n:host {\n  --wj-toolbar-background: var(--wj-background);\n  --wj-toolbar-min-height: 70px;\n  --wj-toolbar-padding-top: 1rem;\n  --wj-toolbar-padding-bottom: 1rem;\n  --wj-toolbar-padding-inline: 1.5rem;\n  --wj-toolbar-border-color: var(--wj-border-color);\n  --wj-toolbar-top: 0;\n  width: 100%;\n  height: var(--wj-toolbar-height);\n}\n\n.native-toolbar {\n  background-color: var(--wj-toolbar-background);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  border-bottom: 1px solid var(--wj-toolbar-border-color);\n  padding-inline: var(--wj-toolbar-padding-inline);\n  padding-top: var(--wj-toolbar-padding-top);\n  padding-bottom: var(--wj-toolbar-padding-bottom);\n  box-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);\n}\n\n::slotted {\n  grid-column: span 4;\n}\n\n::slotted([slot=start]) {\n  margin-right: auto;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--wj-toolbar-top);\n  z-index: 999;\n}";
 class Toolbar extends withRouterLinks(WJElement) {
   constructor() {

package/dist/wj-tooltip.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wj-element.js";
-import "./wj-store.js";
 const styles = "/*\n[ WJ Tooltip ]\n*/\n:host {\n  --wj-tooltip-arrow-color: var(--wj-color-contrast-11);\n}\n\n.native-tooltip {\n  display: block;\n  padding: 0.5rem;\n  color: var(--wj-color-contrast-0);\n  background-color: var(--wj-color-contrast-11);\n  font-weight: normal;\n  font-size: 0.75rem !important;\n  border-radius: var(--wj-border-radius-small);\n  line-height: 1;\n  box-sizing: border-box;\n  box-shadow: var(--wj-box-shadow-medium);\n}\n\n.arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: var(--wj-tooltip-arrow-color);\n  transform: rotate(45deg);\n}";
 class Tooltip extends WJElement {
   constructor() {

package/dist/wj-visually-hidden.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const styles = "/*\n[ WJ Visually Hidden ]\n*/\n:host(:not(:focus-within)) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  clip: rect(0 0 0 0) !important;\n  clip-path: inset(50%) !important;\n  border: none !important;\n  overflow: hidden !important;\n  white-space: nowrap !important;\n  padding: 0 !important;\n}";
 class VisuallyHidden extends WJElement {
   constructor() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "files": [
     "./dist"
@@ -27,6 +27,6 @@
   "devDependencies": {
     "miragejs": "^0.1.47",
     "sass": "^1.63.5",
-    "vite": "^4.3.9"
+    "vite": "^5.1.2"
   }
-}
+}