wj-elements 0.0.11 → 0.0.13

package/dist/wj-master.js

@@ -1,140 +1,145 @@
-var A = Object.defineProperty;
-var y = (s, i, t) => i in s ? A(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var c = (s, i, t) => (y(s, typeof i != "symbol" ? i + "" : i, t), t);
-import u, { WjElementUtils as E, event as f } from "./wj-element.js";
-import { defaultStoreActions as J, store as K } from "./wj-store.js";
-import { b as X, w as Y } from "./router-links-e0087f84.js";
-import { fetchAndParseCSS as tt } from "./wj-fetchAndParseCSS.js";
-import { L as x } from "./localize-762a9f0f.js";
-import { Aside as rt } from "./wj-aside.js";
-import { Animation as at } from "./wj-animation.js";
-import { Avatar as st } from "./wj-avatar.js";
-import { Badge as lt } from "./wj-badge.js";
-import { Breadcrumb as ct } from "./wj-breadcrumb.js";
-import { Breadcrumbs as mt } from "./wj-breadcrumbs.js";
-import { Button as ht } from "./wj-button.js";
-import { ButtonGroup as wt } from "./wj-button-group.js";
-import { Card as ft } from "./wj-card.js";
-import { CardContent as xt } from "./wj-card-content.js";
-import { CardControls as At } from "./wj-card-controls.js";
-import { CardHeader as Et } from "./wj-card-header.js";
-import { CardSubtitle as St } from "./wj-card-subtitle.js";
-import { CardTitle as kt } from "./wj-card-title.js";
-import { Carousel as Ot } from "./wj-carousel.js";
-import { CarouselItem as Rt } from "./wj-carousel-item.js";
-import { Checkbox as Ft } from "./wj-checkbox.js";
-import { Chip as Nt } from "./wj-chip.js";
-import { Col as It } from "./wj-col.js";
-import { ColorPicker as Bt } from "./wj-color-picker.js";
-import { Container as Wt } from "./wj-container.js";
-import { CopyButton as Gt } from "./wj-copy-button.js";
-import { Dialog as Ut } from "./wj-dialog.js";
-import { Divider as Jt } from "./wj-divider.js";
-import { Dropdown as Qt } from "./wj-dropdown.js";
-import { FileUpload as Yt } from "./wj-file-upload.js";
-import { FileUploadItem as te } from "./wj-file-upload-item.js";
-import { Footer as re } from "./wj-footer.js";
-import { FormatDigital as ae } from "./wj-format-digital.js";
-import { Grid as se } from "./wj-grid.js";
-import { Header as le } from "./wj-header.js";
-import { Icon as ce } from "./wj-icon.js";
-import { IconPicker as me } from "./wj-icon-picker.js";
-import { Img as he } from "./wj-img.js";
-import { ImgComparer as we } from "./wj-img-comparer.js";
-import { InfiniteScroll as fe } from "./wj-infinite-scroll.js";
-import { Input as xe } from "./wj-input.js";
-import { InputFile as Ae } from "./wj-input-file.js";
-import { Item as Ee } from "./wj-item.js";
-import { Label as Se } from "./wj-label.js";
-import { List as ke } from "./wj-list.js";
-import { Main as Oe } from "./wj-main.js";
-import { Masonry as Re } from "./wj-masonry.js";
-import { Menu as Fe } from "./wj-menu.js";
-import { MenuButton as Ne } from "./wj-menu-button.js";
-import { MenuItem as Ie } from "./wj-menu-item.js";
-import { MenuLabel as Be } from "./wj-menu-label.js";
-import { Popup as We } from "./wj-popup.js";
-import { ProgressBar as Ge } from "./wj-progress-bar.js";
-import { Radio as Ue } from "./wj-radio.js";
-import { RadioGroup as Je } from "./wj-radio-group.js";
-import { Rate as Qe } from "./wj-rate.js";
-import { RelativeTime as Ye } from "./wj-relative-time.js";
-import { Route as tr } from "./wj-route.js";
-import { Routerx as rr } from "./wj-routerx.js";
-import { RouterLink as ar } from "./wj-router-link.js";
+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 { defaultStoreActions, store } from "./wj-store.js";
+import { b, w } from "./router-links-26e4a166.js";
+import { fetchAndParseCSS } from "./wj-fetchAndParseCSS.js";
+import { L as Localizer } from "./localize-20081fd1.js";
+import { Aside } from "./wj-aside.js";
+import { Animation } from "./wj-animation.js";
+import { Avatar } from "./wj-avatar.js";
+import { Badge } from "./wj-badge.js";
+import { Breadcrumb } from "./wj-breadcrumb.js";
+import { Breadcrumbs } from "./wj-breadcrumbs.js";
+import { Button } from "./wj-button.js";
+import { ButtonGroup } from "./wj-button-group.js";
+import { Card } from "./wj-card.js";
+import { CardContent } from "./wj-card-content.js";
+import { CardControls } from "./wj-card-controls.js";
+import { CardHeader } from "./wj-card-header.js";
+import { CardSubtitle } from "./wj-card-subtitle.js";
+import { CardTitle } from "./wj-card-title.js";
+import { Carousel } from "./wj-carousel.js";
+import { CarouselItem } from "./wj-carousel-item.js";
+import { Checkbox } from "./wj-checkbox.js";
+import { Chip } from "./wj-chip.js";
+import { Col } from "./wj-col.js";
+import { ColorPicker } from "./wj-color-picker.js";
+import { Container } from "./wj-container.js";
+import { CopyButton } from "./wj-copy-button.js";
+import { Dialog } from "./wj-dialog.js";
+import { Divider } from "./wj-divider.js";
+import { Dropdown } from "./wj-dropdown.js";
+import { FileUpload } from "./wj-file-upload.js";
+import { FileUploadItem } from "./wj-file-upload-item.js";
+import { Footer } from "./wj-footer.js";
+import { FormatDigital } from "./wj-format-digital.js";
+import { Grid } from "./wj-grid.js";
+import { Header } from "./wj-header.js";
+import { Icon } from "./wj-icon.js";
+import { IconPicker } from "./wj-icon-picker.js";
+import { Img } from "./wj-img.js";
+import { ImgComparer } from "./wj-img-comparer.js";
+import { InfiniteScroll } from "./wj-infinite-scroll.js";
+import { Input } from "./wj-input.js";
+import { InputFile } from "./wj-input-file.js";
+import { Item } from "./wj-item.js";
+import { Label } from "./wj-label.js";
+import { List } from "./wj-list.js";
+import { Main } from "./wj-main.js";
+import { Masonry } from "./wj-masonry.js";
+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 { Popup } from "./wj-popup.js";
+import { ProgressBar } from "./wj-progress-bar.js";
+import { Radio } from "./wj-radio.js";
+import { RadioGroup } from "./wj-radio-group.js";
+import { Rate } from "./wj-rate.js";
+import { RelativeTime } from "./wj-relative-time.js";
+import { Route } from "./wj-route.js";
+import { Routerx } from "./wj-routerx.js";
+import { RouterLink } from "./wj-router-link.js";
 import "./wj-router-outlet.js";
-import { Row as sr } from "./wj-row.js";
-import { Slider as lr } from "./wj-slider.js";
-import { SplitView as cr } from "./wj-split-view.js";
-import { Textarea as mr } from "./wj-textarea.js";
-import { Thumbnail as hr } from "./wj-thumbnail.js";
-import { Toast as wr } from "./wj-toast.js";
-import { Toggle as fr } from "./wj-toggle.js";
-import { Toolbar as xr } from "./wj-toolbar.js";
-import { ToolbarAction as Ar } from "./wj-toolbar-action.js";
-import { Tooltip as Er } from "./wj-tooltip.js";
-import { VisuallyHidden as Sr } from "./wj-visually-hidden.js";
-const C = {
+import { Row } from "./wj-row.js";
+import { Slider } from "./wj-slider.js";
+import { SplitView } from "./wj-split-view.js";
+import { Textarea } from "./wj-textarea.js";
+import { Thumbnail } from "./wj-thumbnail.js";
+import { Toast } from "./wj-toast.js";
+import { Toggle } from "./wj-toggle.js";
+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",
   dir: "ltr",
-  welcome: "Vitajte",
+  "welcome": "Vitajte",
   "wj.file.upload.button": "Vybrať súbor",
   "wj.file.upload.uploaded": "Nahraných: ",
   "wj.file.upload.from": "z"
 };
-x.registerTranslation(C);
-const S = {
+Localizer.registerTranslation(sk);
+const en = {
   code: "en",
   name: "English",
   dir: "ltr",
-  welcome: "Welcome",
+  "welcome": "Welcome",
   "wj.file.upload.button": "Browse files",
   "wj.file.upload.uploaded": "Uploaded: ",
   "wj.file.upload.from": "from"
 };
-x.registerTranslation(S);
-const T = `:host{color:red}
-`;
-class k extends u {
+Localizer.registerTranslation(en);
+const styles$7 = "/*\n[ WJ Example Element ]\n*/\n:host {\n  color: red;\n}";
+class ExampleElement extends WJElement {
   constructor() {
     super();
-    c(this, "className", "ExampleElement");
+    __publicField(this, "className", "ExampleElement");
   }
   static get cssStyleSheet() {
-    return T;
+    return styles$7;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    this.isShadowRoot = "open", E.setAttributesToElement(this, {
-      test: "test"
+    this.isShadowRoot = "open";
+    WjElementUtils.setAttributesToElement(this, {
+      "test": "test"
     });
   }
-  beforeDraw(t, e, a) {
+  beforeDraw(context, store2, params) {
   }
-  draw(t, e, a) {
-    console.log(t, e, a);
-    let o = document.createDocumentFragment(), r = document.createElement("div");
-    return r.innerHTML = a.text, o.appendChild(r), o;
+  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(t, e, a) {
+  afterDraw(context, store2, params) {
     console.log("afterDraw", this.params);
   }
 }
-customElements.get("wj-example-element") || window.customElements.define("wj-example-element", k);
-const L = `/*!
-* direction.scss
-*/:host{display:inline-block}:host .native-button-group{display:flex;flex-wrap:nowrap;line-height:1}:host slot{display:contents}::slotted(wj-button){margin:0}
-`;
-class O extends u {
+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();
-    c(this, "className", "ButtonGroup");
+    __publicField(this, "className", "ButtonGroup");
   }
   static get cssStyleSheet() {
-    return L;
+    return styles$6;
   }
   static get observedAttributes() {
     return [];
@@ -142,30 +147,35 @@ class O extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, a) {
-    let o = document.createDocumentFragment(), r = document.createElement("div");
-    return r.classList.add("native-button-group"), r.setAttribute("part", "native"), this.slotElement = document.createElement("slot"), r.appendChild(this.slotElement), o.appendChild(r), o;
+  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", O);
-const D = `:host{--wj-option-padding-top: .5rem;--wj-option-padding-bottom: .5rem;--wj-option-highlighted: var(--wj-color-contrast-3);display:block}:host wj-icon{visibility:hidden;margin-inline:.5rem}:host([selected]) wj-icon{visibility:visible}.native-option{display:flex;align-items:center;padding-top:var(--wj-option-padding-top);padding-bottom:var(--wj-option-padding-bottom)}.native-option:hover{background-color:var(--wj-option-highlighted)}::slotted([slot=start]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot=end]){flex:0 0 auto;display:flex;align-items:center;margin-inline:auto .5rem}
-`;
-class R extends u {
+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();
-    c(this, "className", "Option");
+    __publicField(this, "className", "Option");
   }
-  set selected(t) {
-    return t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  set selected(value) {
+    return value ? this.setAttribute("selected", "") : this.removeAttribute("selected");
   }
-  set value(t) {
-    this.setAttribute("value", t);
+  set value(value) {
+    this.setAttribute("value", value);
   }
-  set text(t) {
-    this.innerText = t;
+  set text(value) {
+    this.innerText = value;
   }
   static get cssStyleSheet() {
-    return D;
+    return styles$5;
   }
   static get observedAttributes() {
     return [];
@@ -173,25 +183,34 @@ class R extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, a) {
-    let o = document.createDocumentFragment(), r = document.createElement("div");
-    r.classList.add("native-option"), r.setAttribute("part", "native");
-    let n = document.createElement("wj-icon");
-    n.setAttribute("name", "check");
-    let p = document.createElement("slot");
-    p.setAttribute("name", "start");
-    let d = document.createElement("slot"), l = document.createElement("slot");
-    return l.setAttribute("name", "end"), r.appendChild(n), r.appendChild(p), r.appendChild(d), r.appendChild(l), o.appendChild(r), o;
+  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() {
-    f.addListener(this, "click", "wj:option-change");
+    event.addListener(this, "click", "wj:option-change");
   }
 }
-customElements.get("wj-option") || window.customElements.define("wj-option", R);
-class z extends u {
+customElements.get("wj-option") || window.customElements.define("wj-option", Option);
+class Options extends WJElement {
   constructor() {
     super();
-    c(this, "className", "Options");
+    __publicField(this, "className", "Options");
   }
   static get cssStyleSheet() {
     return styles;
@@ -204,52 +223,66 @@ class z extends u {
   }
   async beforeDraw() {
     this.response = await this.getPages();
-    let t = document.createDocumentFragment();
-    this.response.forEach((e, a) => {
-      let o = document.createElement("wj-option");
-      o.setAttribute("value", e[this.itemValue] || e.value), o.innerText = e[this.itemText] || e.text, t.appendChild(o);
-    }), this.parentElement.appendChild(t), f.dispatchCustomEvent(this, "wj:options-load", {});
-  }
-  async getPages(t) {
-    const e = await fetch(this.url);
-    if (!e.ok)
-      throw new Error(`An error occurred: ${e.status}`);
-    return await e.json();
+    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", z);
-const F = `:host{--wj-select-border-width: 1px;--wj-select-border-style: solid;--wj-select-border-color: var(--wj-border-color);--wj-select-options-border-width: 1px;--wj-select-options-border-style: var(--wj-border-style);--wj-select-options-border-color: var(--wj-border-color);--wj-select-background: var(--wj-background);--wj-select-line-height: 20px;--wj-select-color: var(--wj-color);--wj-select-border-radius: var(--wj-border-radius-medium);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wj-select-border-width);border-style:var(--wj-select-border-style);border-color:var(--wj-select-border-color);border-radius:var(--wj-select-border-radius);padding-inline:.5rem;padding-top:.25rem;padding-bottom:.25rem}.native-select.default .input-wrapper{padding:0;min-height:25px;margin-top:-4px}.native-select.default.focused wj-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wj-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wj-select-line-height)}.native-select.default wj-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .input-wrapper{border-width:var(--wj-select-border-width);border-style:var(--wj-select-border-style);border-color:var(--wj-select-border-color);border-radius:var(--wj-select-border-radius);width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wj-select-background);min-height:28px;color:var(--wj-select-color);line-height:var(--wj-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px;font-weight:400;vertical-align:middle}input{border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0}::placeholder{opacity:1}:host [active] .input-wrapper{border-radius:var(--wj-select-border-radius) var(--wj-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.option-wrapper{border-width:var(--wj-select-options-border-width);border-style:var(--wj-select-options-border-style);border-color:var(--wj-select-options-border-color);border-radius:0 0 var(--wj-select-border-radius) var(--wj-select-border-radius);margin-top:-1px;background:var(--wj-select-background);overflow:auto}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wj-chip{--wj-chip-margin: 0 .25rem 0 0}wj-button{--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem;--wj-button-margin-inline: 0 .25rem}
-`;
-class M extends u {
+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();
-    c(this, "className", "Select");
-    c(this, "optionChange", (t) => {
-      let e = this.getAllOptions();
-      this.hasAttribute("multiple") || (e.forEach((a) => {
-        a.selected = !1, a.removeAttribute("selected");
-      }), this.popup.removeAttribute("active")), t.target.selected = !t.target.hasAttribute("selected"), this.selections(t.target);
+    __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);
     });
-    c(this, "removeChip", (t) => {
-      let e = t.target.option;
-      e.selected = !1, e.removeAttribute("selected"), t.target.parentNode.removeChild(t.target), this.selections(null, 0);
+    __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;
+    this._selected = [];
+    this.counterEl = null;
   }
-  set selected(t) {
-    this._selected = t;
+  set selected(value) {
+    this._selected = value;
   }
   get selected() {
     return this.getSelected();
   }
-  set trigger(t) {
-    this.setAttribute("trigger", t);
+  set trigger(value) {
+    this.setAttribute("trigger", value);
   }
   get trigger() {
     return this.getAttribute("trigger") || "click";
   }
   static get cssStyleSheet() {
-    return F;
+    return styles$4;
   }
   static get observedAttributes() {
     return ["active", "value"];
@@ -257,42 +290,97 @@ class M extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, a) {
-    let o = document.createDocumentFragment();
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
     this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
-    let r = document.createElement("div");
-    r.setAttribute("part", "native"), r.classList.add("native-select", this.variant || "default");
-    let n = document.createElement("div");
-    n.classList.add("wrapper"), n.setAttribute("slot", "anchor");
-    let p = document.createElement("wj-label");
-    p.innerText = this.label || "";
-    let d = document.createElement("div");
-    d.classList.add("input-wrapper");
-    let l = document.createElement("input");
-    l.setAttribute("type", "text"), l.setAttribute("part", "input"), l.setAttribute("autocomplete", "off"), l.setAttribute("readonly", ""), l.setAttribute("placeholder", this.placeholder || "");
-    let h = document.createElement("wj-icon");
-    h.setAttribute("name", "chevron-down"), h.setAttribute("slot", "arrow");
-    let g = document.createElement("div");
-    g.classList.add("chips"), g.innerText = this.placeholder || "";
-    let b = document.createElement("div");
-    b.classList.add("option-wrapper"), b.style.setProperty("height", this.maxHeight || "auto");
-    let j = document.createElement("slot"), w = document.createElement("wj-button");
-    w.setAttribute("fill", "link"), w.setAttribute("part", "clear");
-    let v = document.createElement("wj-icon");
-    v.setAttribute("name", "x"), w.appendChild(v);
-    let m = document.createElement("wj-popup");
-    return m.setAttribute("placement", "bottom-start"), m.setAttribute("manual", ""), m.setAttribute("size", ""), this.hasAttribute("disabled") && m.setAttribute("disabled", ""), this.variant === "standard" ? this.hasAttribute("label") && r.appendChild(p) : n.appendChild(p), d.appendChild(l), this.hasAttribute("multiple") && d.appendChild(g), this.hasAttribute("clearable") && d.appendChild(w), d.appendChild(h), b.appendChild(j), n.appendChild(d), m.appendChild(n), m.appendChild(b), this.trigger === "click" && m.setAttribute("manual", ""), r.appendChild(m), this.native = r, this.popup = m, this.labelElement = p, this.input = l, this.optionsWrapper = b, this.chips = g, this.clear = w, o.appendChild(r), o;
-  }
-  afterDraw(t, e, a) {
-    this.input.addEventListener("focus", (o) => {
-      this.labelElement.classList.add("fade"), this.native.classList.add("focused");
-    }), this.input.addEventListener("blur", (o) => {
-      this.native.classList.remove("focused"), o.target.value || this.labelElement.classList.remove("fade");
-    }), this.addEventListener("wj:option-change", this.optionChange), this.clear.addEventListener("wj:button-click", (o) => {
-      this.getAllOptions().forEach((r) => {
-        r.selected = !1, r.removeAttribute("selected");
-      }), this.selections(), o.stopPropagation();
-    }), this.selections(), this.optionsWrapper.addEventListener("wj:options-load", (o) => {
+    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);
     });
   }
@@ -302,107 +390,160 @@ class M extends u {
   getSelectedOptions() {
     return this.querySelectorAll("wj-option[selected]");
   }
-  getSelected(t) {
-    let e = this.getSelectedOptions();
-    return e = Array.isArray(e) ? e : Array.from(e), e = e.map((a) => ({
-      value: a.value,
-      text: a.textContent.trim()
-    })), e;
-  }
-  selectionChanged(t = null, e = 0) {
-    if (this.hasAttribute("multiple"))
-      this.value = this.selectedOptions.map((a) => a).reverse(), this.placeholder && e === 0 ? (this.chips.innerHTML = this.placeholder, this.input.value = "") : this.counterEl instanceof HTMLElement || e > +this.maxOptions ? this.counter() : t != null && this.chips.appendChild(this.getChip(t));
-    else {
-      let a = (t == null ? void 0 : t.textContent.trim()) || "";
-      this.value = a, this.input.value = a;
+  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(t) {
-    let e = this.getSelectedOptions();
-    this.selectedOptions = Array.isArray(e) ? e : Array.from(e), this.selectedOptions.length >= +this.maxOptions && (this.counterEl = null), this.chips.innerHTML = "", this.selectedOptions.length > 0 ? this.selectedOptions.forEach((a, o) => {
-      this.selectionChanged(a, ++o);
-    }) : this.selectionChanged();
+  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;
+      this.counterEl.remove();
+      this.counterEl = null;
       return;
     }
-    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(t) {
-    let e = document.createElement("wj-chip");
-    e.setAttribute("removable", ""), e.addEventListener("wj:chip-remove", this.removeChip), e.option = t;
-    let a = document.createElement("wj-label");
-    return a.innerText = t.textContent.trim(), e.appendChild(a), e;
+    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", M);
-const N = `:host{--wj-font-size: 10px;--wj-tab-text-transfrom: uppercase;--wj-tab-font-weight: 500;--wj-tab-letter-spacing: .06em;--wj-tab-padding-inline: 1rem;--wj-tab-padding-top: .75rem;--wj-tab-padding-bottom: .75rem;--wj-tab-color-active: var(--wj-color-primary-11);--wj-tab-color-hover: var(--wj-color-primary-1);display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wj-font-family-secondary);font-size:var(--wj-font-size);letter-spacing:var(--wj-tab-letter-spacing);text-transform:var(--wj-tab-text-transfrom);font-weight:var(--wj-tab-font-weight);text-decoration:none;padding-inline:var(--wj-tab-padding-inline);padding-top:var(--wj-tab-padding-top);padding-bottom:var(--wj-tab-padding-bottom);color:var(--wj-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wj-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wj-tab-writing-mode);background:var(--wj-tab-color-active);position:absolute;bottom:var(--wj-tab-bottom);left:var(--wj-tab-start);right:var(--wj-tab-end);top:var(--wj-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}
-`;
-class P extends u {
+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();
-    c(this, "className", "Tab");
-    this.last = !1;
+    __publicField(this, "className", "Tab");
+    this.last = false;
   }
   static get cssStyleSheet() {
-    return N;
+    return styles$3;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, a) {
-    let o = document.createDocumentFragment(), r = document.createElement("a");
-    return r.setAttribute("href", "#" + this.panel), r.innerHTML = this.innerHTML, o.appendChild(r), o;
+  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() {
-    f.addListener(this, "click", "wj:tab-change");
+    event.addListener(this, "click", "wj:tab-change");
   }
 }
-customElements.get("wj-tab") || window.customElements.define("wj-tab", P);
-const I = `:host{--wj-tab-top: 0;--wj-tab-start: 0;--wj-tab-end: 0;--wj-tab-bottom: 0}.native-tab-group{display:flex;flex-direction:column;overflow:hidden;position:relative}.native-tab-group>header{display:flex;flex-direction:column}.native-tab-group>header>nav{display:flex}.native-tab-group>section{width:100%}.native-tab-group>section>article{scroll-snap-align:start;overflow-y:auto;overscroll-behavior-y:contain}:host([variant=top]){--wj-tab-top: auto !important;--wj-tab-writing-mode: horizontal-tb}:host([variant=top]) .native-tab-group{flex-direction:column}:host([variant=top]) nav{border-bottom:1px solid var(--wj-border-color)}:host([variant=start]){--wj-tab-start: auto !important;--wj-tab-writing-mode: vertical-rl}:host([variant=start]) .native-tab-group{flex-direction:row}:host([variant=start]) nav{flex-direction:column;border-right:1px solid var(--wj-border-color)}:host([variant=end]){--wj-tab-writing-mode: vertical-rl}:host([variant=end]) .native-tab-group{flex-direction:row-reverse}:host([variant=end]) nav{flex-direction:column;border-left:1px solid var(--wj-border-color)}:host([variant=bottom]){--wj-tab-bottom: auto !important;--wj-tab-writing-mode: horizontal-tb}:host([variant=bottom]) .native-tab-group{flex-direction:column-reverse}:host([variant=bottom]) nav{border-top:1px solid var(--wj-border-color)}
-`;
-class $ extends u {
+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();
-    c(this, "className", "TabGroup");
+    __publicField(this, "className", "TabGroup");
   }
   static get cssStyleSheet() {
-    return I;
+    return styles$2;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, a) {
-    let o = document.createDocumentFragment(), r = document.createElement("div");
-    r.classList.add("native-tab-group");
-    let n = document.createElement("header");
-    n.classList.add("scroll-snap-x");
-    let p = document.createElement("nav"), d = document.createElement("section"), l = document.createElement("slot"), h = document.createElement("slot");
-    return h.setAttribute("name", "nav"), n.appendChild(p), p.appendChild(h), d.appendChild(l), r.appendChild(n), r.appendChild(d), o.appendChild(r), o;
+  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 t = this.getActiveTab(), e = t ? t[0].name : this.getTabAll()[0].panel;
-    this.setActiveTab(e), this.addEventListener("wj:tab-change", (a) => {
-      if (a.detail.context.hasAttribute("disabled"))
-        return !1;
-      this.setActiveTab(a.detail.context.panel);
+    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((t) => {
-      t.removeAttribute("active");
-    }), this.getTabAll().forEach((t) => {
-      t.removeAttribute("active");
+    this.getPanelAll().forEach((el) => {
+      el.removeAttribute("active");
+    });
+    this.getTabAll().forEach((el) => {
+      el.removeAttribute("active");
     });
   }
-  setActiveTab(t) {
-    this.removeActiveTab(), this.querySelector(`[panel="${t}"]`).setAttribute("active", ""), this.querySelector(`[name="${t}"]`).setAttribute("active", "");
+  setActiveTab(tab) {
+    this.removeActiveTab();
+    this.querySelector(`[panel="${tab}"]`).setAttribute("active", "");
+    this.querySelector(`[name="${tab}"]`).setAttribute("active", "");
   }
   getActiveTab() {
-    let t = Array.from(this.context.querySelectorAll("[active]"));
-    return t.length > 0 ? t[0] : null;
+    let activeTabs = Array.from(this.context.querySelectorAll("[active]"));
+    return activeTabs.length > 0 ? activeTabs[0] : null;
   }
   getTabAll() {
     return this.context.querySelector('[name="nav"]').assignedElements();
@@ -411,107 +552,108 @@ class $ extends u {
     return Array.from(this.querySelectorAll("wj-tab-panel"));
   }
 }
-customElements.get("wj-tab-group") || window.customElements.define("wj-tab-group", $);
-const B = `:host{display:none;flex-wrap:wrap;align-items:center;padding:1rem}:host([active]){display:block}
-`;
-class H extends u {
+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();
-    c(this, "className", "TabPanel");
+    __publicField(this, "className", "TabPanel");
   }
   static get cssStyleSheet() {
-    return B;
+    return styles$1;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, a) {
-    let o = document.createDocumentFragment(), r = document.createElement("slot");
-    return o.appendChild(r), o;
+  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", H);
+customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", TabPanel);
 export {
-  at as Animation,
-  rt as Aside,
-  st as Avatar,
-  lt as Badge,
-  ct as Breadcrumb,
-  mt as Breadcrumbs,
-  ht as Button,
-  wt as ButtonGroup,
-  ft as Card,
-  xt as CardContent,
-  At as CardControls,
-  Et as CardHeader,
-  St as CardSubtitle,
-  kt as CardTitle,
-  Ot as Carousel,
-  Rt as CarouselItem,
-  Ft as Checkbox,
-  Nt as Chip,
-  It as Col,
-  Bt as ColorPicker,
-  Wt as Container,
-  Gt as CopyButton,
-  Ut as Dialog,
-  Jt as Divider,
-  Qt as Dropdown,
-  k as ExampleElement,
-  Yt as FileUpload,
-  te as FileUploadItem,
-  re as Footer,
-  ae as FormatDigital,
-  se as Grid,
-  le as Header,
-  ce as Icon,
-  me as IconPicker,
-  he as Img,
-  we as ImgComparer,
-  fe as InfiniteScroll,
-  xe as Input,
-  Ae as InputFile,
-  Ee as Item,
-  Se as Label,
-  ke as List,
-  x as Localizer,
-  Oe as Main,
-  Re as Masonry,
-  Fe as Menu,
-  Ne as MenuButton,
-  Ie as MenuItem,
-  Be as MenuLabel,
-  O as NavMenu,
-  R as Option,
-  z as Options,
-  We as Popup,
-  Ge as ProgressBar,
-  Ue as Radio,
-  Je as RadioGroup,
-  Qe as Rate,
-  Ye as RelativeTime,
-  tr as Route,
-  ar as RouterLink,
-  rr as Routerx,
-  sr as Row,
-  M as Select,
-  lr as Slider,
-  cr as SplitView,
-  P as Tab,
-  $ as TabGroup,
-  H as TabPanel,
-  mr as Textarea,
-  hr as Thumbnail,
-  wr as Toast,
-  fr as Toggle,
-  xr as Toolbar,
-  Ar as ToolbarAction,
-  Er as Tooltip,
-  Sr as VisuallyHidden,
-  u as WJElement,
-  X as bindRouterLinks,
-  J as defaultStoreActions,
-  tt as fetchAndParseCSS,
-  K as store,
-  Y as withRouterLinks
+  Animation,
+  Aside,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Breadcrumbs,
+  Button,
+  ButtonGroup,
+  Card,
+  CardContent,
+  CardControls,
+  CardHeader,
+  CardSubtitle,
+  CardTitle,
+  Carousel,
+  CarouselItem,
+  Checkbox,
+  Chip,
+  Col,
+  ColorPicker,
+  Container,
+  CopyButton,
+  Dialog,
+  Divider,
+  Dropdown,
+  ExampleElement,
+  FileUpload,
+  FileUploadItem,
+  Footer,
+  FormatDigital,
+  Grid,
+  Header,
+  Icon,
+  IconPicker,
+  Img,
+  ImgComparer,
+  InfiniteScroll,
+  Input,
+  InputFile,
+  Item,
+  Label,
+  List,
+  Localizer,
+  Main,
+  Masonry,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuLabel,
+  NavMenu,
+  Option,
+  Options,
+  Popup,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  Rate,
+  RelativeTime,
+  Route,
+  RouterLink,
+  Routerx,
+  Row,
+  Select,
+  Slider,
+  SplitView,
+  Tab,
+  TabGroup,
+  TabPanel,
+  Textarea,
+  Thumbnail,
+  Toast,
+  Toggle,
+  Toolbar,
+  ToolbarAction,
+  Tooltip,
+  VisuallyHidden,
+  WJElement,
+  b as bindRouterLinks,
+  defaultStoreActions,
+  fetchAndParseCSS,
+  store,
+  w as withRouterLinks
 };