wj-elements 0.0.20 → 0.0.22

package/dist/wj-nav.js

@@ -0,0 +1,61 @@
+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* direction.scss\n*/\n/* Skeleton Variables */\n/*------------------------------------------------------------------\n[11. Tabs & Accordians]\n*/\n/* Tabs\n------------------------------------\n*/\n.nav-tabs {\n  display: flex;\n  position: relative;\n}\n.nav-tabs > .nav-item {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0;\n  padding-right: 0;\n}\n.nav-tabs > .nav-item > a.active:hover, .nav-tabs > .nav-item > a.active:focus {\n  border-color: #e0e0e0;\n  color: #4b4b4b;\n  background-color: #e0e0e0;\n}\n.nav-tabs > .nav-item > a {\n  display: block;\n  border-radius: 0;\n  padding: 13px 17px;\n  margin-right: 0;\n  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  color: #757575;\n  font-size: 10.5px;\n  min-width: 70px;\n  text-transform: uppercase;\n  border-color: transparent;\n  position: relative;\n  line-height: 1.7em;\n  cursor: pointer;\n}\n.nav-tabs > .nav-item > a:hover, .nav-tabs > .nav-item > a:focus {\n  background: transparent;\n  border-color: transparent;\n  color: #4b4b4b;\n}\n.nav-tabs > .nav-item > a .tab-icon {\n  margin-right: 6px;\n}\n.nav-tabs > .nav-item > a.active {\n  color: #212121;\n}\n.nav-tabs ~ .tab-content {\n  padding: 15px;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left, .nav-tabs ~ .tab-content > .tab-pane.slide-right {\n  -webkit-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left.sliding, .nav-tabs ~ .tab-content > .tab-pane.slide-right.sliding {\n  opacity: 0 !important;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left.active, .nav-tabs ~ .tab-content > .tab-pane.slide-right.active {\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n  -ms-transform: translate(0, 0);\n  opacity: 1;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left.sliding {\n  -webkit-transform: translate3d(10%, 0, 0);\n  transform: translate3d(10%, 0, 0);\n  -ms-transform: translate(10%, 0);\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-right.sliding {\n  -webkit-transform: translate3d(-10%, 0, 0);\n  transform: translate3d(-10%, 0, 0);\n  -ms-transform: translate(-10%, 0);\n}\n.nav-tabs.nav-tabs-left, .nav-tabs.nav-tabs-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -webkit-flex-shrink: 0;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n.nav-tabs.nav-tabs-left:after, .nav-tabs.nav-tabs-right:after {\n  border-bottom: 0px;\n}\n.nav-tabs.nav-tabs-left > .nav-item, .nav-tabs.nav-tabs-right > .nav-item {\n  float: none;\n}\n.nav-tabs.nav-tabs-left {\n  float: left;\n  padding-right: 0;\n}\n.nav-tabs.nav-tabs-left ~ .tab-content {\n  border-left: 1px solid rgba(0, 0, 0, 0.1);\n  -ms-flex: 1;\n  -ms-flex-negative: 0;\n}\n.nav-tabs.nav-tabs-right {\n  float: right;\n  padding-right: 0;\n}\n.nav-tabs.nav-tabs-right ~ .tab-content {\n  border-right: 1px solid rgba(0, 0, 0, 0.1);\n  -ms-flex: 1;\n  -ms-flex-negative: 0;\n}\n/* Tabs : Simple\n------------------------------------\n*/\n.nav-tabs-simple > .nav-item > a:after, .nav-tabs-simple > .nav-item > a.nav-tabs-info:after, .nav-tabs-simple > .nav-item > a.nav-tabs-warning:after, .nav-tabs-simple > .nav-item > a.nav-tabs-danger:after, .nav-tabs-simple > .nav-item > a.nav-tabs-complete:after, .nav-tabs-simple > .nav-item > a.nav-tabs-success:after, .nav-tabs-simple > .nav-item > a.nav-tabs-primary:after {\n  position: absolute;\n  -webkit-transition: all 0.1s linear 0s;\n  transition: all 0.1s linear 0s;\n  -webkit-backface-visibility: hidden;\n  width: 100%;\n  display: block;\n  background-color: #D83C31;\n  height: 0px;\n  content: "";\n  left: 0;\n  z-index: 125;\n  top: 100%;\n}\n.nav-tabs-simple {\n  border-bottom: 0;\n}\n.nav-tabs-simple:after {\n  content: "";\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n}\n.nav-tabs-simple.no-border:after {\n  border-bottom: 0 none;\n}\n.nav-tabs-simple > .nav-item {\n  margin-bottom: 0;\n}\n.nav-tabs-simple > .nav-item > a {\n  min-width: auto;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-primary:after {\n  background-color: #7252D3 !important;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-success:after {\n  background-color: #19AD79;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-complete:after {\n  background-color: #0072EC;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-danger:after {\n  background-color: #D83C31;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-warning:after {\n  background-color: #FFd945;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-info:after {\n  background-color: #3B4752;\n}\n.nav-tabs-simple > .nav-item > a.active:hover, .nav-tabs-simple > .nav-item > a.active:focus {\n  background-color: transparent;\n  border-color: transparent;\n}\n.nav-tabs-simple > .nav-item > a.active:after, .nav-tabs-simple > .nav-item > a:hover:after {\n  height: 3px;\n}\n.nav-tabs-simple.nav-tabs-left:after, .nav-tabs-simple.nav-tabs-right:after {\n  border-bottom: 0px;\n}\n.nav-tabs-simple.nav-tabs-left > .nav-item > a:after, .nav-tabs-simple.nav-tabs-right > .nav-item > a:after {\n  width: 0px;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  position: absolute;\n}\n.nav-tabs-simple.nav-tabs-left > .nav-item > a.active:after, .nav-tabs-simple.nav-tabs-left > .nav-item > a:hover:after, .nav-tabs-simple.nav-tabs-right > .nav-item > a.active:after, .nav-tabs-simple.nav-tabs-right > .nav-item > a:hover:after {\n  width: 3px;\n}\n.nav-tabs-simple.nav-tabs-left > .nav-item > a:after {\n  right: 0;\n  left: auto;\n}\n.nav-tabs-simple.nav-tabs-right > .nav-item > a:after {\n  left: 0;\n}\n/* Tabs : Line Triangles\n------------------------------------\n*/\n.nav-tabs-linetriangle {\n  border-bottom: 0;\n}\n.nav-tabs-linetriangle:after {\n  content: "";\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: absolute;\n  bottom: -1px;\n  z-index: 100;\n  left: 0;\n}\n.nav-tabs-linetriangle > .nav-item > a.active {\n  background: transparent;\n  box-shadow: none;\n  border-color: transparent;\n}\n.nav-tabs-linetriangle > .nav-item > a.active:hover, .nav-tabs-linetriangle > .nav-item > a.active:focus, .nav-tabs-linetriangle > .nav-item > a.active:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n.nav-tabs-linetriangle > .nav-item > a.active:after, .nav-tabs-linetriangle > .nav-item > a.active:before {\n  content: "";\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  z-index: 120;\n  top: 98%;\n}\n.nav-tabs-linetriangle > .nav-item > a.active:after {\n  width: 11px;\n  height: 11px;\n  display: block;\n  background: white;\n  border: solid rgba(0, 0, 0, 0.1);\n  transform: rotate(-45deg);\n  margin: -5px 0px 0px -5px;\n  border-width: 0px 0px 1px 1px;\n}\n.nav-tabs-linetriangle > .nav-item > a span {\n  font-size: 1em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nav-tabs-linetriangle > .nav-item > a:hover, .nav-tabs-linetriangle > .nav-item > a:focus {\n  overflow: visible;\n  -webkit-transition: color 0.2s ease 0s;\n  transition: color 0.2s ease 0s;\n}\n.nav-tabs-linetriangle ~ .tab-content {\n  background: #fff;\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs:after {\n  border-bottom: none;\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  border-top: 11px solid transparent;\n  border-bottom: 11px solid transparent;\n  border-left: 11px solid rgba(0, 0, 0, 0.2);\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:after {\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-left: 10px solid #f4f4f4;\n  margin-top: 1px;\n  margin-right: 2px;\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:after, .nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  top: auto;\n  right: -22px;\n  left: auto;\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs:after {\n  border-bottom: none;\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:before {\n  border-top: 11px solid transparent;\n  border-bottom: 11px solid transparent;\n  border-right: 11px solid rgba(0, 0, 0, 0.2);\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:after {\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-right: 10px solid #f4f4f4;\n  margin-top: 1px;\n  margin-left: -9px;\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:after, .nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:before {\n  top: auto;\n  left: -11px;\n  right: auto;\n}\n@media screen and (max-width: 58em) {\n  .nav-tabs-linetriangle {\n    font-size: 0.6em;\n  }\n}\n/* Tabs : Line Triangles Custom\n------------------------------------\n*/\n.nav-tabs-linetriangle-custom {\n  border-bottom: 0;\n}\n.nav-tabs-linetriangle-custom:after {\n  content: "";\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: absolute;\n  bottom: -1px;\n  z-index: 100;\n  left: 0;\n}\n.nav-tabs-linetriangle-custom > .nav-item {\n  transition: all 0.3s linear;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a {\n  padding: 1rem 0.5rem !important;\n  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  text-transform: none;\n  font-size: 12px !important;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active {\n  background: transparent;\n  box-shadow: none;\n  border-color: transparent;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active:hover, .nav-tabs-linetriangle-custom > .nav-item > a.active:focus, .nav-tabs-linetriangle-custom > .nav-item > a.active:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active:after, .nav-tabs-linetriangle-custom > .nav-item > a.active:before {\n  content: "";\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  z-index: 120;\n  top: 98%;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active:after {\n  width: 11px;\n  height: 11px;\n  display: block;\n  background: white;\n  border: solid rgba(0, 0, 0, 0.1);\n  transform: rotate(-45deg);\n  margin: -5px 0px 0px -5px;\n  border-width: 0px 0px 1px 1px;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a span {\n  font-size: 1em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a:hover, .nav-tabs-linetriangle-custom > .nav-item > a:focus {\n  overflow: visible;\n  -webkit-transition: color 0.2s ease 0s;\n  transition: color 0.2s ease 0s;\n}\n.nav-tabs-linetriangle-custom ~ .tab-content {\n  background: #eae0fb;\n  border: 0 none !important;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs {\n  padding: 2rem !important;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs:after {\n  border-bottom: none;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item {\n  margin-bottom: 1rem;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a {\n  background-color: transparent;\n  color: #212121;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a i {\n  font-size: 20px;\n  margin-bottom: 10px;\n  color: #757575;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.rounded-border {\n  border-radius: 8px;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a:hover {\n  background: rgba(33, 33, 33, 0.05);\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active {\n  color: #4e37b6;\n  background-color: #eae0fb;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active i {\n  color: #4e37b6;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  border-top: 11px solid transparent;\n  border-bottom: 11px solid transparent;\n  border-left: 10px solid transparent;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:after {\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-left: 10px solid #eae0fb;\n  margin-top: 1px;\n  margin-right: 2px;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:after, .nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  right: 0;\n  left: unset;\n  top: 50%;\n  transform: translate(100%, -50%);\n  margin-top: 0;\n  margin-right: 0;\n}\n@media screen and (max-width: 58em) {\n  .nav-tabs-linetriangle {\n    font-size: 0.6em;\n  }\n}\n/* Tabs : Fill-up\n------------------------------------\n*/\n.nav-tabs-fillup {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-perspective: 1000;\n  -moz-perspective: 1000;\n  perspective: 1000;\n}\n.nav-tabs-fillup > .nav-item {\n  overflow: hidden;\n}\n.nav-tabs-fillup > .nav-item > a {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-transition: color 0.3s ease 0s;\n  transition: color 0.3s ease 0s;\n  background: transparent;\n}\n.nav-tabs-fillup > .nav-item > a:after {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  background: none repeat scroll 0 0 #19AD79;\n  border: 1px solid #19AD79;\n  content: "";\n  height: calc(100% + 1px);\n  left: 0;\n  position: absolute;\n  top: 0;\n  -webkit-transform: translate3d(0, 100%, 0px);\n  transform: translate3d(0, 100%, 0px);\n  -webkit-transition: -webkit-transform 0.3s ease 0s;\n  transition: transform 0.3s ease 0s;\n  width: 100%;\n  z-index: -1;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-primary {\n  background: none repeat scroll 0 0 #7252D3;\n  border: 1px solid #7252D3;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-success {\n  background: none repeat scroll 0 0 #19AD79;\n  border: 1px solid #19AD79;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-complete {\n  background: none repeat scroll 0 0 #0072EC;\n  border: 1px solid #0072EC;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-warning {\n  background: none repeat scroll 0 0 #FFd945;\n  border: 1px solid #FFd945;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-danger {\n  background: none repeat scroll 0 0 #D83C31;\n  border: 1px solid #D83C31;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-info {\n  background: none repeat scroll 0 0 #3B4752;\n  border: 1px solid #3B4752;\n}\n.nav-tabs-fillup > .nav-item > a span {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-transform: translate3d(0px, 5px, 0px);\n  transform: translate3d(0px, 5px, 0px);\n  -webkit-transition: -webkit-transform 0.5s ease 0s;\n  transition: transform 0.5s ease 0s;\n  display: block;\n  font-weight: 700;\n  line-height: 1.5;\n}\n.nav-tabs-fillup > .nav-item > a.active {\n  z-index: 100;\n  color: #fff;\n}\n.nav-tabs-fillup > .nav-item > a.active:hover, .nav-tabs-fillup > .nav-item > a.active:focus {\n  border-color: transparent;\n  background: transparent;\n  color: #fff;\n}\n.nav-tabs-fillup > .nav-item > a.active:after {\n  -webkit-transform: translate3d(0px, 0px, 0px);\n  transform: translate3d(0px, 0px, 0px);\n  -ms-transform: translate(0px, 0px);\n}\n.nav-tabs-fillup > .nav-item > a.active span {\n  -webkit-transform: translate3d(0px, -5px, 0px);\n  transform: translate3d(0px, -5px, 0px);\n  -ms-transform: translate(0px, -5px);\n}\n.nav-tabs-fillup .icon:before {\n  -webkit-transform: translate3d(0px, 5px, 0px);\n  transform: translate3d(0px, 5px, 0px);\n  -ms-transform: translate(0px, 5px);\n  -webkit-transition: transform 0.5s ease 0s;\n  transition: transform 0.5s ease 0s;\n  display: block;\n  margin: 0;\n}\n.nav-tabs-fillup ~ .tab-content {\n  background: #fff;\n}\n.nav-tabs-fillup.nav-tabs-left, .nav-tabs-fillup.nav-tabs-right {\n  border-bottom: none;\n}\n.nav-tabs-fillup.nav-tabs-left:after, .nav-tabs-fillup.nav-tabs-right:after {\n  border-bottom: none;\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item > a:after, .nav-tabs-fillup.nav-tabs-right > .nav-item > a:after {\n  width: calc(100% + 1px);\n  height: 100%;\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item.active a:after, .nav-tabs-fillup.nav-tabs-right > .nav-item.active a:after {\n  -webkit-transform: translate3d(0px, 0px, 0px);\n  transform: translate3d(0px, 0px, 0px);\n  -ms-transform: translate(0px, 0px);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item > a:after {\n  -webkit-transform: translate3d(100%, 0, 0);\n  transform: translate3d(100%, 0, 0);\n  -ms-transform: translate(100%, 0);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item > a span {\n  -webkit-transform: translate3d(5px, 0, 0px);\n  transform: translate3d(5px, 0, 0px);\n  -ms-transform: translate(5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item.active a span {\n  -webkit-transform: translate3d(-5px, 0, 0px);\n  transform: translate3d(-5px, 0, 0px);\n  -ms-transform: translate(-5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item.active .icon:before {\n  -webkit-transform: translate3d(-5px, 0, 0px);\n  transform: translate3d(-5px, 0, 0px);\n  -ms-transform: translate(-5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item > a:after {\n  -webkit-transform: translate3d(-100%, 0, 0);\n  transform: translate3d(-100%, 0, 0);\n  -ms-transform: translate(-100%, 0);\n  left: -1px;\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item > a span {\n  -webkit-transform: translate3d(-5px, 0, 0px);\n  transform: translate3d(-5px, 0, 0px);\n  -ms-transform: translate(-5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item.active a span {\n  -webkit-transform: translate3d(5px, 0, 0px);\n  transform: translate3d(5px, 0, 0px);\n  -ms-transform: translate(5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item.active .icon:before {\n  -webkit-transform: translate3d(5px, 0, 0px);\n  transform: translate3d(5px, 0, 0px);\n  -ms-transform: translate(5px, 0);\n}\n.nav-tabs-header {\n  overflow: scroll;\n  width: 100%;\n}\n.nav-tabs-header .nav-tabs {\n  width: auto;\n  white-space: nowrap;\n}\n.nav-tabs-header .nav-tabs > .nav-item {\n  display: inline-block;\n  float: inherit;\n}\n.nav-tabs-header.nav-tabs-linetriangle {\n  height: 54px;\n  overflow-y: hidden;\n}\n.nav-tabs-header.nav-tabs-linetriangle:after {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: relative;\n  bottom: 3px;\n  z-index: 120;\n  content: "";\n  clear: both;\n}\n.nav-tabs-header.nav-tabs-linetriangle ~ .tab-content {\n  position: relative;\n  top: -12px;\n}\n.nav-tabs-header ~ .tab-content {\n  overflow: hidden;\n  padding: 15px;\n}\n.nav-tab-dropdown .cs-select {\n  width: 100% !important;\n  max-width: 100%;\n}\n.nav-tab-dropdown .cs-select .cs-placeholder {\n  height: 48px;\n  padding: 12px 34px 15px 15px;\n  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  font-size: 10.5px;\n  text-transform: uppercase;\n}\n.nav-tab-dropdown .cs-select .cs-backdrop {\n  border: 1px solid transparent;\n  border-bottom: 1px solid rgba(33, 33, 33, 0.14);\n}\n/* Panel Groups\n------------------------------------\n*/\n.card-group {\n  margin-bottom: 18px;\n}\n.card-group.horizontal {\n  display: block;\n}\n.card-group summary {\n  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\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  -webkit-text-stroke: 0px;\n  filter: alpha(opacity=40);\n  -webkit-transition: opacity 0.3s ease;\n  transition: opacity 0.3s ease;\n  list-style-type: none;\n}\n.card-group summary::marker {\n  display: none;\n  list-style-type: none;\n}\n.card-group summary:after {\n  font-family: "pages-icon";\n  content: "\\e987";\n  font-size: 17px;\n  position: absolute;\n  right: 17px;\n  top: 36%;\n  color: #4b4b4b;\n}\n.card-group summary:focus-visible {\n  outline: 0;\n}\n.card-group .card-header {\n  padding: 13px 18px 10px 22px;\n}\n.card-group .card-header.collapsed {\n  background-color: #fff;\n}\n.card-group .card-header + .card-collapse .card-body {\n  border: 0;\n}\n.card-group .card-header .card-title {\n  width: 100%;\n}\n.card-group .card-header .card-title > a {\n  color: #4b4b4b;\n  font-size: inherit;\n  padding: inherit;\n  margin: inherit;\n  display: block;\n  opacity: 1;\n}\n.card-group .card-header .card-title > a:hover {\n  color: #4b4b4b !important;\n}\n.card-group .card-header .card-title > a:hover:after {\n  color: #4b4b4b !important;\n}\n.card-group .card-header .card-title > a:after {\n  font-family: "pages-icon";\n  content: "\\e987";\n  font-size: 17px;\n  position: absolute;\n  right: 13px;\n  top: 36%;\n  color: #4b4b4b;\n}\n.card-group .card-header .card-title > a.collapsed {\n  color: rgba(75, 75, 75, 0.7);\n  opacity: 1;\n}\n.card-group .card-header .card-title > a.collapsed:after {\n  content: "\\e986";\n  color: rgba(75, 75, 75, 0.7);\n}\n.card-group .card {\n  box-shadow: none;\n  border: 1px solid rgba(33, 33, 33, 0.14);\n  -webkit-box-flex: 1;\n  -webkit-flex: 1 0 0;\n  -ms-flex: 1 0 0;\n  flex: 1 0 0;\n}\n.card-group .card + .card {\n  margin-top: 2px;\n}\n.card-group .card .card-body {\n  height: auto;\n}\n.card-group .card.card-default {\n  box-shadow: none;\n  border: 1px solid rgba(33, 33, 33, 0.1);\n}\n.card-group .card[open] .card-header:after {\n  content: "\\e986";\n  color: rgba(75, 75, 75, 0.7);\n}\n.card-group .card-file summary:after {\n  transform: rotate(180deg);\n  right: -3px;\n}\n.card-group .card-file[open] summary:after {\n  transform: rotate(0deg);\n}\n.nav-pills > .nav-item:first-child {\n  padding-left: 0;\n}\n.nav-pills > .nav-item > a {\n  color: #4b4b4b;\n}\n.nav-pills > .nav-item.active > a, .nav-pills > .nav-item.active > a:hover, .nav-pills > .nav-item.active > a:focus {\n  color: #4b4b4b;\n  background-color: #e0e0e0;\n}\n@media (max-width: 767px) {\n  .nav.nav-tabs.nav-stack-sm .nav-item {\n    float: none;\n  }\n  .nav.nav-tabs.nav-stack-sm.nav-tabs-linetriangle > li.active > a:after, .nav.nav-tabs.nav-stack-sm.nav-tabs-linetriangle > li.active > a:before {\n    display: none;\n  }\n}\n.rotate-90 {\n  transform: rotateZ(90deg);\n  transition: transform 0.3s ease;\n}\n.collapsed > .rotate-90, .collapsible:not(.collapsed) > .rotate-90 {\n  transform: rotateZ(0deg);\n  transition: transform 0.3s ease;\n}';
+class Nav extends WJElement {
+  constructor() {
+    super(template);
+    __publicField(this, "className", "Nav");
+    this.store.define("nav", [], null);
+    this.active = 0;
+    this.store.subscribe("nav", (key, state, oldState) => {
+      this.data = state;
+      this.refresh();
+    });
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return ["show-collapsed-indicator", "collapsed", "last"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  beforeDraw(context, store, params) {
+    this.store.dispatch(this.defaultStoreActions.loadAction("itemActions")(this.actions));
+    this.store.makeEveryArrayEntryAsStoreState("item", this.data, "id");
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let div = document.createElement("div");
+    div.classList.add("nav", "nav-tabs", "nav-tabs-simple", "mb-3");
+    this.store.getState().nav.forEach((item) => {
+      let element = new NavItem({
+        data: item,
+        actions: this.jsonActions,
+        nav: this
+      });
+      div.appendChild(element);
+    });
+    fragment.appendChild(div);
+    return fragment;
+  }
+  afterDraw(context, store, params) {
+    this.shadowRoot.addEventListener("wj-nav-change", (e) => {
+      let nav = store.getState().nav.map((i) => {
+        i.id == e.detail.data.id ? i.active = true : i.active = false;
+        return i;
+      });
+      store.dispatch(this.defaultStoreActions.loadAction("nav")(nav));
+    });
+  }
+}
+window.customElements.define("wj-nav", Nav);
+export {
+  Nav
+};

package/dist/wj-option.js

@@ -0,0 +1,58 @@
+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 Option ]\n*/\n:host {\n  --wj-option-padding-top: .5rem;\n  --wj-option-padding-bottom: .5rem;\n  --wj-option-highlighted: var(--wj-color-contrast-3);\n  display: block;\n}\n:host wj-icon {\n  visibility: hidden;\n  margin-inline: 0.5rem;\n}\n\n:host([selected]) wj-icon {\n  visibility: visible;\n}\n\n.native-option {\n  display: flex;\n  align-items: center;\n  padding-top: var(--wj-option-padding-top);\n  padding-bottom: var(--wj-option-padding-bottom);\n}\n\n.native-option:hover {\n  background-color: var(--wj-option-highlighted);\n}\n\n::slotted([slot=start]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: 0.5rem;\n}\n\n::slotted([slot=end]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline: auto 0.5rem;\n}";
+class Option extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Option");
+  }
+  set selected(value) {
+    return value ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  set value(value) {
+    this.setAttribute("value", value);
+  }
+  set text(value) {
+    this.innerText = value;
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.classList.add("native-option");
+    element.setAttribute("part", "native");
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("name", "check");
+    let start = document.createElement("slot");
+    start.setAttribute("name", "start");
+    let slot = document.createElement("slot");
+    let end = document.createElement("slot");
+    end.setAttribute("name", "end");
+    element.appendChild(icon);
+    element.appendChild(start);
+    element.appendChild(slot);
+    element.appendChild(end);
+    fragment.appendChild(element);
+    return fragment;
+  }
+  afterDraw() {
+    event.addListener(this, "click", "wj:option-change");
+  }
+}
+customElements.get("wj-option") || window.customElements.define("wj-option", Option);
+export {
+  Option
+};

package/dist/wj-options.js

@@ -0,0 +1,45 @@
+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";
+class Options extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Options");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  async beforeDraw() {
+    this.response = await this.getPages();
+    let fragment = document.createDocumentFragment();
+    this.response.forEach((item, index) => {
+      let option = document.createElement("wj-option");
+      option.setAttribute("value", item[this.itemValue] || item.value);
+      option.innerText = item[this.itemText] || item.text;
+      fragment.appendChild(option);
+    });
+    this.parentElement.appendChild(fragment);
+    event.dispatchCustomEvent(this, "wj:options-load", {});
+  }
+  async getPages(page) {
+    const response = await fetch(this.url);
+    if (!response.ok) {
+      throw new Error(`An error occurred: ${response.status}`);
+    }
+    return await response.json();
+  }
+}
+customElements.get("wj-options") || window.customElements.define("wj-options", Options);
+export {
+  Options
+};

package/dist/wj-popup.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wj-element.js";
-import "./wj-store.js";
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -254,7 +253,6 @@ const computePosition$1 = async (reference, floating, config) => {
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
       i = -1;
-      continue;
     }
   }
   return {
@@ -308,6 +306,7 @@ async function detectOverflow(state, options) {
     y: 1
   };
   const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
     rect,
     offsetParent,
     strategy
@@ -319,7 +318,7 @@ async function detectOverflow(state, options) {
     right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
   };
 }
-const arrow = (options) => ({
+const arrow$1 = (options) => ({
   name: "arrow",
   options,
   async fn(state) {
@@ -366,7 +365,7 @@ const arrow = (options) => ({
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
     const offset2 = clamp(min$1, center, max2);
-    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center != offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
@@ -381,7 +380,7 @@ const arrow = (options) => ({
     };
   }
 });
-const flip = function(options) {
+const flip$1 = function(options) {
   if (options === void 0) {
     options = {};
   }
@@ -521,20 +520,29 @@ const offset = function(options) {
     name: "offset",
     options,
     async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
-        y
+        y,
+        placement,
+        middlewareData
       } = state;
       const diffCoords = await convertValueToCoords(state, options);
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
-        data: diffCoords
+        data: {
+          ...diffCoords,
+          placement
+        }
       };
     }
   };
 };
-const size = function(options) {
+const size$1 = function(options) {
   if (options === void 0) {
     options = {};
   }
@@ -618,7 +626,7 @@ function getNodeName(node) {
 }
 function getWindow(node) {
   var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
 function getDocumentElement(node) {
   var _ref;
@@ -821,8 +829,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   if (domElement) {
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
-    let currentIFrame = win.frameElement;
-    while (currentIFrame && offsetParent && offsetWin !== win) {
+    let currentWin = win;
+    let currentIFrame = currentWin.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle(currentIFrame);
@@ -834,7 +843,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       height *= iframeScale.y;
       x += left;
       y += top;
-      currentIFrame = getWindow(currentIFrame).frameElement;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = currentWin.frameElement;
     }
   }
   return rectToClientRect({
@@ -844,15 +854,27 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     y
   });
 }
+const topLayerSelectors = [":popover-open", ":modal"];
+function isTopLayer(floating) {
+  return topLayerSelectors.some((selector) => {
+    try {
+      return floating.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
+    elements,
     rect,
     offsetParent,
     strategy
   } = _ref;
-  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const isFixed = strategy === "fixed";
   const documentElement = getDocumentElement(offsetParent);
-  if (offsetParent === documentElement) {
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
     return rect;
   }
   let scroll = {
@@ -861,7 +883,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   };
   let scale = createCoords(1);
   const offsets = createCoords(0);
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== "fixed") {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -1020,7 +1043,14 @@ function getClippingRect(_ref) {
   };
 }
 function getDimensions(element) {
-  return getCssDimensions(element);
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
 }
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
@@ -1044,9 +1074,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = getWindowScrollBarX(documentElement);
     }
   }
+  const x = rect.left + scroll.scrollLeft - offsets.x;
+  const y = rect.top + scroll.scrollTop - offsets.y;
   return {
-    x: rect.left + scroll.scrollLeft - offsets.x,
-    y: rect.top + scroll.scrollTop - offsets.y,
+    x,
+    y,
     width: rect.width,
     height: rect.height
   };
@@ -1062,7 +1094,7 @@ function getTrueOffsetParent(element, polyfill) {
 }
 function getOffsetParent(element, polyfill) {
   const window2 = getWindow(element);
-  if (!isHTMLElement(element)) {
+  if (!isHTMLElement(element) || isTopLayer(element)) {
     return window2;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
@@ -1074,20 +1106,15 @@ function getOffsetParent(element, polyfill) {
   }
   return offsetParent || getContainingBlock(element) || window2;
 }
-const getElementRects = async function(_ref) {
-  let {
-    reference,
-    floating,
-    strategy
-  } = _ref;
+const getElementRects = async function(data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
   return {
-    reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
     floating: {
       x: 0,
       y: 0,
-      ...await getDimensionsFn(floating)
+      ...await getDimensionsFn(data.floating)
     }
   };
 };
@@ -1111,8 +1138,9 @@ function observeMove(element, onMove) {
   let timeoutId;
   const root = getDocumentElement(element);
   function cleanup() {
+    var _io;
     clearTimeout(timeoutId);
-    io && io.disconnect();
+    (_io = io) == null || _io.disconnect();
     io = null;
   }
   function refresh(skip, threshold) {
@@ -1204,7 +1232,8 @@ function autoUpdate(reference, floating, update, options) {
         resizeObserver.unobserve(floating);
         cancelAnimationFrame(reobserveFrame);
         reobserveFrame = requestAnimationFrame(() => {
-          resizeObserver && resizeObserver.observe(floating);
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
         });
       }
       update();
@@ -1229,18 +1258,22 @@ function autoUpdate(reference, floating, update, options) {
   }
   update();
   return () => {
+    var _resizeObserver2;
     ancestors.forEach((ancestor) => {
       ancestorScroll && ancestor.removeEventListener("scroll", update);
       ancestorResize && ancestor.removeEventListener("resize", update);
     });
-    cleanupIo && cleanupIo();
-    resizeObserver && resizeObserver.disconnect();
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
     resizeObserver = null;
     if (animationFrame) {
       cancelAnimationFrame(frameId);
     }
   };
 }
+const flip = flip$1;
+const size = size$1;
+const arrow = arrow$1;
 const computePosition = (reference, floating, options) => {
   const cache = /* @__PURE__ */ new Map();
   const mergedOptions = {

package/dist/wj-progress-bar.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 Progress bar ]\n*/\n:host(.wj-color-primary) #bar {\n  --wj-progress-bar-color: var(--wj-color-primary);\n}\n\n:host(.wj-color-complete) #bar {\n  --wj-progress-bar-color: var(--wj-color-complete);\n}\n\n:host(.wj-color-success) #bar {\n  --wj-progress-bar-color: var(--wj-color-success);\n}\n\n:host(.wj-color-warning) #bar {\n  --wj-progress-bar-color: var(--wj-color-warning);\n}\n\n:host(.wj-color-danger) #bar {\n  --wj-progress-bar-color: var(--wj-color-danger);\n}\n\n:host(.wj-color-dark) #bar {\n  --wj-progress-bar-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-color-light) #bar {\n  --wj-progress-bar-color: var(--wj-color-contrast-11);\n}\n\n:host {\n  --wj-progress-bar-color: var(--wj-color-contrast-6);\n  --wj-progress-bar-text-size: .75rem;\n  --wj-progress-bar-text-color: var(--wj-color);\n}\n:host .progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n:host .slot-wrapper {\n  display: flex;\n  position: absolute;\n  top: 0;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n}\n:host #bar {\n  stroke: var(--wj-progress-bar-color);\n}\n:host text {\n  transform: rotate(90deg);\n  transform-origin: center;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--wj-progress-bar-text-size);\n  fill: var(--wj-progress-bar-text-color);\n}\n\n:host(.wj-color) #bar {\n  stroke: var(--wj-progress-bar-color);\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n\n::slotted([slot=end]) {\n  margin-inline: 1rem 0;\n}";
 class ProgressBar extends WJElement {
   constructor() {

package/dist/wj-radio-group.js

@@ -6,7 +6,6 @@ var __publicField = (obj, key, value) => {
 };
 import WJElement from "./wj-element.js";
 import { Radio } from "./wj-radio.js";
-import "./wj-store.js";
 const styles = "/*\n[ WJ Radio Group ]\n*/\n.wj-inline {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}";
 class RadioGroup extends WJElement {
   constructor() {

package/dist/wj-radio.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 Radio ]\n*/\n:host {\n  --wj-radio-margin-top: 0;\n  --wj-radio-margin-bottom: .5rem;\n  --wj-radio-margin-inline: 0;\n  display: block;\n  margin-top: var(--wj-radio-margin-top);\n  margin-bottom: var(--wj-radio-margin-bottom);\n  margin-inline: var(--wj-radio-margin-inline);\n  line-height: 100%;\n  padding-left: 0;\n}\n:host label {\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  padding-left: 1.5rem;\n  min-width: 16px;\n  min-height: 16px;\n  margin-bottom: 0;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\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  align-items: center;\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-1);\n  border: 1px solid var(--wj-color-contrast-4);\n}\n\n.native-radio input[type=radio] + label:before {\n  border-radius: var(--wj-border-radius-circle);\n  transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);\n}\n.native-radio input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-contrast-6);\n  border-width: 5px;\n}\n.native-radio input[type=radio]:focus + label {\n  color: var(--wj-color);\n}\n.native-radio input[type=radio]:focus + label:before {\n  outline: none !important;\n  box-shadow: 0 0 0 0 #78c8fe;\n}\n.native-radio input[type=radio] {\n  opacity: 0;\n  position: absolute;\n  top: 3px;\n  width: 16px;\n  height: 16px;\n}\n.native-radio input[type=radio][disabled] + label {\n  cursor: not-allowed !important;\n  color: var(--wj-color-contrast-9);\n  opacity: 0.5;\n}\n.native-radio input[type=radio][disabled] + label:before {\n  cursor: not-allowed !important;\n}\n\n.success input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-success);\n}\n.primary input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-primary);\n}\n.complete input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-complete);\n}\n.warning input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-warning);\n}\n.danger input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-danger);\n}\n.neutral input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-info);\n}';
 class Radio extends WJElement {
   constructor() {

package/dist/wj-rate.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 Rate ]\n*/\n:host {\n  display: flex;\n}\n\n.native-rate {\n  position: relative;\n  display: flex;\n  gap: var(--wj-rate-gap, 0.25rem);\n}\n\n.wj-rate-icon {\n  position: relative;\n  cursor: pointer;\n}\n\n.selected {\n  color: var(--wj-color-danger);\n}\n\n:host(:not([readonly])) .wj-rate-icon:hover {\n  transform: scale(1.2);\n}\n\n.half wj-icon:first-child {\n  color: white;\n}\n\n.half wj-icon:last-child {\n  color: currentColor;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n:host([disabled]) .native-rate {\n  pointer-events: none;\n  opacity: 0.5;\n}";
 class Rate extends WJElement {
   constructor() {

package/dist/wj-relative-time.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 Avatar ]\n*/";
 class RelativeTime extends WJElement {
   constructor() {

package/dist/wj-route.js

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

package/dist/wj-router-link.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import { b as bindRouterLinks } from "./router-links-26e4a166.js";
-import "./wj-store.js";
+import { b as bindRouterLinks } from "./router-links-F7MJWhZi.js";
 const styles = "/*\n[ WJ Router Link ]\n*/\n:host {\n  display: block;\n  background: transparent !important;\n}\n\n:host(.active) {\n  cursor: pointer;\n  font-weight: bold;\n}";
 class RouterLink extends WJElement {
   constructor() {

package/dist/wj-router-outlet.js

@@ -1,5 +1,4 @@
 import "./wj-element.js";
-import "./wj-store.js";
 class AnimationHook {
   constructor(options = {}) {
     this.options = options;

package/dist/wj-routerx.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import { r as routerLinks } from "./router-links-26e4a166.js";
-import "./wj-store.js";
+import { r as routerLinks } from "./router-links-F7MJWhZi.js";
 var DEFAULT_DELIMITER = "/";
 function balanced(open, close, str, index) {
   var count = 0;

package/dist/wj-row.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[ Row ]\n*/\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n:host(.wj-wrap) {\n  flex-wrap: wrap !important;\n}\n:host {\n  --wj-gutter-x: 1.5rem;\n  --wj-gutter-y: 0;\n  display: flex;\n  flex-wrap: nowrap;\n  margin-top: calc(var(--wj-gutter-y) * -1);\n  margin-right: calc(var(--wj-gutter-x) * -0.5);\n  margin-left: calc(var(--wj-gutter-x) * -0.5);\n}\n:host(.g-0),\n:host(.gx-0) {\n  --wj-gutter-x: 0;\n}\n:host(.g-0),\n:host(.gy-0) {\n  --wj-gutter-y: 0;\n}\n:host(.g-1),\n:host(.gx-1) {\n  --wj-gutter-x: 0.25rem;\n}\n:host(.g-1),\n:host(.gy-1) {\n  --wj-gutter-y: 0.25rem;\n}\n:host(.g-2),\n:host(.gx-2) {\n  --wj-gutter-x: 0.5rem;\n}\n:host(.g-2),\n:host(.gy-2) {\n  --wj-gutter-y: 0.5rem;\n}\n:host(.g-3),\n:host(.gx-3) {\n  --wj-gutter-x: 1rem;\n}\n:host(.g-3),\n:host(.gy-3) {\n  --wj-gutter-y: 1rem;\n}\n:host(.g-4),\n:host(.gx-4) {\n  --wj-gutter-x: 1.5rem;\n}\n:host(.g-4),\n:host(.gy-4) {\n  --wj-gutter-y: 1.5rem;\n}\n:host(.g-5),\n:host(.gx-5) {\n  --wj-gutter-x: 3rem;\n}\n:host(.g-5),\n:host(.gy-5) {\n  --wj-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  :host(.g-sm-0),\n  :host(.gx-sm-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-sm-0),\n  :host(.gy-sm-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-sm-1),\n  :host(.gx-sm-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-sm-1),\n  :host(.gy-sm-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-sm-2),\n  :host(.gx-sm-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-sm-2),\n  :host(.gy-sm-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-sm-3),\n  :host(.gx-sm-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-sm-3),\n  :host(.gy-sm-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-sm-4),\n  :host(.gx-sm-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-sm-4),\n  :host(.gy-sm-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-sm-5),\n  :host(.gx-sm-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-sm-5),\n  :host(.gy-sm-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  :host(.g-md-0),\n  :host(.gx-md-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-md-0),\n  :host(.gy-md-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-md-1),\n  :host(.gx-md-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-md-1),\n  :host(.gy-md-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-md-2),\n  :host(.gx-md-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-md-2),\n  :host(.gy-md-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-md-3),\n  :host(.gx-md-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-md-3),\n  :host(.gy-md-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-md-4),\n  :host(.gx-md-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-md-4),\n  :host(.gy-md-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-md-5),\n  :host(.gx-md-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-md-5),\n  :host(.gy-md-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  :host(.g-lg-0),\n  :host(.gx-lg-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-lg-0),\n  :host(.gy-lg-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-lg-1),\n  :host(.gx-lg-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-lg-1),\n  :host(.gy-lg-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-lg-2),\n  :host(.gx-lg-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-lg-2),\n  :host(.gy-lg-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-lg-3),\n  :host(.gx-lg-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-lg-3),\n  :host(.gy-lg-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-lg-4),\n  :host(.gx-lg-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-lg-4),\n  :host(.gy-lg-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-lg-5),\n  :host(.gx-lg-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-lg-5),\n  :host(.gy-lg-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.g-xl-0),\n  :host(.gx-xl-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-xl-0),\n  :host(.gy-xl-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-xl-1),\n  :host(.gx-xl-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-xl-1),\n  :host(.gy-xl-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-xl-2),\n  :host(.gx-xl-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-xl-2),\n  :host(.gy-xl-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-xl-3),\n  :host(.gx-xl-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-xl-3),\n  :host(.gy-xl-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-xl-4),\n  :host(.gx-xl-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-xl-4),\n  :host(.gy-xl-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-xl-5),\n  :host(.gx-xl-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-xl-5),\n  :host(.gy-xl-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.g-xxl-0),\n  :host(.gx-xxl-0) {\n    --wj-gutter-x: 0;\n  }\n  :host(.g-xxl-0),\n  :host(.gy-xxl-0) {\n    --wj-gutter-y: 0;\n  }\n  :host(.g-xxl-1),\n  :host(.gx-xxl-1) {\n    --wj-gutter-x: 0.25rem;\n  }\n  :host(.g-xxl-1),\n  :host(.gy-xxl-1) {\n    --wj-gutter-y: 0.25rem;\n  }\n  :host(.g-xxl-2),\n  :host(.gx-xxl-2) {\n    --wj-gutter-x: 0.5rem;\n  }\n  :host(.g-xxl-2),\n  :host(.gy-xxl-2) {\n    --wj-gutter-y: 0.5rem;\n  }\n  :host(.g-xxl-3),\n  :host(.gx-xxl-3) {\n    --wj-gutter-x: 1rem;\n  }\n  :host(.g-xxl-3),\n  :host(.gy-xxl-3) {\n    --wj-gutter-y: 1rem;\n  }\n  :host(.g-xxl-4),\n  :host(.gx-xxl-4) {\n    --wj-gutter-x: 1.5rem;\n  }\n  :host(.g-xxl-4),\n  :host(.gy-xxl-4) {\n    --wj-gutter-y: 1.5rem;\n  }\n  :host(.g-xxl-5),\n  :host(.gx-xxl-5) {\n    --wj-gutter-x: 3rem;\n  }\n  :host(.g-xxl-5),\n  :host(.gy-xxl-5) {\n    --wj-gutter-y: 3rem;\n  }\n}\n:host(.wj-justify-content-center) {\n  justify-content: center !important;\n}\n:host(.wj-justify-content-end) {\n  justify-content: flex-end !important;\n}\n:host(.wj-justify-content-between) {\n  justify-content: space-between !important;\n}\n:host(.wj-justify-content-around) {\n  justify-content: space-around !important;\n}\n:host(.wj-align-items-start) {\n  align-items: baseline !important;\n}\n:host(.wj-align-items-center) {\n  align-items: center !important;\n}\n:host(.wj-align-items-end) {\n  align-items: flex-end !important;\n}";
 class Row extends WJElement {
   constructor() {