wj-elements 0.0.20 → 0.0.21

package/dist/wj-menu-item.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { WjElementUtils, event } 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 Menu Item ]\n*/\n:host {\n  --wj-menu-item-color: var(--wj-color);\n  --wj-menu-item-background: transparent;\n  --wj-menu-item-color-hover: var(--wj-color-contrast-8);\n  --wj-menu-item-background-hover: var(--wj-border-color);\n  --wj-menu-item-color-focus: var(--wj-color-contrast-8);\n  --wj-menu-item-background-focus: var(--wj-border-color);\n  --wj-menu-item-color-active: var(--wj-color-contrast-8);\n  --wj-menu-item-background-active: var(--wj-border-color);\n  --wj-menu-item-padding-top: .5rem;\n  --wj-menu-item-padding-bottom: .5rem;\n  --wj-menu-item-line-height: 1.8rem;\n  --wj-menu-item-safe-triangle-cursor-x: 0;\n  --wj-menu-item-safe-triangle-cursor-y: 0;\n  --wj-menu-item-safe-triangle-submenu-start-x: 0;\n  --wj-menu-item-safe-triangle-submenu-start-y: 0;\n  --wj-menu-item-safe-triangle-submenu-end-x: 0;\n  --wj-menu-item-safe-triangle-submenu-end-y: 0;\n  --wj-menu-submenu-offset: 0;\n  --wj-menu-item-icon-visibility: hidden;\n  display: block;\n}\n:host .native-menu-item {\n  background: var(--wj-menu-item-background);\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  color: var(--wj-menu-item-color);\n  padding-top: var(--wj-menu-item-padding-top);\n  padding-bottom: var(--wj-menu-item-padding-bottom);\n  transition: var(--wj-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n  width: 100%;\n  line-height: var(--wj-menu-item-line-height);\n}\n:host .native-menu-item:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item:focus {\n  color: var(--wj-menu-item-color-focus);\n  background: var(--wj-menu-item-background-focus);\n}\n:host .native-menu-item:active {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item .label {\n  flex: 1 1 auto;\n  display: inline-block;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n:host .native-menu-item .check-icon {\n  flex: 0 0 auto;\n  display: var(--wj-menu-item-check-icon-display, flex);\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: hidden;\n}\n:host .native-menu-item .check-icon.checked {\n  visibility: visible;\n}\n:host .native-menu-item.expanded-submenu {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item.expanded-submenu:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item.expanded-submenu::after {\n  content: "";\n  position: fixed;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  clip-path: polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y), var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y), var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y));\n}\n\n.submenu-icon {\n  --wj-icon-size: 14px !important;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: var(--wj-menu-item-icon-visibility);\n}\n\n.has-submenu .submenu-icon {\n  --wj-menu-item-icon-visibility: visible;\n}\n\n.submenu-icon.collapse {\n  flex: none;\n  right: 10px;\n  position: relative;\n}\n\n:host(:focus-visible) {\n  outline: none;\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-start: 0.5rem;\n}\n\n:host(.wj-menu-variant-nav) ::slotted([slot=submenu]) {\n  --wj-menu-border-width: 0 !important;\n  --wj-menu-margin-inline: 2rem 0 !important;\n}\n\n:host ::slotted([slot=start]) {\n  width: 1.5rem;\n}\n\n:host(.wj-menu-variant-context) {\n  display: block;\n}\n\n:host(.active) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n\n:host(.open) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}';
 class MenuItem extends WJElement {
   constructor() {

package/dist/wj-menu-label.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { WjElementUtils } from "./wj-element.js";
-import "./wj-store.js";
 const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Menu Label ]\n*/\n:host {\n  --wj-menu-label-font-size: .75rem;\n  --wj-menu-label-weight: 600;\n  --wj-letter-spacing: .025rem;\n  --wj-menu-label-color: var(--wj-color-contrast-6);\n  --wj-padding-top: 0;\n  --wj-padding-bottom: 0;\n  --wj-padding-start: 1.5rem;\n  --wj-padding-end: 1.5rem;\n}\n:host .native-menu-label {\n  font-size: var(--wj-menu-label-font-size);\n  display: inline-block;\n  font-weight: var(--wj-menu-label-weight);\n  letter-spacing: var(--wj-letter-spacing);\n  color: var(--wj-menu-label-color);\n  padding: var(--wj-padding-top) var(--wj-padding-start) var(--wj-padding-bottom) var(--wj-padding-end);\n}";
 class MenuLabel extends WJElement {
   constructor() {

package/dist/wj-menu.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 Menu ]\n*/\n:host {\n  --wj-menu-background: var(--wj-background);\n  --wj-menu-border-width: 1px;\n  --wj-menu-border-style: solid;\n  --wj-menu-border-color: var(--wj-border-color);\n  --wj-menu-border-radius: 4px;\n  --wj-menu-padding-top: .5rem;\n  --wj-menu-padding-bottom: .5rem;\n  --wj-menu-padding-inline: 0;\n  --wj-menu-margin-top: ;\n  --wj-menu-margin-bottom: 0;\n  --wj-menu-margin-inline: 0;\n  --wj-menu-z-index: 900;\n  display: none;\n  background: var(--wj-menu-background);\n  position: relative;\n  border-width: var(--wj-menu-border-width);\n  border-style: var(--wj-menu-border-style);\n  border-color: var(--wj-menu-border-color);\n  z-index: var(--wj-menu-z-index);\n  border-radius: var(--wj-border-radius-small);\n  padding-top: var(--wj-menu-padding-top);\n  padding-bottom: var(--wj-menu-padding-bottom);\n  padding-inline: var(--wj-menu-padding-inline);\n  margin-top: var(--wj-menu-margin-top);\n  margin-bottom: var(--wj-menu-margin-bottom);\n  margin-inline: var(--wj-menu-margin-inline);\n  overflow: auto;\n  overscroll-behavior: none;\n}\n:host .native-menu {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n:host .native-menu ::slotted(wj-button) {\n  margin: 0;\n}\n\n:host(.wj-menu-collapse) {\n  max-width: 70px !important;\n}\n\n:host([variant=context]) {\n  display: block !important;\n  margin-left: var(--wj-menu-submenu-offset);\n}\n\n:host([variant=megamenu]) .native-menu {\n  flex-direction: row;\n  align-items: end;\n  flex-wrap: nowrap;\n}\n:host([variant=megamenu]) .native-menu .check-icon {\n  display: none;\n}\n\n:host([active]) {\n  display: flex !important;\n}";
 class Menu extends WJElement {
   constructor() {

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() {

package/dist/wj-slider.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import "./wj-store.js";
 const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-slider-track-height: 4px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 100%;\n}\n:host .native-slider {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  align-items: center;\n  height: inherit;\n}\n:host .slider {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 0%;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\ninput[type=range] {\n  -webkit-appearance: none;\n  width: 100%;\n  height: var(--wj-slider-track-height);\n  margin: 0;\n  border-radius: 5px;\n  background-size: 70% 100%;\n  background-repeat: no-repeat;\n  /* Input Track */\n  --wj-slider-color: #7252D3;\n  --wj-slider-thumb-color: #7252D3;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #7252D3), var(--wj-slider-color, #7252D3));\n  /* Input Thumb */\n}\ninput[type=range]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  height: 18px;\n  width: 18px;\n  border-radius: 50%;\n  cursor: ew-resize;\n  transition: background 0.3s ease-in-out;\n}\ninput[type=range]::-moz-range-thumb {\n  -webkit-appearance: none;\n  height: 18px;\n  width: 18px;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background 0.3s ease-in-out;\n  border: 0;\n}\ninput[type=range]::-ms-thumb {\n  -webkit-appearance: none;\n  height: 18px;\n  width: 18px;\n  border-radius: 50%;\n  cursor: ew-resize;\n  transition: background 0.3s ease-in-out;\n}\ninput[type=range]::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n  box-shadow: none;\n  border: none;\n  background: transparent;\n}\ninput[type=range]::-moz-range-track {\n  -webkit-appearance: none;\n  box-shadow: none;\n  border: none;\n  background: transparent;\n}\ninput[type=range]::-ms-track {\n  -webkit-appearance: none;\n  box-shadow: none;\n  border: none;\n  background: transparent;\n}\ninput[type=range][color=primary] {\n  --wj-slider-color: #7252D3;\n  --wj-slider-thumb-color: #7252D3;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #eae0fb;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #7252D3), var(--wj-slider-color, #7252D3));\n  /* Input Thumb */\n}\ninput[type=range][color=primary]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=primary]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range][color=success] {\n  --wj-slider-color: #19AD79;\n  --wj-slider-thumb-color: #19AD79;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #d6f7f0;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #19AD79), var(--wj-slider-color, #19AD79));\n  /* Input Thumb */\n}\ninput[type=range][color=success]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=success]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #19AD79);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d6f7f0);\n}\ninput[type=range][color=complete] {\n  --wj-slider-color: #0072EC;\n  --wj-slider-thumb-color: #0072EC;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #d3eeff;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #0072EC), var(--wj-slider-color, #0072EC));\n  /* Input Thumb */\n}\ninput[type=range][color=complete]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=complete]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #0072EC);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #d3eeff);\n}\ninput[type=range][color=danger] {\n  --wj-slider-color: #D83C31;\n  --wj-slider-thumb-color: #D83C31;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #fde2da;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #D83C31), var(--wj-slider-color, #D83C31));\n  /* Input Thumb */\n}\ninput[type=range][color=danger]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=danger]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #D83C31);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fde2da);\n}\ninput[type=range][color=warning] {\n  --wj-slider-color: #FFd945;\n  --wj-slider-thumb-color: #FFd945;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px #fffde1;\n  --wj-slider-track-color: #dbe6e8;\n  background-color: var(--wj-slider-track-color, #dbe6e8);\n  background-image: linear-gradient(var(--wj-slider-color, #FFd945), var(--wj-slider-color, #FFd945));\n  /* Input Thumb */\n}\ninput[type=range][color=warning]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=warning]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #FFd945);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #fffde1);\n}\ninput[type=range][color=contrast] {\n  --wj-slider-color: #fff;\n  --wj-slider-thumb-color: #fff;\n  --wj-slider-thumb-shadow: none;\n  --wj-slider-thumb-shadow-active: 0 0 0 7px white;\n  --wj-slider-track-color: #757575;\n  background-color: var(--wj-slider-track-color, #757575);\n  background-image: linear-gradient(var(--wj-slider-color, #fff), var(--wj-slider-color, #fff));\n  /* Input Thumb */\n}\ninput[type=range][color=contrast]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range][color=contrast]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #fff);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px white);\n}\ninput[type=range]::-webkit-slider-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-moz-range-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-ms-thumb {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-webkit-slider-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-moz-range-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-ms-thumb:active {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-webkit-slider-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-moz-range-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ninput[type=range]::-ms-thumb:hover {\n  background: var(--wj-slider-thumb-color, #7252D3);\n  box-shadow: var(--wj-slider-thumb-shadow-active, 0 0 0 7px #eae0fb);\n}\ndatalist {\n  display: flex;\n  justify-content: space-between;\n  height: auto;\n  overflow: hidden;\n  margin-top: 16px;\n}\ndatalist option:before {\n  content: "";\n  display: block;\n  width: 0;\n  height: auto;\n  padding-left: 3px;\n  text-indent: 0;\n}\noutput {\n  position: absolute;\n  background: var(--wj-color-contrast-11);\n  color: var(--wj-color-contrast-0);\n  top: -46px;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n::slotted([slot=label]) {\n  margin-inline: 0 1rem;\n  font-size: var(--wj-font-size);\n}\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n::slotted([slot=end]) {\n  margin-inline: 1rem 0;\n}';
 class Slider extends WJElement {
   constructor() {

package/dist/wj-split-view.js

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

package/dist/wj-textarea.js

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

package/dist/wj-thumbnail.js

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

package/dist/wj-toast.js

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

package/dist/wj-toggle.js

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

package/dist/wj-toolbar-action.js

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

package/dist/wj-toolbar.js

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

package/dist/wj-tooltip.js

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

package/dist/wj-visually-hidden.js

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

package/package.json

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