wj-elements 0.0.20 → 0.0.22

package/dist/wj-master.js

@@ -1,16 +1,10 @@
-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, { WjElementUtils, event } from "./wj-element.js";
+import { default as default2 } from "./wj-element.js";
 import { defaultStoreActions, store } from "./wj-store.js";
-import { b, w } from "./router-links-26e4a166.js";
+import { b, w } from "./router-links-F7MJWhZi.js";
 import { fetchAndParseCSS } from "./wj-fetchAndParseCSS.js";
-import { L as Localizer } from "./localize-20081fd1.js";
-import { Aside } from "./wj-aside.js";
+import { L as Localizer } from "./localize-DSOailh_.js";
 import { Animation } from "./wj-animation.js";
+import { Aside } from "./wj-aside.js";
 import { Avatar } from "./wj-avatar.js";
 import { Badge } from "./wj-badge.js";
 import { Breadcrumb } from "./wj-breadcrumb.js";
@@ -56,6 +50,10 @@ import { Menu } from "./wj-menu.js";
 import { MenuButton } from "./wj-menu-button.js";
 import { MenuItem } from "./wj-menu-item.js";
 import { MenuLabel } from "./wj-menu-label.js";
+import { Nav } from "./wj-nav.js";
+import { NavMenu } from "./wj-nav-menu.js";
+import { Option } from "./wj-option.js";
+import { Options } from "./wj-options.js";
 import { Popup } from "./wj-popup.js";
 import { ProgressBar } from "./wj-progress-bar.js";
 import { Radio } from "./wj-radio.js";
@@ -67,8 +65,12 @@ import { Routerx } from "./wj-routerx.js";
 import { RouterLink } from "./wj-router-link.js";
 import "./wj-router-outlet.js";
 import { Row } from "./wj-row.js";
+import { Select } from "./wj-select.js";
 import { Slider } from "./wj-slider.js";
 import { SplitView } from "./wj-split-view.js";
+import { Tab } from "./wj-tab.js";
+import { TabGroup } from "./wj-tab-group.js";
+import { TabPanel } from "./wj-tab-panel.js";
 import { Textarea } from "./wj-textarea.js";
 import { Thumbnail } from "./wj-thumbnail.js";
 import { Toast } from "./wj-toast.js";
@@ -77,8 +79,6 @@ import { Toolbar } from "./wj-toolbar.js";
 import { ToolbarAction } from "./wj-toolbar-action.js";
 import { Tooltip } from "./wj-tooltip.js";
 import { VisuallyHidden } from "./wj-visually-hidden.js";
-const light = "";
-const dark = "";
 const sk = {
   code: "sk",
   name: "Slovak",
@@ -99,480 +99,6 @@ const en = {
   "wj.file.upload.from": "from"
 };
 Localizer.registerTranslation(en);
-const styles$7 = "/*\n[ WJ Example Element ]\n*/\n:host {\n  color: red;\n}";
-class ExampleElement extends WJElement {
-  constructor() {
-    super();
-    __publicField(this, "className", "ExampleElement");
-  }
-  static get cssStyleSheet() {
-    return styles$7;
-  }
-  static get observedAttributes() {
-    return [];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-    WjElementUtils.setAttributesToElement(this, {
-      "test": "test"
-    });
-  }
-  beforeDraw(context, store2, params) {
-  }
-  draw(context, store2, params) {
-    console.log(context, store2, params);
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.innerHTML = params.text;
-    fragment.appendChild(element);
-    return fragment;
-  }
-  afterDraw(context, store2, params) {
-    console.log("afterDraw", this.params);
-  }
-}
-customElements.get("wj-example-element") || window.customElements.define("wj-example-element", ExampleElement);
-const styles$6 = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Button Group ]\n*/\n:host {\n  display: inline-block;\n}\n:host .native-button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  line-height: 1;\n}\n:host slot {\n  display: contents;\n}\n::slotted(wj-button) {\n  margin: 0;\n}";
-class NavMenu extends WJElement {
-  constructor() {
-    super();
-    __publicField(this, "className", "ButtonGroup");
-  }
-  static get cssStyleSheet() {
-    return styles$6;
-  }
-  static get observedAttributes() {
-    return [];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(context, store2, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.classList.add("native-button-group");
-    element.setAttribute("part", "native");
-    this.slotElement = document.createElement("slot");
-    element.appendChild(this.slotElement);
-    fragment.appendChild(element);
-    return fragment;
-  }
-}
-customElements.get("wj-button-group") || window.customElements.define("wj-button-group", NavMenu);
-const styles$5 = "/*\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$5;
-  }
-  static get observedAttributes() {
-    return [];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(context, store2, 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);
-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);
-const styles$4 = "/*\n[ WJ Select ]\n*/\n:host {\n  --wj-select-border-width: 1px;\n  --wj-select-border-style: solid;\n  --wj-select-border-color: var(--wj-border-color);\n  --wj-select-options-border-width: 1px;\n  --wj-select-options-border-style: var(--wj-border-style);\n  --wj-select-options-border-color: var(--wj-border-color);\n  --wj-select-background: var(--wj-background);\n  --wj-select-line-height: 20px;\n  --wj-select-color: var(--wj-color);\n  --wj-select-border-radius: var(--wj-border-radius-medium);\n  width: 100%;\n  display: block;\n}\n:host [slot=arrow] {\n  transform: rotate(0deg);\n  transition: all 0.2s ease-in;\n}\n\n.native-select.default .wrapper {\n  display: block;\n  border-width: var(--wj-select-border-width);\n  border-style: var(--wj-select-border-style);\n  border-color: var(--wj-select-border-color);\n  border-radius: var(--wj-select-border-radius);\n  padding-inline: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.native-select.default .input-wrapper {\n  padding: 0;\n  min-height: 25px;\n  margin-top: -4px;\n}\n.native-select.default.focused wj-label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-select.default wj-label {\n  margin: 0;\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease 0s;\n  line-height: var(--wj-select-line-height);\n}\n.native-select.default wj-label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-select.standard .input-wrapper {\n  border-width: var(--wj-select-border-width);\n  border-style: var(--wj-select-border-style);\n  border-color: var(--wj-select-border-color);\n  border-radius: var(--wj-select-border-radius);\n  width: 100%;\n}\n\n.wrapper {\n  display: flex;\n  width: 100%;\n}\n\n.input-wrapper {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  background-color: var(--wj-select-background);\n  min-height: 28px;\n  color: var(--wj-select-color);\n  line-height: var(--wj-select-line-height);\n  appearance: none;\n  padding: 2px 0.5rem;\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\ninput {\n  border: medium;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  outline: 0;\n}\n\n::placeholder {\n  opacity: 1;\n}\n\n:host [active] .input-wrapper {\n  border-radius: var(--wj-select-border-radius) var(--wj-select-border-radius) 0 0;\n}\n:host [active] [slot=arrow] {\n  transform: rotate(180deg);\n  transition: all 0.2s ease-in;\n}\n\n.option-wrapper {\n  border-width: var(--wj-select-options-border-width);\n  border-style: var(--wj-select-options-border-style);\n  border-color: var(--wj-select-options-border-color);\n  border-radius: 0 0 var(--wj-select-border-radius) var(--wj-select-border-radius);\n  margin-top: -1px;\n  background: var(--wj-select-background);\n  overflow: auto;\n}\n\n:host([multiple]) input {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n}\n\n:host([multiple]) .chips {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper {\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.counter {\n  padding-inline: 0.5rem;\n}\n\nwj-chip {\n  --wj-chip-margin: 0 .25rem 0 0;\n}\n\nwj-button {\n  --wj-padding-top: .25rem;\n  --wj-padding-start: .25rem;\n  --wj-padding-end: .25rem;\n  --wj-padding-bottom: .25rem;\n  --wj-button-margin-inline: 0 .25rem;\n}";
-class Select extends WJElement {
-  constructor() {
-    super();
-    __publicField(this, "className", "Select");
-    __publicField(this, "optionChange", (e) => {
-      let allOptions = this.getAllOptions();
-      if (!this.hasAttribute("multiple")) {
-        allOptions.forEach((option) => {
-          option.selected = false;
-          option.removeAttribute("selected");
-        });
-        this.popup.removeAttribute("active");
-      }
-      e.target.selected = !e.target.hasAttribute("selected");
-      this.selections(e.target);
-    });
-    __publicField(this, "removeChip", (e) => {
-      let option = e.target.option;
-      option.selected = false;
-      option.removeAttribute("selected");
-      e.target.parentNode.removeChild(e.target);
-      this.selections(null, 0);
-    });
-    this._selected = [];
-    this.counterEl = null;
-  }
-  set selected(value) {
-    this._selected = value;
-  }
-  get selected() {
-    return this.getSelected();
-  }
-  set trigger(value) {
-    this.setAttribute("trigger", value);
-  }
-  get trigger() {
-    return this.getAttribute("trigger") || "click";
-  }
-  static get cssStyleSheet() {
-    return styles$4;
-  }
-  static get observedAttributes() {
-    return ["active", "value"];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(context, store2, params) {
-    let fragment = document.createDocumentFragment();
-    this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-select", this.variant || "default");
-    let wrapper = document.createElement("div");
-    wrapper.classList.add("wrapper");
-    wrapper.setAttribute("slot", "anchor");
-    let label = document.createElement("wj-label");
-    label.innerText = this.label || "";
-    let inputWrapper = document.createElement("div");
-    inputWrapper.classList.add("input-wrapper");
-    let input = document.createElement("input");
-    input.setAttribute("type", "text");
-    input.setAttribute("part", "input");
-    input.setAttribute("autocomplete", "off");
-    input.setAttribute("readonly", "");
-    input.setAttribute("placeholder", this.placeholder || "");
-    let arrow = document.createElement("wj-icon");
-    arrow.setAttribute("name", "chevron-down");
-    arrow.setAttribute("slot", "arrow");
-    let chips = document.createElement("div");
-    chips.classList.add("chips");
-    chips.innerText = this.placeholder || "";
-    let optionsWrapper = document.createElement("div");
-    optionsWrapper.classList.add("option-wrapper");
-    optionsWrapper.style.setProperty("height", this.maxHeight || "auto");
-    let slot = document.createElement("slot");
-    let clear = document.createElement("wj-button");
-    clear.setAttribute("fill", "link");
-    clear.setAttribute("part", "clear");
-    let clearIcon = document.createElement("wj-icon");
-    clearIcon.setAttribute("name", "x");
-    clear.appendChild(clearIcon);
-    let popup = document.createElement("wj-popup");
-    popup.setAttribute("placement", "bottom-start");
-    popup.setAttribute("manual", "");
-    popup.setAttribute("size", "");
-    if (this.hasAttribute("disabled"))
-      popup.setAttribute("disabled", "");
-    if (this.variant === "standard") {
-      if (this.hasAttribute("label"))
-        native.appendChild(label);
-    } else {
-      wrapper.appendChild(label);
-    }
-    inputWrapper.appendChild(input);
-    if (this.hasAttribute("multiple"))
-      inputWrapper.appendChild(chips);
-    if (this.hasAttribute("clearable"))
-      inputWrapper.appendChild(clear);
-    inputWrapper.appendChild(arrow);
-    optionsWrapper.appendChild(slot);
-    wrapper.appendChild(inputWrapper);
-    popup.appendChild(wrapper);
-    popup.appendChild(optionsWrapper);
-    if (this.trigger === "click")
-      popup.setAttribute("manual", "");
-    native.appendChild(popup);
-    this.native = native;
-    this.popup = popup;
-    this.labelElement = label;
-    this.input = input;
-    this.optionsWrapper = optionsWrapper;
-    this.chips = chips;
-    this.clear = clear;
-    fragment.appendChild(native);
-    return fragment;
-  }
-  afterDraw(context, store2, params) {
-    this.input.addEventListener("focus", (e) => {
-      this.labelElement.classList.add("fade");
-      this.native.classList.add("focused");
-    });
-    this.input.addEventListener("blur", (e) => {
-      this.native.classList.remove("focused");
-      if (!e.target.value)
-        this.labelElement.classList.remove("fade");
-    });
-    this.addEventListener("wj:option-change", this.optionChange);
-    this.clear.addEventListener("wj:button-click", (e) => {
-      this.getAllOptions().forEach((option) => {
-        option.selected = false;
-        option.removeAttribute("selected");
-      });
-      this.selections();
-      e.stopPropagation();
-    });
-    this.selections();
-    this.optionsWrapper.addEventListener("wj:options-load", (e) => {
-      this.optionsWrapper.scrollTo(0, 0);
-    });
-  }
-  getAllOptions() {
-    return this.querySelectorAll("wj-option");
-  }
-  getSelectedOptions() {
-    return this.querySelectorAll("wj-option[selected]");
-  }
-  getSelected(option) {
-    let selectedOptions = this.getSelectedOptions();
-    selectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Array.from(selectedOptions);
-    selectedOptions = selectedOptions.map((option2) => {
-      return {
-        value: option2.value,
-        text: option2.textContent.trim()
-      };
-    });
-    return selectedOptions;
-  }
-  selectionChanged(option = null, length = 0) {
-    if (this.hasAttribute("multiple")) {
-      this.value = this.selectedOptions.map((el) => el).reverse();
-      if (this.placeholder && length === 0) {
-        this.chips.innerHTML = this.placeholder;
-        this.input.value = "";
-      } else {
-        if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {
-          this.counter();
-        } else {
-          if (option != null)
-            this.chips.appendChild(this.getChip(option));
-        }
-      }
-    } else {
-      let value = (option == null ? void 0 : option.textContent.trim()) || "";
-      this.value = value;
-      this.input.value = value;
-    }
-  }
-  selections(option) {
-    let options = this.getSelectedOptions();
-    this.selectedOptions = Array.isArray(options) ? options : Array.from(options);
-    if (this.selectedOptions.length >= +this.maxOptions) {
-      this.counterEl = null;
-    }
-    this.chips.innerHTML = "";
-    if (this.selectedOptions.length > 0) {
-      this.selectedOptions.forEach((option2, index) => {
-        this.selectionChanged(option2, ++index);
-      });
-    } else {
-      this.selectionChanged();
-    }
-  }
-  counter() {
-    if (this.counterEl && this.value.length === +this.maxOptions) {
-      this.counterEl.remove();
-      this.counterEl = null;
-      return;
-    }
-    if (!this.counterEl) {
-      this.counterEl = document.createElement("span");
-      this.counterEl.classList.add("counter");
-      this.chips.appendChild(this.counterEl);
-    }
-    this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;
-  }
-  getChip(option) {
-    let chip = document.createElement("wj-chip");
-    chip.setAttribute("removable", "");
-    chip.addEventListener("wj:chip-remove", this.removeChip);
-    chip.option = option;
-    let label = document.createElement("wj-label");
-    label.innerText = option.textContent.trim();
-    chip.appendChild(label);
-    return chip;
-  }
-}
-customElements.get("wj-select") || window.customElements.define("wj-select", Select);
-const styles$3 = '/*\n[ WJ Tab ]\n*/\n:host {\n  --wj-font-size: 10px;\n  --wj-tab-text-transfrom: uppercase;\n  --wj-tab-font-weight: 500;\n  --wj-tab-letter-spacing: 0.06em;\n  --wj-tab-padding-inline: 1rem;\n  --wj-tab-padding-top: .75rem;\n  --wj-tab-padding-bottom: .75rem;\n  --wj-tab-color-active: var(--wj-color-primary-11);\n  --wj-tab-color-hover: var(--wj-color-primary-1);\n  display: block;\n  position: relative;\n}\n:host a {\n  display: block;\n  align-items: center;\n  white-space: nowrap;\n  font-family: var(--wj-font-family-secondary);\n  font-size: var(--wj-font-size);\n  letter-spacing: var(--wj-tab-letter-spacing);\n  text-transform: var(--wj-tab-text-transfrom);\n  font-weight: var(--wj-tab-font-weight);\n  text-decoration: none;\n  padding-inline: var(--wj-tab-padding-inline);\n  padding-top: var(--wj-tab-padding-top);\n  padding-bottom: var(--wj-tab-padding-bottom);\n  color: var(--wj-color);\n}\n:host a > svg {\n  inline-size: 1.5em;\n  pointer-events: none;\n}\n:host a:hover {\n  background: var(--wj-tab-color-hover);\n}\n:host a:hover:after {\n  display: block;\n}\n:host a:after {\n  content: " ";\n  display: none;\n  block-size: 0.15rem;\n  writing-mode: var(--wj-tab-writing-mode);\n  background: var(--wj-tab-color-active);\n  position: absolute;\n  bottom: var(--wj-tab-bottom);\n  left: var(--wj-tab-start);\n  right: var(--wj-tab-end);\n  top: var(--wj-tab-top);\n}\n\n:host([disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: inherit;\n}\n:host([disabled]) a:after {\n  display: none;\n}\n\n:host([active]) a:after {\n  display: block;\n}';
-class Tab extends WJElement {
-  constructor() {
-    super();
-    __publicField(this, "className", "Tab");
-    this.last = false;
-  }
-  static get cssStyleSheet() {
-    return styles$3;
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(context, store2, params) {
-    let fragment = document.createDocumentFragment();
-    let a = document.createElement("a");
-    a.setAttribute("href", "#" + this.panel);
-    a.innerHTML = this.innerHTML;
-    fragment.appendChild(a);
-    return fragment;
-  }
-  afterDraw() {
-    event.addListener(this, "click", "wj:tab-change");
-  }
-}
-customElements.get("wj-tab") || window.customElements.define("wj-tab", Tab);
-const styles$2 = "/*\n[ WJ Tab Group ]\n*/\n:host {\n  --wj-tab-top: 0;\n  --wj-tab-start: 0;\n  --wj-tab-end: 0;\n  --wj-tab-bottom: 0;\n}\n\n.native-tab-group {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n}\n\n.native-tab-group > header {\n  display: flex;\n  flex-direction: column;\n}\n.native-tab-group > header > nav {\n  display: flex;\n}\n\n.native-tab-group > section {\n  width: 100%;\n}\n.native-tab-group > section > article {\n  scroll-snap-align: start;\n  overflow-y: auto;\n  overscroll-behavior-y: contain;\n}\n\n:host([variant=top]) {\n  --wj-tab-top: auto !important;\n  --wj-tab-writing-mode: horizontal-tb;\n}\n:host([variant=top]) .native-tab-group {\n  flex-direction: column;\n}\n:host([variant=top]) nav {\n  border-bottom: 1px solid var(--wj-border-color);\n}\n\n:host([variant=start]) {\n  --wj-tab-start: auto !important;\n  --wj-tab-writing-mode: vertical-rl;\n}\n:host([variant=start]) .native-tab-group {\n  flex-direction: row;\n}\n:host([variant=start]) nav {\n  flex-direction: column;\n  border-right: 1px solid var(--wj-border-color);\n}\n\n:host([variant=end]) {\n  --wj-tab-writing-mode: vertical-rl;\n}\n:host([variant=end]) .native-tab-group {\n  flex-direction: row-reverse;\n}\n:host([variant=end]) nav {\n  flex-direction: column;\n  border-left: 1px solid var(--wj-border-color);\n}\n\n:host([variant=bottom]) {\n  --wj-tab-bottom: auto !important;\n  --wj-tab-writing-mode: horizontal-tb;\n}\n:host([variant=bottom]) .native-tab-group {\n  flex-direction: column-reverse;\n}\n:host([variant=bottom]) nav {\n  border-top: 1px solid var(--wj-border-color);\n}";
-class TabGroup extends WJElement {
-  constructor() {
-    super();
-    __publicField(this, "className", "TabGroup");
-  }
-  static get cssStyleSheet() {
-    return styles$2;
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(context, store2, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-tab-group");
-    let header = document.createElement("header");
-    header.classList.add("scroll-snap-x");
-    let nav = document.createElement("nav");
-    let section = document.createElement("section");
-    let slot = document.createElement("slot");
-    let slotNav = document.createElement("slot");
-    slotNav.setAttribute("name", "nav");
-    header.appendChild(nav);
-    nav.appendChild(slotNav);
-    section.appendChild(slot);
-    native.appendChild(header);
-    native.appendChild(section);
-    fragment.appendChild(native);
-    return fragment;
-  }
-  afterDraw() {
-    let activeTab = this.getActiveTab();
-    let activeTabName = activeTab ? activeTab[0].name : this.getTabAll()[0].panel;
-    this.setActiveTab(activeTabName);
-    this.addEventListener("wj:tab-change", (e) => {
-      if (e.detail.context.hasAttribute("disabled"))
-        return false;
-      this.setActiveTab(e.detail.context.panel);
-    });
-  }
-  removeActiveTab() {
-    this.getPanelAll().forEach((el) => {
-      el.removeAttribute("active");
-    });
-    this.getTabAll().forEach((el) => {
-      el.removeAttribute("active");
-    });
-  }
-  setActiveTab(tab) {
-    this.removeActiveTab();
-    this.querySelector(`[panel="${tab}"]`).setAttribute("active", "");
-    this.querySelector(`[name="${tab}"]`).setAttribute("active", "");
-  }
-  getActiveTab() {
-    let activeTabs = Array.from(this.context.querySelectorAll("[active]"));
-    return activeTabs.length > 0 ? activeTabs[0] : null;
-  }
-  getTabAll() {
-    return this.context.querySelector('[name="nav"]').assignedElements();
-  }
-  getPanelAll() {
-    return Array.from(this.querySelectorAll("wj-tab-panel"));
-  }
-}
-customElements.get("wj-tab-group") || window.customElements.define("wj-tab-group", TabGroup);
-const styles$1 = "/*\n[ WJ Tab Panel ]\n*/\n:host {\n  display: none;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 1rem;\n}\n\n:host([active]) {\n  display: block;\n}";
-class TabPanel extends WJElement {
-  constructor() {
-    super();
-    __publicField(this, "className", "TabPanel");
-  }
-  static get cssStyleSheet() {
-    return styles$1;
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(context, store2, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
-  }
-}
-customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", TabPanel);
 export {
   Animation,
   Aside,
@@ -599,7 +125,6 @@ export {
   Dialog,
   Divider,
   Dropdown,
-  ExampleElement,
   FileUpload,
   FileUploadItem,
   Footer,
@@ -623,6 +148,7 @@ export {
   MenuButton,
   MenuItem,
   MenuLabel,
+  Nav,
   NavMenu,
   Option,
   Options,
@@ -650,7 +176,7 @@ export {
   ToolbarAction,
   Tooltip,
   VisuallyHidden,
-  WJElement,
+  default2 as WJElement,
   b as bindRouterLinks,
   defaultStoreActions,
   fetchAndParseCSS,

package/dist/wj-menu-button.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 Menu Label ]\n*/\n:host {\n  display: inline-flex;\n}\n\n@media (min-width: 768px) {\n  :host {\n    display: none;\n  }\n}";
 class MenuButton extends WJElement {
   constructor() {

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-nav-menu.js

@@ -0,0 +1,37 @@
+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[ Button Group ]\n*/\n:host {\n  display: inline-block;\n}\n:host .native-button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  line-height: 1;\n}\n:host slot {\n  display: contents;\n}\n::slotted(wj-button) {\n  margin: 0;\n}";
+class NavMenu extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "NavMenu");
+  }
+  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-button-group");
+    element.setAttribute("part", "native");
+    this.slotElement = document.createElement("slot");
+    element.appendChild(this.slotElement);
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+customElements.get("wj-button-group") || window.customElements.define("wj-button-group", NavMenu);
+export {
+  NavMenu
+};