wj-elements 0.0.20 → 0.0.22

package/dist/wj-animation.js

@@ -6,7 +6,6 @@ var __publicField = (obj, key, value) => {
 };
 import WJElement from "./wj-element.js";
 import { fetchAndParseCSS } from "./wj-fetchAndParseCSS.js";
-import "./wj-store.js";
 const styles = "/*\n[ WJ Animation ]\n*/";
 class Animation extends WJElement {
   constructor() {

package/dist/wj-aside.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 Aside ]\n*/\n:host {\n  --wj-aside-width: "100px";\n  --wj-aside-top: 0;\n  --wj-aside-border-color: var(--wj-border-color);\n  --wj-aside-border-width: 0 1px 0 0;\n  --wj-aside-border-style: solid;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: auto;\n  border-color: var(--wj-aside-border-color);\n  border-width: var(--wj-aside-border-width);\n  border-style: var(--wj-aside-border-style);\n}\n\n:host(.open) {\n  display: block !important;\n}\n\n@media (min-width: 768px) {\n  :host([fixed]) {\n    position: fixed;\n    width: var(--wj-aside-width);\n    top: var(--wj-aside-top);\n    height: calc(100% - var(--wj-aside-top));\n  }\n}\n@media (max-width: 768px) {\n  :host {\n    display: none;\n  }\n  :host([variant=top-start]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 80%;\n    height: 100%;\n    z-index: 9999;\n    background-color: #fff;\n  }\n}';
 class Aside extends WJElement {
   constructor() {

package/dist/wj-avatar.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 function getHsl(text, s = 30, l = 80) {
   let str = text, hash = 0;
   for (let i = 0; i < (str == null ? void 0 : str.length); i++) {

package/dist/wj-badge.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 Badge ]\n*/\n:host(.wj-color-primary) {\n  --wj-color-base: var(--wj-color-primary) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-complete) {\n  --wj-color-base: var(--wj-color-complete) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-success) {\n  --wj-color-base: var(--wj-color-success) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-warning) {\n  --wj-color-base: var(--wj-color-warning) !important;\n  --wj-color-contrast: var(--wj-color-contrast-high) !important;\n}\n:host(.wj-color-danger) {\n  --wj-color-base: var(--wj-color-danger) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-info) {\n  --wj-color-base: var(--wj-color-info) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-menu) {\n  --wj-color-base: var(--wj-color-contrast-lower) !important;\n  --wj-color-contrast: var(--wj-color-contrast-high) !important;\n}\n:host {\n  --wj-chip-border-radius: 100px;\n  text-shadow: none;\n  font-family: var(--wj-font-family);\n  font-weight: 600;\n  background-color: var(--wj-color-contrast-low);\n  font-size: 11px;\n  padding-left: 6px;\n  padding-right: 6px;\n  color: var(--wj-color-contrast-high);\n  border-radius: 10px;\n}\n:host(.wj-color) {\n  background-color: var(--wj-color-base, red);\n  color: var(--wj-color-contrast);\n}";
 class Badge extends WJElement {
   constructor() {

package/dist/wj-breadcrumb.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { WjElementUtils, event } from "./wj-element.js";
-import "./wj-store.js";
 const styles = "/*\n[ WJ Breadcrumbs ]\n*/\n:host {\n  --wj-breadcrumb-a: var(--wj-color-contrast-high);\n  --wj-breadcrumb-a-hover: var(--wj-color-contrast-medium);\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  line-height: 1.5;\n}\n\n:host(.collapsed) {\n  display: none;\n}\n\n.native-breadcrumb {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  outline: none;\n  background: inherit;\n  padding: 0.25rem 0.75rem;\n  color: var(--wj-breadcrumb-a);\n  text-decoration: none;\n}\n.native-breadcrumb.hidden {\n  display: none;\n}\n.native-breadcrumb.active {\n  font-weight: bold;\n}\n.native-breadcrumb:hover {\n  color: var(--wj-breadcrumb-a-hover);\n}\n\nbutton {\n  margin-inline: 0.75rem;\n  border: 0 solid transparent;\n  border-radius: 3px;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.separator {\n  display: inline-flex;\n  align-items: center;\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 0.5rem;\n}\n\n::slotted([slot=end]) {\n  margin-inline: 0.5rem 0;\n}";
 class Breadcrumb extends WJElement {
   constructor() {

package/dist/wj-breadcrumbs.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 Breadcrumbs ]\n*/\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}";
 class Breadcrumbs extends WJElement {
   constructor() {

package/dist/wj-button-group.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 Button Group ]\n*/\n:host {\n  display: inline-block;\n}\n:host .native-button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  line-height: 1;\n}\n:host slot {\n  display: contents;\n}\n\n::slotted(wj-button) {\n  margin: 0 !important;\n}";
 class ButtonGroup extends WJElement {
   constructor() {

package/dist/wj-button.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { WjElementUtils, event } from "./wj-element.js";
-import "./wj-store.js";
 const bool = (v) => {
   return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
 };

package/dist/wj-card-content.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 Card - Content ]\n*/\n:host {\n  --wj-card-padding: 0 1rem 1rem;\n  display: block;\n  padding: var(--wj-card-padding);\n}\n:host.no-padding .row {\n  margin-left: 0;\n  margin-right: 0;\n}\n:host.no-bottom-padding {\n  padding-bottom: 0;\n}\n:host.no-top-padding {\n  padding-top: 0;\n}\n:host .title {\n  margin-top: 0;\n}\n:host.scrollable {\n  margin-bottom: 20px;\n}\n:host h3 {\n  line-height: 34px;\n  font-size: 26px;\n}";
 class CardContent extends WJElement {
   constructor() {

package/dist/wj-card-controls.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 Card - Controls ]\n*/\n:host {\n  --wj-card-subtitle-font-size: 28px;\n  --wj-card-subtitle-font-family: var(--wj-font-family-secondary);\n  font-family: var(--wj-card-subtitle-font-family);\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-size: 10.5px;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n  transition: opacity 0.3s ease;\n  position: absolute;\n  right: 1rem;\n  top: 0.5rem;\n}";
 class CardControls extends WJElement {
   constructor() {

package/dist/wj-card-header.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 Card - Header ]\n*/\n:host {\n  --wj-card-header-padding: 1rem 1rem 0.5rem;\n  background: transparent;\n  border-radius: 0;\n  border-bottom: 0;\n  padding: var(--wj-card-header-padding);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.wj-separator):after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  margin-top: 0.5rem;\n}';
 class CardHeader extends WJElement {
   constructor() {

package/dist/wj-card-subtitle.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 Card - Subtitle ]\n*/\n:host {\n  --wj-card-subtitle-font-size: 10.5px;\n  --wj-card-subtitle-font-family: var(--wj-font-family-secondary);\n  --wj-card-subtitle-padding: 0;\n  transition: opacity 0.3s ease;\n  font-family: var(--wj-card-subtitle-font-family);\n  font-size: var(--wj-card-subtitle-font-size);\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-weight: 500;\n  margin: 0;\n  padding: var(--wj-card-subtitle-padding);\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n}";
 class CardSubtitle extends WJElement {
   constructor() {

package/dist/wj-card-title.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 Card - Title ]\n*/\n:host {\n  --wj-card-title-font-size: 24px;\n  --wj-card-title-font-weight: 500;\n  --wj-card-title-margin: 0;\n  --wj-card-title-padding: 0;\n  --wj-card-title-line-height: 1.2;\n  font-size: var(--wj-card-title-font-size);\n  font-weight: var(--wj-card-title-font-weight);\n  margin: var(--wj-card-title-margin);\n  padding: var(--wj-card-title-padding);\n  line-height: var(--wj-card-title-line-height);\n  display: block;\n  position: relative;\n}";
 class CardTitle extends WJElement {
   constructor() {

package/dist/wj-card.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 Card ]\n*/\n:host {\n  --wj-card-margin-top: 0;\n  --wj-card-margin-bottom: 1rem;\n  --wj-card-margin-inline: 0;\n  --wj-card-border-color: transparent;\n}\n\n:host(.wj-color-primary) {\n  --wj-card-background: var(--wj-color-primary);\n}\n\n:host(.wj-color-complete) {\n  --wj-card-background: var(--wj-color-complete);\n}\n\n:host(.wj-color-success) {\n  --wj-card-background: var(--wj-color-success);\n}\n\n:host(.wj-color-warning) {\n  --wj-card-background: var(--wj-color-warning);\n}\n\n:host(.wj-color-danger) {\n  --wj-card-background: var(--wj-color-danger);\n}\n\n:host(.wj-color-info) {\n  --wj-card-background: var(--wj-color-info);\n}\n\n:host(.wj-color-menu) {\n  --wj-card-background: var(--wj-color-menu);\n}\n\n:host(.wj-color-primary) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-complete) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-success) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-warning) {\n  --wj-card-color: var(--wj-color);\n}\n\n:host(.wj-color-danger) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-info) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-menu) {\n  --wj-card-color: var(--wj-color-white) !important;\n}\n\n:host {\n  background-color: var(--wj-card-background);\n  color: var(--wj-card-color) !important;\n  margin-top: var(--wj-card-margin-top);\n  margin-bottom: var(--wj-card-margin-bottom);\n  margin-inline: var(--wj-card-margin-inline);\n  box-shadow: var(--wj-box-shadow-large);\n  border-color: var(--wj-border-color);\n  border-style: var(--wj-border-style);\n  border-width: var(--wj-border-size);\n  border-radius: var(--wj-border-radius-medium);\n  font-family: var(--wj-font-family);\n  font-size: var(--wj-font-size);\n  line-height: var(--wj-line-height);\n  position: relative;\n  width: 100%;\n  word-wrap: normal;\n  display: flex;\n  flex-direction: column;\n  contain: content;\n  overflow: hidden;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n:host(.wj-color) {\n  background-color: var(--wj-card-background, #fff);\n  color: var(--wj-card-color);\n}";
 class Card extends WJElement {
   constructor() {

package/dist/wj-carousel-item.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 Carousel Item ]\n*/\n:host {\n  --aspect-ratio: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: var(--wj-carousel-size, 100%);\n  max-height: 100%;\n  aspect-ratio: var(--aspect-ratio);\n  scroll-snap-align: center;\n  scroll-snap-stop: always;\n}\n\n.native-carousel-item {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n::slotted(wj-img) {\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: contain;\n  display: flex;\n}";
 class CarouselItem extends WJElement {
   constructor() {

package/dist/wj-carousel.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[ Carousel ]\n*/\n:host {\n  --wj-scroll-hint: 0px;\n  --wj-carousel-width: 100%;\n  --wj-carousel-height: auto;\n}\n.native-carousel {\n  position: relative;\n  width: var(--wj-carousel-width, 100%);\n  height: var(--wj-carousel-height, 300px);\n  scroll-behavior: smooth;\n}\n.carousel-slides {\n  display: flex;\n  transition: transform 0.5s ease;\n  align-items: center;\n  justify-items: center;\n  overflow: auto;\n  overscroll-behavior-x: contain;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  aspect-ratio: var(--wj-aspect-ratio, 4/3);\n  scroll-snap-type: x mandatory;\n  scroll-padding-inline: 0;\n  overflow-y: hidden;\n  padding-inline: var(--wj-spacing-inline, 0);\n  gap: 0.5rem;\n}\n.carousel-slides::-webkit-scrollbar {\n  display: none;\n}\n::slotted(wj-carousel-item) {\n  flex: 0 0 var(--wj-carousel-size, 100%);\n  height: 100%;\n}\nwj-button {\n  position: absolute;\n  top: 50%;\n  border: none;\n  cursor: pointer;\n  z-index: 2;\n}\n.prev {\n  left: -1rem;\n  transform: translate(-100%, -50%);\n}\n.next {\n  right: -0.5rem;\n  transform: translate(100%, -50%);\n}\n.pagination {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 50%;\n  transform: translate(-50%, 100%);\n  display: flex;\n  z-index: 2;\n}\n.pagination-item {\n  cursor: pointer;\n  height: 15px;\n  width: 15px;\n  margin: 0 2px;\n  background-color: var(--wj-color-contrast-4);\n  display: inline-block;\n  border-radius: 50%;\n}\n.pagination-item.active {\n  background-color: var(--wj-color);\n}\n.thumbnails {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: auto;\n  gap: 0.5rem;\n  padding: 0 0.5rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n  box-sizing: border-box;\n  overflow-y: hidden;\n}\n.thumbnails wj-thumbnail {\n  --wj-thumbnail-width: 48px;\n  --wj-thumbnail-height: 48px;\n  --wj-thumbnail-border-radius: 0;\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n.thumbnails .active {\n  border: 1px solid var(--wj-color-primary-11);\n}";
 class Carousel extends WJElement {
   constructor() {

package/dist/wj-checkbox.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* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Checkbox ]\n*/\n:host {\n  --wj-grey-check-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==") left center;\n  --wj-white-check-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==") left center;\n  --wj-checkbox-margin-top: 0;\n  --wj-checkbox-margin-bottom: .5rem;\n  --wj-checkbox-margin-inline: 0;\n  --wj-checkbox-width: 16px;\n  --wj-checkbox-height: 16px;\n  display: block;\n  margin-top: var(--wj-checkbox-margin-top);\n  margin-bottom: var(--wj-checkbox-margin-bottom);\n  margin-inline: var(--wj-checkbox-margin-inline);\n  line-height: 100%;\n  padding-left: 0px;\n}\n:host label {\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n  padding-left: 25px;\n  min-width: var(--wj-checkbox-width);\n  min-height: var(--wj-checkbox-height);\n  margin-bottom: 0;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -khtml-user-select: none; /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */\n}\n:host label:before {\n  content: "";\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 0;\n  -webkit-box-sizing: inherit;\n  box-sizing: border-box;\n  background-color: var(--wj-color-contrast-lowest);\n  border: 1px solid var(--wj-border-color);\n}\n.native-checkbox label {\n  transition: border 140ms linear 0s, color 140ms linear 0s, background-color 140ms linear 0s;\n}\n.native-checkbox label:hover {\n  color: var(--wj-color-contrast-higher);\n}\n.native-checkbox label:before {\n  border-radius: 3px;\n  transition: border 140ms linear 0s, color 140ms linear 0s, background-color 140ms linear 0s;\n}\n.native-checkbox input[type=checkbox] {\n  position: absolute;\n  margin: 0;\n  z-index: -1;\n  width: 16px;\n  height: 16px;\n  opacity: 0;\n  display: none;\n}\n.native-checkbox input[type=checkbox] + label::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  border-right: 0 solid transparent;\n  border-bottom: 0 solid transparent;\n  width: 16px;\n  height: 16px;\n  overflow: hidden;\n}\n.native-checkbox.checkbox-circle label:after {\n  border-radius: 99px;\n}\n.native-checkbox.checkbox-circle label:before {\n  border-radius: 99px;\n}\n.native-checkbox input[type=checkbox]:checked + label::after {\n  content: "";\n  background: var(--wj-grey-check-icon);\n  background-size: 160px 16px;\n  background-repeat: no-repeat;\n  animation-name: checkbox-check;\n  animation-duration: 320ms;\n  animation-timing-function: steps(9);\n  animation-fill-mode: forwards;\n  animation-iteration-count: 1;\n}\n.native-checkbox input[type=checkbox]:hover:active:not(:checked) + label:before {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.native-checkbox input[type=checkbox]:focus + label {\n  color: var(--wj-color-contrast-higher);\n}\n.native-checkbox input[type=checkbox]:focus + label:before {\n  outline: none !important;\n  box-shadow: 0 0 0 0px #78c8fe;\n}\n.native-checkbox input[type=checkbox][disabled] + label {\n  cursor: not-allowed !important;\n  color: var(--wj-color-contrast-high);\n  opacity: 0.58;\n}\n.native-checkbox input[type=checkbox][disabled] + label:before {\n  cursor: not-allowed !important;\n  background: #ececec;\n}\n.native-checkbox input[type=checkbox]:indeterminate + label:after {\n  background: none;\n  background-color: var(--wj-color-contrast-high);\n  width: 10px;\n  height: 2px;\n  top: 6px;\n  margin: 3px;\n  border-radius: 2px;\n}\n.native-checkbox.right label {\n  padding-left: 0;\n  padding-right: 26px;\n}\n.native-checkbox.right label:before {\n  right: 0;\n  left: auto;\n}\n.native-checkbox.right input[type=checkbox]:checked + label {\n  position: relative;\n}\n.native-checkbox.right input[type=checkbox]:checked + label::after {\n  position: absolute;\n  right: 0px;\n  left: auto;\n}\n.success input[type=checkbox]:checked + label:before, .success input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-success);\n  background-color: var(--wj-color-success);\n}\n.primary input[type=checkbox]:checked + label:before, .primary input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-primary);\n  background-color: var(--wj-color-primary);\n}\n.complete input[type=checkbox]:checked + label:before, .complete input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-complete);\n  background-color: var(--wj-color-complete);\n}\n.warning input[type=checkbox]:checked + label:before, .warning input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-warning);\n  background-color: var(--wj-color-warning);\n}\n.danger input[type=checkbox]:checked + label:before, .danger input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-danger);\n  background-color: var(--wj-color-danger);\n}\n.info input[type=checkbox]:checked + label:before, .info input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-info);\n  background-color: var(--wj-color-info);\n}\n.info input[type=checkbox]:checked + label::after, .danger input[type=checkbox]:checked + label::after, .complete input[type=checkbox]:checked + label::after, .primary input[type=checkbox]:checked + label::after, .success input[type=checkbox]:checked + label::after {\n  background: var(--wj-white-check-icon);\n}\n.info input[type=checkbox]:indeterminate + label::after, .danger input[type=checkbox]:indeterminate + label::after, .complete input[type=checkbox]:indeterminate + label::after, .primary input[type=checkbox]:indeterminate + label::after, .success input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--wj-color-contrast-lowest);\n}\n@keyframes shrink-bounce {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes checkbox-check {\n  0% {\n    background-position: 0;\n  }\n  100% {\n    background-position: -144px;\n  }\n}\n/* hide focus style if not from keyboard navigation */\n.js-focus-visible .native-checkbox input[type=checkbox]:focus:not(.focus-visible) + label:before {\n  box-shadow: none;\n}\ninput[type=checkbox] {\n  accent-color: var(--wj-color-primary) !important;\n  font-size: 50px;\n}';
 class Checkbox extends WJElement {
   constructor() {

package/dist/wj-chip.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* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ WJ Chip ]\n*/\n:host {\n  --wj-chip-border-radius: 100px;\n  --wj-chip-background: var();\n  --wj-chip-color: #4b4b4b;\n  --wj-chip-margin: 0;\n  --wj-card-background: var(--wj-color-contrast-2);\n  --wj-card-color: var(--wj-color);\n  margin: var(--wj-chip-margin);\n}\n:host(.wj-color-primary) {\n  --wj-card-background: var(--wj-color-primary);\n}\n:host(.wj-color-complete) {\n  --wj-card-background: var(--wj-color-complete);\n}\n:host(.wj-color-success) {\n  --wj-card-background: var(--wj-color-success);\n}\n:host(.wj-color-warning) {\n  --wj-card-background: var(--wj-color-warning);\n}\n:host(.wj-color-danger) {\n  --wj-card-background: var(--wj-color-danger);\n}\n:host(.wj-color-info) {\n  --wj-card-background: var(--wj-color-info);\n}\n:host(.wj-color-menu) {\n  --wj-card-background: var(--wj-color-menu);\n}\n:host(.wj-color-primary) {\n  --wj-card-color: var(--wj-color-white);\n}\n:host(.wj-color-complete) {\n  --wj-card-color: var(--wj-color-white);\n}\n:host(.wj-color-success) {\n  --wj-card-color: var(--wj-color-white);\n}\n:host(.wj-color-warning) {\n  --wj-card-color: var(--wj-color);\n}\n:host(.wj-color-danger) {\n  --wj-card-color: var(--wj-color-white);\n}\n:host(.wj-color-info) {\n  --wj-card-color: var(--wj-color-white);\n}\n:host(.wj-color-menu) {\n  --wj-card-color: var(--wj-color-white) !important;\n}\n.native-chip {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  letter-spacing: -0.006em;\n  margin: 0;\n  padding: 0.5rem 0.75rem;\n  text-align: center;\n  cursor: pointer;\n  white-space: nowrap;\n  background: var(--wj-chip-background);\n  color: var(--wj-chip-color);\n  text-shadow: none;\n  box-shadow: none;\n  border: 0 none;\n  line-height: 14px;\n  min-height: 28px;\n  height: 28px;\n  width: 100%;\n  max-width: fit-content;\n  min-width: 28px;\n  position: relative;\n  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  border-radius: var(--wj-chip-border-radius);\n  overflow: hidden;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n:host(.focus) {\n  box-shadow: none;\n}\n:host(:hover:not(.wj-active)) .native-chip {\n  background: var(--wj-color-contrast-3);\n  color: var(--wj-color);\n}\n:host(.wj-active) .native-chip {\n  border: 1px solid rgba(33, 33, 33, 0.2);\n}\n:host(:focus, :active:focus, .wj-active:focus) {\n  outline: none !important;\n  box-shadow: 0 0 0 0px #78c8fe;\n}\n.check {\n  display: none;\n}\n:host([active]) .check {\n  display: block;\n  margin-inline: 4px 0;\n}\n:host(.wj-disabled) {\n  background: #f4f4f4;\n  color: #757575;\n  border: 0;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n::slotted(wj-avatar) {\n  width: 22px;\n  height: 22px;\n}\n::slotted(wj-avatar:first-child) {\n  margin-inline: -8px 8px;\n  margin-top: -4px;\n  margin-bottom: -4px;\n}\n:host .native-chip {\n  background-color: var(--wj-card-background, #fff);\n  color: var(--wj-card-color);\n}\n::slotted(wj-icon:first-child) {\n  margin: -4px 8px -4px -4px;\n}\n::slotted(wj-icon:last-child) {\n  margin: -4px -4px -4px 8px;\n}\nwj-button {\n  --wj-button-border-radius: 50%;\n  --wj-button-margin-inline: .25rem -.5rem;\n  --wj-padding-top: .15rem;\n  --wj-padding-start: .15rem;\n  --wj-padding-end: .15rem;\n  --wj-padding-bottom: .15rem;\n}";
 class Chip extends WJElement {
   constructor() {

package/dist/wj-col.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 Col ]\n*/\n:host {\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  padding-right: calc(var(--wj-gutter-x) * 0.5);\n  padding-left: calc(var(--wj-gutter-x) * 0.5);\n  margin-top: var(--wj-gutter-y);\n}\n:host(.wj-col) {\n  flex: 1 0 0%;\n}\n:host(.wj-row-cols-auto) > * {\n  flex: 0 0 auto;\n  width: auto;\n}\n:host(.wj-row-cols-1) > * {\n  flex: 0 0 auto;\n  width: 100%;\n}\n:host(.wj-row-cols-2) > * {\n  flex: 0 0 auto;\n  width: 50%;\n}\n:host(.wj-row-cols-3) > * {\n  flex: 0 0 auto;\n  width: 33.3333333333%;\n}\n:host(.wj-row-cols-4) > * {\n  flex: 0 0 auto;\n  width: 25%;\n}\n:host(.wj-row-cols-5) > * {\n  flex: 0 0 auto;\n  width: 20%;\n}\n:host(.wj-row-cols-6) > * {\n  flex: 0 0 auto;\n  width: 16.6666666667%;\n}\n@media (min-width: 576px) {\n  :host(.wj-col-sm) {\n    flex: 1 0 0%;\n  }\n  :host(.wj-row-cols-sm-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-row-cols-sm-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-row-cols-sm-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-row-cols-sm-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wj-row-cols-sm-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-row-cols-sm-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wj-row-cols-sm-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 768px) {\n  :host(.wj-col-md) {\n    flex: 1 0 0%;\n  }\n  :host(.wj-row-cols-md-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-row-cols-md-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-row-cols-md-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-row-cols-md-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wj-row-cols-md-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-row-cols-md-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wj-row-cols-md-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 992px) {\n  :host(.wj-col-lg) {\n    flex: 1 0 0%;\n  }\n  :host(.wj-row-cols-lg-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-row-cols-lg-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-row-cols-lg-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-row-cols-lg-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wj-row-cols-lg-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-row-cols-lg-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wj-row-cols-lg-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.wj-col-xl) {\n    flex: 1 0 0%;\n  }\n  :host(.wj-row-cols-xl-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-row-cols-xl-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-row-cols-xl-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-row-cols-xl-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wj-row-cols-xl-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-row-cols-xl-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wj-row-cols-xl-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.wj-col-xxl) {\n    flex: 1 0 0%;\n  }\n  :host(.wj-row-cols-xxl-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-row-cols-xxl-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-row-cols-xxl-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-row-cols-xxl-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wj-row-cols-xxl-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-row-cols-xxl-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wj-row-cols-xxl-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n:host(.wj-col-auto) {\n  flex: 0 0 auto;\n  width: auto;\n}\n:host(.wj-col-1) {\n  flex: 0 0 auto;\n  width: 8.33333333%;\n}\n:host(.wj-col-2) {\n  flex: 0 0 auto;\n  width: 16.66666667%;\n}\n:host(.wj-col-3) {\n  flex: 0 0 auto;\n  width: 25%;\n}\n:host(.wj-col-4) {\n  flex: 0 0 auto;\n  width: 33.33333333%;\n}\n:host(.wj-col-5) {\n  flex: 0 0 auto;\n  width: 41.66666667%;\n}\n:host(.wj-col-6) {\n  flex: 0 0 auto;\n  width: 50%;\n}\n:host(.wj-col-7) {\n  flex: 0 0 auto;\n  width: 58.33333333%;\n}\n:host(.wj-col-8) {\n  flex: 0 0 auto;\n  width: 66.66666667%;\n}\n:host(.wj-col-9) {\n  flex: 0 0 auto;\n  width: 75%;\n}\n:host(.wj-col-10) {\n  flex: 0 0 auto;\n  width: 83.33333333%;\n}\n:host(.wj-col-11) {\n  flex: 0 0 auto;\n  width: 91.66666667%;\n}\n:host(.wj-col-12) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n:host(.wj-offset-1) {\n  margin-left: 8.33333333%;\n}\n:host(.wj-offset-2) {\n  margin-left: 16.66666667%;\n}\n:host(.wj-offset-3) {\n  margin-left: 25%;\n}\n:host(.wj-offset-4) {\n  margin-left: 33.33333333%;\n}\n:host(.wj-offset-5) {\n  margin-left: 41.66666667%;\n}\n:host(.wj-offset-6) {\n  margin-left: 50%;\n}\n:host(.wj-offset-7) {\n  margin-left: 58.33333333%;\n}\n:host(.wj-offset-8) {\n  margin-left: 66.66666667%;\n}\n:host(.wj-offset-9) {\n  margin-left: 75%;\n}\n:host(.wj-offset-10) {\n  margin-left: 83.33333333%;\n}\n:host(.wj-offset-11) {\n  margin-left: 91.66666667%;\n}\n.g-0,\n.gx-0 {\n  --wj-gutter-x: 0;\n}\n.g-0,\n.gy-0 {\n  --wj-gutter-y: 0;\n}\n.g-1,\n.gx-1 {\n  --wj-gutter-x: 0.25rem;\n}\n.g-1,\n.gy-1 {\n  --wj-gutter-y: 0.25rem;\n}\n.g-2,\n.gx-2 {\n  --wj-gutter-x: 0.5rem;\n}\n.g-2,\n.gy-2 {\n  --wj-gutter-y: 0.5rem;\n}\n.g-3,\n.gx-3 {\n  --wj-gutter-x: 1rem;\n}\n.g-3,\n.gy-3 {\n  --wj-gutter-y: 1rem;\n}\n.g-4,\n.gx-4 {\n  --wj-gutter-x: 1.5rem;\n}\n.g-4,\n.gy-4 {\n  --wj-gutter-y: 1.5rem;\n}\n.g-5,\n.gx-5 {\n  --wj-gutter-x: 3rem;\n}\n.g-5,\n.gy-5 {\n  --wj-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  :host(.wj-col-sm-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-col-sm-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wj-col-sm-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wj-col-sm-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-col-sm-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wj-col-sm-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wj-col-sm-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-col-sm-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wj-col-sm-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wj-col-sm-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wj-col-sm-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wj-col-sm-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wj-col-sm-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-offset-sm-0) {\n    margin-left: 0;\n  }\n  :host(.wj-offset-sm-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wj-offset-sm-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wj-offset-sm-3) {\n    margin-left: 25%;\n  }\n  :host(.wj-offset-sm-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wj-offset-sm-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wj-offset-sm-6) {\n    margin-left: 50%;\n  }\n  :host(.wj-offset-sm-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wj-offset-sm-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wj-offset-sm-9) {\n    margin-left: 75%;\n  }\n  :host(.wj-offset-sm-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wj-offset-sm-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-sm-0,\n  .gx-sm-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-sm-0,\n  .gy-sm-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-sm-1,\n  .gx-sm-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-sm-1,\n  .gy-sm-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-sm-2,\n  .gx-sm-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-sm-2,\n  .gy-sm-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-sm-3,\n  .gx-sm-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-sm-3,\n  .gy-sm-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-sm-4,\n  .gx-sm-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-sm-4,\n  .gy-sm-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-sm-5,\n  .gx-sm-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-sm-5,\n  .gy-sm-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  :host(.wj-col-md-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-col-md-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wj-col-md-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wj-col-md-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-col-md-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wj-col-md-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wj-col-md-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-col-md-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wj-col-md-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wj-col-md-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wj-col-md-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wj-col-md-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wj-col-md-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-offset-md-0) {\n    margin-left: 0;\n  }\n  :host(.wj-offset-md-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wj-offset-md-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wj-offset-md-3) {\n    margin-left: 25%;\n  }\n  :host(.wj-offset-md-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wj-offset-md-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wj-offset-md-6) {\n    margin-left: 50%;\n  }\n  :host(.wj-offset-md-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wj-offset-md-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wj-offset-md-9) {\n    margin-left: 75%;\n  }\n  :host(.wj-offset-md-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wj-offset-md-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-md-0,\n  .gx-md-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-md-0,\n  .gy-md-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-md-1,\n  .gx-md-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-md-1,\n  .gy-md-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-md-2,\n  .gx-md-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-md-2,\n  .gy-md-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-md-3,\n  .gx-md-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-md-3,\n  .gy-md-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-md-4,\n  .gx-md-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-md-4,\n  .gy-md-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-md-5,\n  .gx-md-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-md-5,\n  .gy-md-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  :host(.wj-col-lg-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-col-lg-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wj-col-lg-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wj-col-lg-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-col-lg-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wj-col-lg-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wj-col-lg-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-col-lg-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wj-col-lg-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wj-col-lg-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wj-col-lg-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wj-col-lg-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wj-col-lg-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-offset-lg-0) {\n    margin-left: 0;\n  }\n  :host(.wj-offset-lg-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wj-offset-lg-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wj-offset-lg-3) {\n    margin-left: 25%;\n  }\n  :host(.wj-offset-lg-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wj-offset-lg-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wj-offset-lg-6) {\n    margin-left: 50%;\n  }\n  :host(.wj-offset-lg-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wj-offset-lg-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wj-offset-lg-9) {\n    margin-left: 75%;\n  }\n  :host(.wj-offset-lg-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wj-offset-lg-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-lg-0,\n  .gx-lg-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-lg-0,\n  .gy-lg-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-lg-1,\n  .gx-lg-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-lg-1,\n  .gy-lg-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-lg-2,\n  .gx-lg-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-lg-2,\n  .gy-lg-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-lg-3,\n  .gx-lg-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-lg-3,\n  .gy-lg-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-lg-4,\n  .gx-lg-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-lg-4,\n  .gy-lg-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-lg-5,\n  .gx-lg-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-lg-5,\n  .gy-lg-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.wj-col-xl-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-col-xl-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wj-col-xl-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wj-col-xl-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-col-xl-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wj-col-xl-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wj-col-xl-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-col-xl-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wj-col-xl-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wj-col-xl-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wj-col-xl-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wj-col-xl-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wj-col-xl-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-offset-xl-0) {\n    margin-left: 0;\n  }\n  :host(.wj-offset-xl-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wj-offset-xl-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wj-offset-xl-3) {\n    margin-left: 25%;\n  }\n  :host(.wj-offset-xl-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wj-offset-xl-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wj-offset-xl-6) {\n    margin-left: 50%;\n  }\n  :host(.wj-offset-xl-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wj-offset-xl-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wj-offset-xl-9) {\n    margin-left: 75%;\n  }\n  :host(.wj-offset-xl-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wj-offset-xl-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-xl-0,\n  .gx-xl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xl-0,\n  .gy-xl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xl-1,\n  .gx-xl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xl-1,\n  .gy-xl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xl-2,\n  .gx-xl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xl-2,\n  .gy-xl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xl-3,\n  .gx-xl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xl-3,\n  .gy-xl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xl-4,\n  .gx-xl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xl-4,\n  .gy-xl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xl-5,\n  .gx-xl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xl-5,\n  .gy-xl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.wj-col-xxl-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wj-col-xxl-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wj-col-xxl-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wj-col-xxl-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wj-col-xxl-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wj-col-xxl-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wj-col-xxl-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wj-col-xxl-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wj-col-xxl-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wj-col-xxl-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wj-col-xxl-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wj-col-xxl-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wj-col-xxl-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wj-offset-xxl-0) {\n    margin-left: 0;\n  }\n  :host(.wj-offset-xxl-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wj-offset-xxl-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wj-offset-xxl-3) {\n    margin-left: 25%;\n  }\n  :host(.wj-offset-xxl-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wj-offset-xxl-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wj-offset-xxl-6) {\n    margin-left: 50%;\n  }\n  :host(.wj-offset-xxl-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wj-offset-xxl-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wj-offset-xxl-9) {\n    margin-left: 75%;\n  }\n  :host(.wj-offset-xxl-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wj-offset-xxl-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-xxl-0,\n  .gx-xxl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xxl-0,\n  .gy-xxl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xxl-1,\n  .gx-xxl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xxl-1,\n  .gy-xxl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xxl-2,\n  .gx-xxl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xxl-2,\n  .gy-xxl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xxl-3,\n  .gx-xxl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xxl-3,\n  .gy-xxl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xxl-4,\n  .gx-xxl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xxl-4,\n  .gy-xxl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xxl-5,\n  .gx-xxl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xxl-5,\n  .gy-xxl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n:host(.order-first) {\n  order: -1 !important;\n}\n:host(.order-0) {\n  order: 0 !important;\n}\n:host(.order-1) {\n  order: 1 !important;\n}\n:host(.order-2) {\n  order: 2 !important;\n}\n:host(.order-3) {\n  order: 3 !important;\n}\n:host(.order-4) {\n  order: 4 !important;\n}\n:host(.order-5) {\n  order: 5 !important;\n}\n:host(.order-last) {\n  order: 6 !important;\n}\n:host(.order-sm-first) {\n  order: -1 !important;\n}\n:host(.order-sm-0) {\n  order: 0 !important;\n}\n:host(.order-sm-1) {\n  order: 1 !important;\n}\n:host(.order-sm-2) {\n  order: 2 !important;\n}\n:host(.order-sm-3) {\n  order: 3 !important;\n}\n:host(.order-sm-4) {\n  order: 4 !important;\n}\n:host(.order-sm-5) {\n  order: 5 !important;\n}\n:host(.order-sm-last) {\n  order: 6 !important;\n}\n:host(.order-md-first) {\n  order: -1 !important;\n}\n:host(.order-md-0) {\n  order: 0 !important;\n}\n:host(.order-md-1) {\n  order: 1 !important;\n}\n:host(.order-md-2) {\n  order: 2 !important;\n}\n:host(.order-md-3) {\n  order: 3 !important;\n}\n:host(.order-md-4) {\n  order: 4 !important;\n}\n:host(.order-md-5) {\n  order: 5 !important;\n}\n:host(.order-md-last) {\n  order: 6 !important;\n}\n:host(.order-lg-first) {\n  order: -1 !important;\n}\n:host(.order-lg-0) {\n  order: 0 !important;\n}\n:host(.order-lg-1) {\n  order: 1 !important;\n}\n:host(.order-lg-2) {\n  order: 2 !important;\n}\n:host(.order-lg-3) {\n  order: 3 !important;\n}\n:host(.order-lg-4) {\n  order: 4 !important;\n}\n:host(.order-lg-5) {\n  order: 5 !important;\n}\n:host(.order-lg-last) {\n  order: 6 !important;\n}\n:host(.order-xl-first) {\n  order: -1 !important;\n}\n:host(.order-xl-0) {\n  order: 0 !important;\n}\n:host(.order-xl-1) {\n  order: 1 !important;\n}\n:host(.order-xl-2) {\n  order: 2 !important;\n}\n:host(.order-xl-3) {\n  order: 3 !important;\n}\n:host(.order-xl-4) {\n  order: 4 !important;\n}\n:host(.order-xl-5) {\n  order: 5 !important;\n}\n:host(.order-xl-last) {\n  order: 6 !important;\n}\n:host(.order-xxl-first) {\n  order: -1 !important;\n}\n:host(.order-xxl-0) {\n  order: 0 !important;\n}\n:host(.order-xxl-1) {\n  order: 1 !important;\n}\n:host(.order-xxl-2) {\n  order: 2 !important;\n}\n:host(.order-xxl-3) {\n  order: 3 !important;\n}\n:host(.order-xxl-4) {\n  order: 4 !important;\n}\n:host(.order-xxl-5) {\n  order: 5 !important;\n}\n:host(.order-xxl-last) {\n  order: 6 !important;\n}";
 class Col extends WJElement {
   constructor() {

package/dist/wj-color-picker.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wj-element.js";
-import "./wj-store.js";
 function _typeof(obj) {
   "@babel/helpers - typeof";
   return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj2) {

package/dist/wj-container.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 Container ]\n*/\n:host {\n  --wj-container-indent: 0;\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  flex-basis: auto;\n  box-sizing: border-box;\n  min-width: 0;\n}\n\n:host([vertical]) {\n  flex-direction: column;\n}\n\n@media (min-width: 768px) {\n  :host([indent]) {\n    margin-left: var(--wj-container-indent);\n  }\n}";
 class Container extends WJElement {
   constructor() {

package/dist/wj-copy-button.js

@@ -6,7 +6,6 @@ var __publicField = (obj, key, value) => {
 };
 import WJElement, { event } from "./wj-element.js";
 import { Input } from "./wj-input.js";
-import "./wj-store.js";
 function createNode(text) {
   const node = document.createElement("pre");
   node.style.width = "1px";

package/dist/wj-dialog.js

@@ -7,7 +7,6 @@ var __publicField = (obj, key, value) => {
 import WJElement, { WjElementUtils } from "./wj-element.js";
 import "./wj-button.js";
 import "./wj-icon.js";
-import "./wj-store.js";
 const styles = '/*\n[ WJ Dialog ]\n*/\n:host {\n  --wj-dialog-width: 600px;\n  --wj-dialog-height: 600px;\n  --wj-dialog-border-radius: var(--wj-border-radius-large);\n  --wj-dialog-border-width: var(--wj-border-width);\n  --wj-dialog-border-style: var(--wj-border-style);\n  --wj-dialog-border-color: var(--wj-border-color);\n  --wj-dialog-margin-top: auto;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: auto;\n}\n:host .close {\n  margin-left: auto;\n}\n:host .modal-content {\n  border-radius: 3px;\n  box-shadow: none;\n}\n:host .dialog-header {\n  position: relative;\n  border-bottom: 0;\n  padding-inline: var(--wj-dialog-padding, 1rem);\n  padding-top: var(--wj-dialog-padding, 1rem);\n  padding-bottom: var(--wj-dialog-padding, 0);\n  display: flex;\n  align-items: center;\n}\n:host .dialog-header span {\n  font-family: var(--wj-font-family-secondary);\n  font-size: 10.5px;\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n}\n:host .dialog-content {\n  box-shadow: none;\n  padding-inline: var(--wj-dialog-padding, 1rem);\n  white-space: normal;\n  z-index: 1;\n}\n:host .dialog-footer {\n  display: flex;\n  justify-content: end;\n  border-top: none;\n  box-shadow: none;\n  margin-top: 0;\n  padding-inline: var(--wj-dialog-padding-inline, 1rem);\n  padding-top: var(--wj-dialog-padding-top, 1rem);\n  padding-bottom: var(--wj-dialog-padding-bottom, 1rem);\n}\n\ndialog::backdrop {\n  opacity: var(--wj-backdrop-opacity);\n  background-color: var(--wj-backdrop);\n}\n\n:host(.separator) .dialog-header:after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  left: var(--wj-dialog-padding, 1rem);\n  right: var(--wj-dialog-padding, 1rem);\n  position: absolute;\n  bottom: 0;\n}\n\n:host dialog {\n  box-sizing: border-box;\n  transition: all 0.2s !important;\n  width: var(--wj-dialog-width);\n  height: var(--wj-dialog-height);\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n  border-radius: var(--wj-dialog-border-radius);\n  border-width: var(--wj-dialog-border-width);\n  border-style: var(--wj-dialog-border-style);\n  border-color: var(--wj-dialog-border-color);\n  margin-top: var(--wj-dialog-margin-top);\n  margin-bottom: var(--wj-dialog-margin-bottom);\n  margin-inline: var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);\n  padding: 0;\n}\n\n:host(.stick-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 0 0 8px 8px;\n  --wj-dialog-border-width: 0 1px 1px 1px;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-translate-from: translateY(-110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 8px;\n  --wj-dialog-border-width: 1px;\n  --wj-dialog-opacity-from: 0;\n  --wj-dialog-translate-from: scale(.9);\n  --wj-dialog-translate-to: scale(1);\n}\n\n:host(.fill-in) {\n  --wj-dialog-width: 100%;\n  --wj-dialog-height: 100%;\n  --wj-dialog-border-radius: 0 0 0 0 !important;\n  --wj-dialog-border-width: 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n  --wj-dialog-translate-from: scale(.95);\n  --wj-dialog-translate-to: scale(1);\n}\n:host(.fill-in) dialog {\n  min-width: var(--wj-dialog-width);\n  min-height: var(--wj-dialog-height);\n}\n\n:host(.slide-left) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 1px 0 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-left) dialog {\n  min-height: var(--wj-dialog-height);\n  --wj-dialog-translate-from: translateX(-110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-right) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 0 0 1px;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-right) dialog {\n  min-height: var(--wj-dialog-height);\n  --wj-dialog-translate-from: translateX(110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.small) {\n  --wj-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n  --wj-dialog-width: 500px !important;\n}\n\n:host(.large) {\n  --wj-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n  --wj-dialog-width: 900px !important;\n}\n\ndialog[open] {\n  animation: show 0.5s ease normal;\n}\n\n@keyframes show {\n  from {\n    opacity: var(--wj-dialog-opacity-from, 1);\n    transform: var(--wj-dialog-translate-from);\n  }\n  to {\n    opacity: 1;\n    transform: var(--wj-dialog-translate-to);\n  }\n}';
 class Dialog extends WJElement {
   constructor() {

package/dist/wj-divider.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 Divider ]\n*/\n:host {\n  --wj-border-size: 1px;\n  --wj-divider-border-color: var(--wj-border-color);\n  --wj-divider-border-width: var(--wj-border-size, 1px);\n  --wj-divider-spacing: 0;\n}\n\n:host(:not([vertical])) {\n  display: block;\n  border-top: solid var(--wj-divider-border-width) var(--wj-divider-border-color);\n  margin: var(--wj-divider-spacing) 0;\n}\n\n:host([vertical]) {\n  display: inline-block;\n  height: 100%;\n  border-left: solid var(--wj-divider-border-width) var(--wj-divider-border-color);\n  margin: 0 var(--wj-divider-spacing);\n}";
 class Divider extends WJElement {
   constructor() {

package/dist/wj-dropdown.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 class Dropdown extends WJElement {
   constructor() {
     super();

package/dist/wj-file-upload-item.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import { L as Localizer } from "./localize-20081fd1.js";
-import "./wj-store.js";
+import { L as Localizer } from "./localize-DSOailh_.js";
 const styles = '/*\n[ WJ File Upload Item ]\n*/\n:host {\n  width: 100%;\n}\n\n.native-file-upload-item {\n  display: grid;\n  grid-template-columns: auto 1fr 1fr;\n  grid-template-rows: auto auto auto;\n  gap: 0 0.5rem;\n  grid-template-areas: "image name actions" "image size actions" "progress progress progress";\n  padding: 0.5rem;\n  border: 1px solid var(--wj-border-color);\n  border-radius: var(--wj-border-radius-medium);\n}\n\n.image {\n  grid-area: image;\n  align-items: center;\n  display: flex;\n}\n\n::slotted([slot=img]) {\n  --wj-img-border-radius: var(--wj-border-radius-medium) !important;\n}\n\n.name {\n  grid-area: name;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: bold;\n}\n\n.size {\n  grid-area: size;\n  display: flex;\n}\n\n.actions {\n  grid-area: actions;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\n.file-progress {\n  grid-area: progress;\n}\n\nwj-icon {\n  margin-right: 0.25rem;\n}\n\nwj-img {\n  margin-right: 0.25rem;\n}\n\n.file-info > span {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nwj-slider {\n  flex-basis: 100%;\n  margin-top: 0.5rem;\n}\n\n::part(slider)::-webkit-slider-thumb {\n  visibility: hidden;\n}\n::part(slider)::-moz-range-thumb {\n  visibility: hidden;\n}\n::part(slider)::-ms-thumb {\n  visibility: hidden;\n}\n\nwj-img {\n  width: 50px;\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0.25rem;\n  border: 1px solid var(--wj-border-color);\n  border-radius: var(--wj-border-radius-medium);\n}';
 class FileUploadItem extends WJElement {
   constructor() {

package/dist/wj-file-upload.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import { L as Localizer } from "./localize-20081fd1.js";
-import "./wj-store.js";
+import { L as Localizer } from "./localize-DSOailh_.js";
 function fileType() {
   return [
     {

package/dist/wj-footer.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 Footer ]\n*/\n:host {\n  --wj-footer-height: 60px;\n  padding: 0 20px;\n  flex-shrink: 0;\n  height: var(--wj-footer-height);\n  display: block;\n}";
 class Footer extends WJElement {
   constructor() {

package/dist/wj-form.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 Form ]\n*/\n:host {\n  width: 100%;\n}";
 class Form extends WJElement {
   constructor() {

package/dist/wj-format-digital.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import { L as Localizer } from "./localize-20081fd1.js";
-import "./wj-store.js";
+import { L as Localizer } from "./localize-DSOailh_.js";
 const styles = "/*\n[ WJ Format Digital ]\n*/\n.native-format-digital {\n  white-space: nowrap;\n}";
 class FormatDigital extends WJElement {
   constructor() {

package/dist/wj-grid.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[ Grid ]\n*/\n:host {\n  width: 100%;\n  flex-grow: 0;\n}\n/*\n[ Row ]\n*/\nwj-row {\n  display: flex;\n  flex-wrap: wrap;\n}\nwj-row {\n  --wj-gutter-x: 1.5rem;\n  --wj-gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: calc(var(--wj-gutter-y) * -1);\n  margin-right: calc(var(--wj-gutter-x) * -0.5);\n  margin-left: calc(var(--wj-gutter-x) * -0.5);\n}\n.g-0,\n.gx-0 {\n  --wj-gutter-x: 0;\n}\n.g-0,\n.gy-0 {\n  --wj-gutter-y: 0;\n}\n.g-1,\n.gx-1 {\n  --wj-gutter-x: 0.25rem;\n}\n.g-1,\n.gy-1 {\n  --wj-gutter-y: 0.25rem;\n}\n.g-2,\n.gx-2 {\n  --wj-gutter-x: 0.5rem;\n}\n.g-2,\n.gy-2 {\n  --wj-gutter-y: 0.5rem;\n}\n.g-3,\n.gx-3 {\n  --wj-gutter-x: 1rem;\n}\n.g-3,\n.gy-3 {\n  --wj-gutter-y: 1rem;\n}\n.g-4,\n.gx-4 {\n  --wj-gutter-x: 1.5rem;\n}\n.g-4,\n.gy-4 {\n  --wj-gutter-y: 1.5rem;\n}\n.g-5,\n.gx-5 {\n  --wj-gutter-x: 3rem;\n}\n.g-5,\n.gy-5 {\n  --wj-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  .g-sm-0,\n  .gx-sm-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-sm-0,\n  .gy-sm-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-sm-1,\n  .gx-sm-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-sm-1,\n  .gy-sm-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-sm-2,\n  .gx-sm-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-sm-2,\n  .gy-sm-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-sm-3,\n  .gx-sm-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-sm-3,\n  .gy-sm-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-sm-4,\n  .gx-sm-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-sm-4,\n  .gy-sm-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-sm-5,\n  .gx-sm-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-sm-5,\n  .gy-sm-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  .g-md-0,\n  .gx-md-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-md-0,\n  .gy-md-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-md-1,\n  .gx-md-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-md-1,\n  .gy-md-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-md-2,\n  .gx-md-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-md-2,\n  .gy-md-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-md-3,\n  .gx-md-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-md-3,\n  .gy-md-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-md-4,\n  .gx-md-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-md-4,\n  .gy-md-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-md-5,\n  .gx-md-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-md-5,\n  .gy-md-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  .g-lg-0,\n  .gx-lg-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-lg-0,\n  .gy-lg-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-lg-1,\n  .gx-lg-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-lg-1,\n  .gy-lg-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-lg-2,\n  .gx-lg-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-lg-2,\n  .gy-lg-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-lg-3,\n  .gx-lg-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-lg-3,\n  .gy-lg-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-lg-4,\n  .gx-lg-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-lg-4,\n  .gy-lg-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-lg-5,\n  .gx-lg-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-lg-5,\n  .gy-lg-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  .g-xl-0,\n  .gx-xl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xl-0,\n  .gy-xl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xl-1,\n  .gx-xl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xl-1,\n  .gy-xl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xl-2,\n  .gx-xl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xl-2,\n  .gy-xl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xl-3,\n  .gx-xl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xl-3,\n  .gy-xl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xl-4,\n  .gx-xl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xl-4,\n  .gy-xl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xl-5,\n  .gx-xl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xl-5,\n  .gy-xl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  .g-xxl-0,\n  .gx-xxl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xxl-0,\n  .gy-xxl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xxl-1,\n  .gx-xxl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xxl-1,\n  .gy-xxl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xxl-2,\n  .gx-xxl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xxl-2,\n  .gy-xxl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xxl-3,\n  .gx-xxl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xxl-3,\n  .gy-xxl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xxl-4,\n  .gx-xxl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xxl-4,\n  .gy-xxl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xxl-5,\n  .gx-xxl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xxl-5,\n  .gy-xxl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}";
 class Grid extends WJElement {
   constructor() {

package/dist/wj-header.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 Header ]\n*/\n:host {\n  --wj-header-background: var(--wj-background);\n  --wj-header-border-color: var(--wj-border-color);\n  --wj-header-border-width: 0 0 1px 0;\n  --wj-header-border-style: solid;\n  --wj-header-top: 0;\n  --wj-header-height: 60px;\n  display: block;\n  height: var(--wj-header-height);\n  width: 100%;\n  background: var(--wj-header-background);\n  border-width: var(--wj-header-border-width);\n  border-style: var(--wj-header-border-style);\n  border-color: var(--wj-header-border-color);\n}\n:host .native-header {\n  display: flex;\n  padding-inline: 1rem;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--wj-header-top);\n  z-index: 999;\n}";
 class Header extends WJElement {
   constructor() {

package/dist/wj-icon-picker.js

@@ -7,7 +7,6 @@ var __publicField = (obj, key, value) => {
 import WJElement, { event } from "./wj-element.js";
 import { InfiniteScroll } from "./wj-infinite-scroll.js";
 import "./wj-tooltip.js";
-import "./wj-store.js";
 const styles = "/*\n[ Wj Icon Picker ]\n*/\n:host {\n  --wj-icon-picker-radius: var(--wj-border-radius-small);\n  --wj-icon-picker-icon-size: 1.5rem;\n  --wj-icon-picker-border-width: 1px;\n  --wj-icon-picker-border-style: solid;\n  --wj-icon-picker-border-color: var(--wj-border-color);\n  --wj-icon-picker-padding: .25rem;\n  padding: 0 1rem;\n}\n\n.anchor {\n  width: var(--wj-icon-picker-icon-size);\n  height: var(--wj-icon-picker-icon-size);\n  padding: var(--wj-icon-picker-padding);\n  border-width: var(--wj-icon-picker-border-width);\n  border-style: var(--wj-icon-picker-border-style);\n  border-color: var(--wj-icon-picker-border-color);\n  box-sizing: border-box;\n  border-radius: var(--wj-icon-picker-radius);\n}\n\n.picker {\n  width: 320px;\n  height: 271px;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1);\n  border-radius: var(--wj-icon-picker-radius);\n  border-width: var(--wj-icon-picker-border-width);\n  border-style: var(--wj-icon-picker-border-style);\n  border-color: var(--wj-icon-picker-border-color);\n  overflow: auto;\n  padding: 1rem;\n  background: var(--wj-background);\n}\n\n.icon-items {\n  --icon-min-width: 2rem;\n  display: grid;\n  grid-gap: 0.5rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--icon-min-width), 1fr));\n}\n\n.icon-item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: inherit;\n  padding: 0.25rem;\n  min-height: var(--wj-icon-picker-icon-size);\n  min-width: var(--wj-icon-picker-icon-size);\n  text-decoration: none;\n}\n.icon-item:hover {\n  border-radius: 0.25rem;\n  background: var(--wj-border-color);\n}\n\n.wj-size {\n  --wj-icon-size: 24px !important;\n}\n\nicon-item svg {\n  width: var(--wj-icon-picker-icon-size);\n  height: var(--wj-icon-picker-icon-size);\n}\n\nwj-input {\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: 0;\n}\n\nwj-infinite-scroll {\n  margin-top: 1rem;\n}\n\nwj-select {\n  --wj-select-border-width: 0 0 1px 0 !important;\n  --wj-select-border-radius: 0 !important;\n  margin-bottom: 1rem;\n}\n\n.anchor wj-icon {\n  --wj-icon-size: 100% !important;\n}";
 class IconPicker extends WJElement {
   constructor() {

package/dist/wj-icon.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const iconContent = /* @__PURE__ */ new Map();
 const requests = /* @__PURE__ */ new Map();
 let parser;
@@ -114,6 +113,7 @@ const getNamedUrl = (iconName) => {
   let parsedUrl = new URL(import.meta.url);
   let pathName = parsedUrl.pathname;
   let folderPath = pathName.substring(0, pathName.lastIndexOf("/"));
+  console.log(folderPath, parsedUrl, pathName, parsedUrl.origin + folderPath + path);
   return new URL(parsedUrl.origin + folderPath + path).href;
 };
 const styles = "/*\n[ WJ Icon ]\n*/\n:host(.wj-color-primary) {\n  --wj-icon-color: var(--wj-color-primary);\n}\n\n:host(.wj-color-complete) {\n  --wj-icon-color: var(--wj-color-complete);\n}\n\n:host(.wj-color-success) {\n  --wj-icon-color: var(--wj-color-success);\n}\n\n:host(.wj-color-warning) {\n  --wj-icon-color: var(--wj-color-warning);\n}\n\n:host(.wj-color-danger) {\n  --wj-icon-color: var(--wj-color-danger);\n}\n\n:host(.wj-color-info) {\n  --wj-icon-color: var(--wj-color-info);\n}\n\n:host {\n  --wj-icon-size: 1rem;\n  --wj-icon-width: var(--wj-icon-size, 100%);\n  --wj-icon-height: var(--wj-icon-size, 100%);\n  display: inline-block;\n  width: var(--wj-icon-width);\n  height: var(--wj-icon-height);\n  contain: strict;\n  fill: currentColor;\n  box-sizing: content-box !important;\n}\n\n.icon-inner, svg {\n  display: block;\n  width: var(--wj-icon-width);\n  height: var(--wj-icon-height);\n}\n\n:host(.wj-size-small) {\n  --wj-icon-size: 18px;\n}\n\n:host(.wj-size-large) {\n  --wj-icon-size: 32px;\n}\n\n:host(.wj-size) {\n  font-size: var(--wj-icon-size);\n}\n\n:host(.wj-color) {\n  color: var(--wj-icon-color) !important;\n}";

package/dist/wj-img-comparer.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-img.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 Img ]\n*/\nimg {\n  display: block;\n  width: var(--wj-img-width, 100%);\n  height: var(--wj-img-height, auto);\n  max-width: 100%;\n  object-fit: inherit;\n  border-radius: var(--wj-img-border-radius, 0);\n}";
 class Img extends WJElement {
   constructor() {

package/dist/wj-infinite-scroll.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 nfinite Scroll ]\n*/\n:host {\n  --wj-infinite-scroll-width: 100%;\n  --wj-infinite-scroll-height: 300px;\n  overflow-x: auto;\n  width: var(--wj-infinite-scroll-width);\n  height: var(--wj-infinite-scroll-height);\n  display: block;\n}";
 class InfiniteScroll extends WJElement {
   constructor(options = {}) {

package/dist/wj-input-file.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 Input ]\n*/\n:host {\n  --wj-input-font-family: var(--wj-font-family);\n  --wj-input-background-color: var(--wj-background);\n  --wj-input-color: var(--wj-color);\n  --wj-input-color-invalid: var(--wj-color-danger);\n  --wj-input-border-color: var(--wj-border-color);\n  --wj-input-border-color-focus: var(--wj-color-primary);\n  --wj-input-border-width: 1px;\n  --wj-input-border-style: solid;\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: .5rem;\n  --wj-input-line-height: 20px;\n  --wj-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wj-input-margin-bottom);\n  display: block;\n}\n:host .wrapper {\n  display: flex;\n  width: 100%;\n}\n:host .native-input .input-wrapper {\n  width: 100%;\n  position: relative;\n}\n:host .native-input.default {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: 0;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.default .input-wrapper {\n  margin-inline: 0.5rem;\n}\n:host .native-input.default.focused {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.default.focused label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default input {\n  border: none;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  margin-top: -4px;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n}\n:host .native-input.default label {\n  margin: 0;\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.default label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default ::slotted([slot=start]) {\n  border-left: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.default ::slotted([slot=end]) {\n  border-right: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.standard {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  padding-inline: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.standard.focused input {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.standard input {\n  display: block;\n  min-height: 32px;\n  padding-inline: 0.5rem;\n  padding-top: 0;\n  padding-bottom: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n}\n:host .native-input.standard label {\n  margin: 0;\n  display: inline-block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.standard .input-wrapper:hover .clear {\n  visibility: visible;\n}\n:host .native-input.standard ::slotted([slot=start]) {\n  border-right: none;\n  border-radius: var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius);\n}\n:host .native-input.standard ::slotted([slot=end]) {\n  border-left: none;\n  border-radius: 0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0;\n}\n:host .native-input.standard.has-start input {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n:host .native-input.standard.has-end input {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n:host .native-input.standard .error-message {\n  position: static;\n  background: transparent;\n  padding: 0.25rem 0;\n  left: auto;\n  transform: none;\n  color: var(--wj-input-color-invalid);\n  font-size: 12px;\n  line-height: normal;\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\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}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wj-input-color-invalid);\n  content: "*";\n  font-family: var(--wj-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 10px;\n  top: 2px;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) .error-message {\n  display: block;\n}\n:host([invalid]) .default label {\n  opacity: 1 !important;\n  color: var(--wj-input-color-invalid) !important;\n  animation-name: shake;\n  animation-duration: 0.4s;\n  animation-iteration-count: 1;\n}\n\n::slotted([slot=start]), ::slotted([slot=end]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: var(--wj-input-slot-padding-inline);\n}\n\nslot[name=start], slot[name=end] {\n  display: flex;\n}\n\ninput {\n  background-color: var(--wj-input-background-color);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  font-family: var(--wjinput-font-family);\n  color: var(--wj-input-color);\n  appearance: none;\n  outline: 0;\n  padding: 0.25rem 0.5rem;\n  line-height: var(--wj-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: 0.25rem 0.5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%, 41% {\n    transform: translateX(-4px);\n  }\n  25%, 58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%, 100% {\n    transform: translateX(0);\n  }\n}';
 class InputFile extends WJElement {
   constructor(options = {}) {

package/dist/wj-input.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 Input ]\n*/\n:host {\n  --wj-input-font-family: var(--wj-font-family);\n  --wj-input-background-color: var(--wj-background);\n  --wj-input-color: var(--wj-color);\n  --wj-input-color-invalid: var(--wj-color-danger);\n  --wj-input-border-color: var(--wj-border-color);\n  --wj-input-border-color-focus: var(--wj-color-primary);\n  --wj-input-border-width: 1px;\n  --wj-input-border-style: solid;\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: .5rem;\n  --wj-input-line-height: 20px;\n  --wj-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wj-input-margin-bottom);\n  display: block;\n}\n:host .wrapper {\n  display: flex;\n  width: 100%;\n}\n:host .native-input .input-wrapper {\n  width: 100%;\n  position: relative;\n}\n:host .native-input.default {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: 0;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.default .input-wrapper {\n  margin-inline: 0.5rem;\n}\n:host .native-input.default.focused {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.default.focused label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default input {\n  border: none;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  margin-top: -4px;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n}\n:host .native-input.default label {\n  margin: 0;\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.default label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n:host .native-input.default ::slotted([slot=start]) {\n  border-left: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.default ::slotted([slot=end]) {\n  border-right: none;\n  border-top: none;\n  border-bottom: none;\n}\n:host .native-input.standard {\n  background-color: var(--wj-input-background-color);\n  font-family: var(--wj-input-font-family);\n  position: relative;\n  border-radius: var(--wj-input-border-radius);\n  padding-inline: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n:host .native-input.standard.focused input {\n  border-color: var(--wj-input-border-color-focus) !important;\n}\n:host .native-input.standard input {\n  display: block;\n  min-height: 32px;\n  padding-inline: 0.5rem;\n  padding-top: 0;\n  padding-bottom: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: var(--wj-input-border-radius);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n}\n:host .native-input.standard label {\n  margin: 0;\n  display: inline-block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-input-line-height);\n}\n:host .native-input.standard .input-wrapper:hover .clear {\n  visibility: visible;\n}\n:host .native-input.standard ::slotted([slot=start]) {\n  border-right: none;\n  border-radius: var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius);\n}\n:host .native-input.standard ::slotted([slot=end]) {\n  border-left: none;\n  border-radius: 0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0;\n}\n:host .native-input.standard.has-start input {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n:host .native-input.standard.has-end input {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n:host .native-input.standard .error-message {\n  position: static;\n  background: transparent;\n  padding: 0.25rem 0;\n  left: auto;\n  transform: none;\n  color: var(--wj-input-color-invalid);\n  font-size: 12px;\n  line-height: normal;\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\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}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wj-input-color-invalid);\n  content: "*";\n  font-family: var(--wj-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 10px;\n  top: 2px;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) .error-message {\n  display: block;\n}\n:host([invalid]) .default label {\n  opacity: 1 !important;\n  color: var(--wj-input-color-invalid) !important;\n  animation-name: shake;\n  animation-duration: 0.4s;\n  animation-iteration-count: 1;\n}\n\n::slotted([slot=start]), ::slotted([slot=end]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  padding-inline: var(--wj-input-slot-padding-inline);\n}\n\nslot[name=start], slot[name=end] {\n  display: flex;\n}\n\ninput {\n  background-color: var(--wj-input-background-color);\n  border-width: var(--wj-input-border-width);\n  border-style: var(--wj-input-border-style);\n  border-color: var(--wj-input-border-color);\n  font-family: var(--wjinput-font-family);\n  color: var(--wj-input-color);\n  appearance: none;\n  outline: 0;\n  padding: 0.25rem 0.5rem;\n  line-height: var(--wj-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: 0.25rem 0.5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%, 41% {\n    transform: translateX(-4px);\n  }\n  25%, 58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%, 100% {\n    transform: translateX(0);\n  }\n}';
 class Input extends WJElement {
   constructor(options = {}) {

package/dist/wj-item.js

@@ -5,11 +5,11 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const styles = '/*\n[ WJ Item ]\n*/\n:host {\n  --wj-border-width: 0 0 1px 0;\n  --wj-item-background: transparent;\n  --wj-item-background-hover: var(--wj-color-contrast-3);\n  --wj-item-padding-top: 0px;\n  --wj-item-padding-bottom: 0px;\n  --wj-item-padding-end: 0px;\n  --wj-item-padding-start: 0px;\n  --wj-item-inner-border-width: 0 0 1px 0;\n  --wj-item-inner-padding-top: 0px;\n  --wj-item-inner-padding-bottom: 0px;\n  --wj-item-inner-padding-start: 0px;\n  --wj-item-inner-padding-end: 0px;\n  --wj-item-inner-box-shadow: none;\n  --wj-item-min-height: 40px;\n  --wj-item-transition: opacity 15ms linear, background-color 15ms linear;\n  display: block;\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n  outline: none;\n  color: var(--wj-item-color);\n  text-align: initial;\n  text-decoration: none;\n  overflow: hidden;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.item-native {\n  border-radius: var(--wj-item-border-radius);\n  padding-top: var(--wj-item-padding-top);\n  padding-bottom: var(--wj-item-padding-bottom);\n  padding-inline: var(--wj-item-padding-start) var(--wj-item-padding-end);\n  margin: 0;\n  display: flex;\n  position: relative;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  min-height: var(--wj-item-min-height);\n  transition: var(--wj-item-transition);\n  outline: none;\n  background: var(--wj-item-background);\n  overflow: inherit;\n  box-sizing: border-box;\n  z-index: 1;\n  text-decoration: none;\n  color: var(--wj-item-color);\n}\n.item-native .item-inner {\n  margin: 0;\n  padding: var(--wj-item-inner-padding-top) var(--wj-item-inner-padding-end) var(--wj-item-inner-padding-bottom) var(--wj-item-inner-padding-start);\n  display: flex;\n  position: relative;\n  flex: 1 1 0;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  min-height: inherit;\n  border-width: var(--wj-border-width);\n  border-style: var(--wj-border-style);\n  border-color: var(--wj-border-color);\n  box-shadow: var(--wj-item-inner-box-shadow);\n  overflow: inherit;\n  box-sizing: border-box;\n}\n.item-native .item-inner .input-wrapper {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  text-overflow: ellipsis;\n  overflow: inherit;\n  box-sizing: border-box;\n}\n.item-native .item-bottom {\n  padding: 0 var(--wj-item-inner-padding-end) 0 var(--wj-item-padding-start);\n  display: flex;\n  justify-content: space-between;\n}\n\n@media (any-hover: hover) {\n  :host(:hover) .item-native {\n    color: var(--wj-item-color);\n  }\n  :host(:hover) .item-native :after {\n    transition: var(--wj-item-transition);\n    z-index: -1;\n    inset: 0;\n    position: absolute;\n    content: "";\n    background: var(--wj-item-background-hover);\n    opacity: 0.7;\n  }\n}\nbutton,\na {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n\n::slotted(wj-label:not([slot=end])) {\n  flex: 1 1 0;\n}';
 class Item extends WJElement {
   constructor() {
     super();
+    __publicField(this, "className", "Item");
     __publicField(this, "hostContext", (selector, el) => {
       return el.closest(selector) !== null;
     });

package/dist/wj-label.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(.wj-color-primary) {\n  --wj-color: #7252D3 !important;\n}\n:host(.wj-color-complete) {\n  --wj-color: #0072EC !important;\n}\n:host(.wj-color-success) {\n  --wj-color-base: #19AD79 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-warning) {\n  --wj-color-base: #FFd945 !important;\n  --wj-color-contrast: #4b4b4b !important;\n}\n:host(.wj-color-danger) {\n  --wj-color-base: #D83C31 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-info) {\n  --wj-color-base: #3B4752 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-menu) {\n  --wj-color-base: #2b303b !important;\n  --wj-color-contrast: #fff !important;\n}\n:host {\n  --wj-color: initial;\n  display: block;\n  font-size: inherit;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n:host(.wj-color) {\n  color: var(--wj-color-base);\n}\n:host(.wj-text-wrap),\n:host([text-wrap]) {\n  white-space: normal !important;\n}\n:host(.label-fixed) {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n:host(.label-stacked),\n:host(.label-floating) {\n  margin: 0;\n  align-self: stretch;\n  width: auto;\n  max-width: 100%;\n}\n:host(.label-no-animate.label-floating) {\n  transition: none;\n}\n::slotted(*) h1,\n::slotted(*) h2,\n::slotted(*) h3,\n::slotted(*) h4,\n::slotted(*) h5,\n::slotted(*) h6 {\n  text-overflow: inherit;\n  overflow: inherit;\n}\n:host(.wj-color) {\n  color: var(--wj-color);\n}\n::slotted(*:first-child) {\n  margin-top: 0 !important;\n}\n::slotted(*:last-child) {\n  margin-bottom: 0 !important;\n}";
 class Label extends WJElement {
   constructor() {

package/dist/wj-list.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 List ]\n*/\n:host {\n  --wj-list-inset-padding: 1rem;\n  --wj-list-border-radius: 8px;\n  --wj-list-background: var(--wj-background);\n  margin: 0;\n  padding: 0;\n  display: block;\n  contain: content;\n  list-style-type: none;\n}\n\n:host(.wj-inset) {\n  background: var(--wj-list-background);\n  transform: translateZ(0);\n  overflow: hidden;\n  padding: var(--wj-list-inset-padding);\n  border-radius: var(--wj-list-border-radius);\n}\n\n:host(.wj-lines-none) ::slotted(wj-item) {\n  --wj-border-width: 0 !important;\n}";
 class List extends WJElement {
   constructor() {

package/dist/wj-main.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 Main ]\n*/\n:host {\n  display: block;\n  flex: 1;\n  flex-basis: auto;\n  padding: 1.5rem;\n  box-sizing: border-box;\n}";
 class Main extends WJElement {
   constructor() {

package/dist/wj-masonry.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const DEFAULT_MAX_COL_WIDTH = 500;
 const DEFAULT_DEBOUNCE_MS = 300;
 const COL_COUNT_CSS_VAR_NAME = `--wj-masonry-layout-col-count`;