wj-elements 0.0.21 → 0.0.22

package/dist/wj-item.js

@@ -9,6 +9,7 @@ const styles = '/*\n[ WJ Item ]\n*/\n:host {\n  --wj-border-width: 0 0 1px 0;\n
 class Item extends WJElement {
   constructor() {
     super();
+    __publicField(this, "className", "Item");
     __publicField(this, "hostContext", (selector, el) => {
       return el.closest(selector) !== null;
     });

package/dist/wj-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-F7MJWhZi.js";
 import { fetchAndParseCSS } from "./wj-fetchAndParseCSS.js";
 import { L as Localizer } from "./localize-DSOailh_.js";
-import { Aside } from "./wj-aside.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";
@@ -97,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,
@@ -597,7 +125,6 @@ export {
   Dialog,
   Divider,
   Dropdown,
-  ExampleElement,
   FileUpload,
   FileUploadItem,
   Footer,
@@ -621,6 +148,7 @@ export {
   MenuButton,
   MenuItem,
   MenuLabel,
+  Nav,
   NavMenu,
   Option,
   Options,
@@ -648,7 +176,7 @@ export {
   ToolbarAction,
   Tooltip,
   VisuallyHidden,
-  WJElement,
+  default2 as WJElement,
   b as bindRouterLinks,
   defaultStoreActions,
   fetchAndParseCSS,

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
+};

package/dist/wj-nav.js

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

package/dist/wj-option.js

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

package/dist/wj-options.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
+class Options extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Options");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  async beforeDraw() {
+    this.response = await this.getPages();
+    let fragment = document.createDocumentFragment();
+    this.response.forEach((item, index) => {
+      let option = document.createElement("wj-option");
+      option.setAttribute("value", item[this.itemValue] || item.value);
+      option.innerText = item[this.itemText] || item.text;
+      fragment.appendChild(option);
+    });
+    this.parentElement.appendChild(fragment);
+    event.dispatchCustomEvent(this, "wj:options-load", {});
+  }
+  async getPages(page) {
+    const response = await fetch(this.url);
+    if (!response.ok) {
+      throw new Error(`An error occurred: ${response.status}`);
+    }
+    return await response.json();
+  }
+}
+customElements.get("wj-options") || window.customElements.define("wj-options", Options);
+export {
+  Options
+};

package/dist/wj-select.js

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

package/dist/wj-tab-group.js

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

package/dist/wj-tab-panel.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
+const styles = "/*\n[ WJ Tab Panel ]\n*/\n:host {\n  display: none;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 1rem;\n}\n\n:host([active]) {\n  display: block;\n}";
+class TabPanel extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "TabPanel");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", TabPanel);
+export {
+  TabPanel
+};

package/dist/wj-tab.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "private": false,
-  "version": "0.0.21",
+  "version": "0.0.22",
   "type": "module",
   "files": [
     "./dist"