wj-elements 0.0.5 → 0.0.6

package/dist/animation-2266bd6e.js

@@ -0,0 +1,103 @@
+var l = Object.defineProperty;
+var c = (s, e, t) => e in s ? l(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var m = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
+import f from "./wj-element.js";
+let o = [];
+function h(s) {
+  const e = /@keyframes\s+([\w-]+)\s*{([\s\S]+?})\s*}/g;
+  let t, n = [];
+  for (; (t = e.exec(s)) !== null; ) {
+    let i = t[1], a = t[2].trim(), r = u(a);
+    n.push({ name: i, keyframes: r });
+  }
+  return n;
+}
+function u(s) {
+  const e = /([\d%]+)\s*{([\s\S]+?)}/g;
+  let t, n = [];
+  for (; (t = e.exec(s)) !== null; ) {
+    let i = parseFloat(t[1]) / 100, a = d(t[2]), r = {
+      offset: i,
+      ...a
+    };
+    n.push(r);
+  }
+  return n.sort((i, a) => i.offset - a.offset), n;
+}
+function d(s) {
+  const e = {};
+  return s.split(";").forEach((t) => {
+    const [n, i] = t.split(":").map((a) => a.trim());
+    n && i && (n === "animation-timing-function" ? e.easing = i : e[n] = i);
+  }), e;
+}
+async function p(s) {
+  try {
+    if (o.length > 0)
+      return o;
+    const t = await (await fetch(s)).text();
+    return o = h(t), o;
+  } catch (e) {
+    console.error("Error:", e);
+  }
+}
+const y = "";
+class g extends f {
+  constructor() {
+    super();
+    m(this, "className", "Animation");
+    this._animations = [];
+  }
+  set animations(t) {
+    this._animations = t;
+  }
+  get animations() {
+    return this._animations;
+  }
+  static get cssStyleSheet() {
+    return y;
+  }
+  static get observedAttributes() {
+    return ["name"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, n, i) {
+    let a = document.createDocumentFragment(), r = document.createElement("slot");
+    return a.appendChild(r), this.slotEl = r, a;
+  }
+  async afterDraw() {
+    this.destroyAnimation(), this.animations = await this.getAnimationsArray();
+    const t = this.animations.find((i) => i.name === this.name), n = this.slotEl.assignedElements()[0];
+    this.animation = n.animate(t.keyframes, {
+      delay: +this.delay || 0,
+      // zdrzanie pred zacatim animacie
+      endDelay: +this.endDelay || 0,
+      // zdrzanie po skoncení animacie
+      fill: this.fill || "auto",
+      // vyplnenie animace (pred a po animacii)
+      duration: +this.duration || 1e3,
+      // doba trvania animacie v milisekundách
+      iterationStart: +this.iterationStart || 0,
+      // počet opakování animacie
+      iterations: this.iterations || 1 / 0,
+      // počet opakování animacie
+      direction: this.direction || "normal",
+      // smer animaciee (zpat a dopredu)
+      easing: this.easing || "linear"
+      // typ spomalenia (rychlost zmen v čase)
+    }), this.animation.play();
+  }
+  destroyAnimation() {
+    this.animation && this.animation.cancel();
+  }
+  async getAnimationsArray() {
+    return await p("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
+  }
+}
+customElements.get("wj-animation") || window.customElements.define("wj-animation", g);
+export {
+  g as A,
+  p as f
+};

package/dist/localize-762a9f0f.js

@@ -0,0 +1,43 @@
+const n = /* @__PURE__ */ new Map();
+class s {
+  constructor(t) {
+    this.element = t, this.languages = n, this.lang = this.element.lang || document.documentElement.lang || "en", this.dir = this.element.dir || document.documentElement.dir || "ltr", this.setLanguage();
+  }
+  // Nastavenie aktuálneho jazyka
+  setLanguage() {
+    this.languages.has(this.lang) ? this.currentLang = this.lang : console.error(`Language "${this.lang}" not loaded.`);
+  }
+  // Vyhľadávanie prekladu podľa kľúča
+  translate(t) {
+    const e = this.languages.get(this.currentLang);
+    return e && e[t] || t;
+  }
+  // Formátovanie čísla podľa aktuálneho jazyka
+  formatNumber(t, e) {
+    return new Intl.NumberFormat(this.currentLang, e).format(t);
+  }
+  // Formátovanie dátumu podľa aktuálneho jazyka
+  formatDate(t) {
+    return new Intl.DateTimeFormat(this.currentLang).format(new Date(t));
+  }
+  relativeTime(t = 0, e, r = { numeric: "auto" }) {
+    return new Intl.RelativeTimeFormat(this.currentLang, r).format(t, e);
+  }
+}
+function i(...a) {
+  a.map((t) => {
+    const e = t.code.toLowerCase();
+    n.has(e) ? n.set(e, { ...n.get(e), ...t }) : n.set(e, t);
+  });
+}
+class o extends s {
+  constructor(t) {
+    super(t);
+  }
+  static registerTranslation(...t) {
+    i(...t);
+  }
+}
+export {
+  o as L
+};

package/dist/wj-animation.js

@@ -0,0 +1,6 @@
+import "./wj-element.js";
+import { A as t } from "./animation-2266bd6e.js";
+import "./wj-store.js";
+export {
+  t as Animation
+};

package/dist/wj-aside.js

@@ -1,19 +1,17 @@
 var d = Object.defineProperty;
-var a = (e, t, s) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var o = (e, t, s) => (a(e, typeof t != "symbol" ? t + "" : t, s), s);
-import n from "./wj-element.js";
+var a = (e, t, o) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var s = (e, t, o) => (a(e, typeof t != "symbol" ? t + "" : t, o), o);
+import h from "./wj-element.js";
 import "./wj-store.js";
-const h = `/*!
-* direction.scss
-*/:host{--wj-aside-width: "100px";--wj-aside-top: 0;--wj-aside-border-color: var(--wj-border-color);--wj-aside-border-width: 0 1px 0 0;--wj-aside-border-style: solid;box-sizing:border-box;flex-shrink:0;overflow:auto;border-color:var(--wj-aside-border-color);border-width:var(--wj-aside-border-width);border-style:var(--wj-aside-border-style)}:host(.open){display:block!important}@media (min-width: 768px){:host([fixed]){position:fixed;width:var(--wj-aside-width);top:var(--wj-aside-top);height:calc(100% - var(--wj-aside-top))}}@media (max-width: 768px){:host{display:none}:host([variant=top-start]){position:fixed;top:0;left:0;width:80%;height:100%;z-index:9999;background-color:#fff}}
+const n = `:host{--wj-aside-width: "100px";--wj-aside-top: 0;--wj-aside-border-color: var(--wj-border-color);--wj-aside-border-width: 0 1px 0 0;--wj-aside-border-style: solid;box-sizing:border-box;flex-shrink:0;overflow:auto;border-color:var(--wj-aside-border-color);border-width:var(--wj-aside-border-width);border-style:var(--wj-aside-border-style)}:host(.open){display:block!important}@media (min-width: 768px){:host([fixed]){position:fixed;width:var(--wj-aside-width);top:var(--wj-aside-top);height:calc(100% - var(--wj-aside-top))}}@media (max-width: 768px){:host{display:none}:host([variant=top-start]){position:fixed;top:0;left:0;width:80%;height:100%;z-index:9999;background-color:#fff}}
 `;
-class w extends n {
+class w extends h {
   constructor() {
     super();
-    o(this, "className", "Aside");
+    s(this, "className", "Aside");
   }
   static get cssStyleSheet() {
-    return h;
+    return n;
   }
   static get observedAttributes() {
     return [];
@@ -21,7 +19,7 @@ class w extends n {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(s, l, p) {
+  draw(o, l, p) {
     let i = document.createDocumentFragment();
     this.width && this.style.setProperty("--wj-aside-width", this.width), this.top && this.hasAttribute("fixed") && this.style.setProperty("--wj-aside-top", this.top);
     let r = document.createElement("slot");

package/dist/wj-avatar.js

@@ -1,52 +1,50 @@
 var d = Object.defineProperty;
 var h = (r, a, t) => a in r ? d(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
-var l = (r, a, t) => (h(r, typeof a != "symbol" ? a + "" : a, t), t);
+var n = (r, a, t) => (h(r, typeof a != "symbol" ? a + "" : a, t), t);
 import v from "./wj-element.js";
 import "./wj-store.js";
 function w(r, a = 30, t = 80) {
-  let i = r, s = 0;
-  for (let e = 0; e < (i == null ? void 0 : i.length); e++)
-    s = i.charCodeAt(e) + ((s << 5) - s);
+  let o = r, s = 0;
+  for (let e = 0; e < (o == null ? void 0 : o.length); e++)
+    s = o.charCodeAt(e) + ((s << 5) - s);
   return "hsl(" + s % 360 + ", " + a + "%, " + t + "%)";
 }
 function c(r, a = 2) {
-  let t = r.split(" "), i = t[0].substring(0, 1).toUpperCase();
-  return t.length > 1 && a > 1 && (i += t[t.length - 1].substring(0, 1).toUpperCase()), i;
+  let t = r.split(" "), o = t[0].substring(0, 1).toUpperCase();
+  return t.length > 1 && a > 1 && (o += t[t.length - 1].substring(0, 1).toUpperCase()), o;
 }
-const g = `/*!
-* direction.scss
-*/:host{--wj-avatar-width: 32px;--wj-avatar-height: 32px;--wj-avatar-font-size: .75rem;--wj-avatar-font-weight: 400;--wj-avatar-color: inherit;--wj-avatar-background-color: rgba(33, 33, 33, .17);--wj-avatar-border-radius: 50%;--wj-avatar-border-color: transparent;--wj-avatar-border-width: 1px;--wj-avatar-border-style: solid;display:inline-block;width:var(--wj-avatar-width);height:var(--wj-avatar-height);font-size:var(--wj-avatar-font-size);font-weight:var(--wj-avatar-font-weight);color:var(--wj-avatar-color)}:host .native-avatar{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--wj-avatar-border-radius);background-color:var(--wj-avatar-background-color)}::slotted(wj-img),::slotted(img){border-radius:var(--wj-avatar-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host(.wj-avatar-border){border-color:var(--wj-avatar-border-color);border-width:var(--wj-avatar-border-width);border-style:var(--wj-avatar-border-style)}:host(.wj-avatar-small){--wj-avatar-width: 24px;--wj-avatar-height: 24px}:host(.wj-avatar-large){--wj-avatar-width: 48px;--wj-avatar-height: 48px}
+const j = `:host{--wj-avatar-width: 32px;--wj-avatar-height: 32px;--wj-avatar-font-size: .75rem;--wj-avatar-font-weight: 400;--wj-avatar-color: inherit;--wj-avatar-background-color: var(--wj-color-contrast-low);--wj-avatar-border-radius: 50%;--wj-avatar-border-color: transparent;--wj-avatar-border-width: 1px;--wj-avatar-border-style: solid;display:inline-block;width:var(--wj-avatar-width);height:var(--wj-avatar-height);font-size:var(--wj-avatar-font-size);font-weight:var(--wj-avatar-font-weight);color:var(--wj-avatar-color)}:host .native-avatar{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--wj-avatar-border-radius);background-color:var(--wj-avatar-background-color)}::slotted(wj-img),::slotted(img){border-radius:var(--wj-avatar-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host(.wj-avatar-border){border-color:var(--wj-avatar-border-color);border-width:var(--wj-avatar-border-width);border-style:var(--wj-avatar-border-style)}:host(.wj-avatar-small){--wj-avatar-width: 24px;--wj-avatar-height: 24px}:host(.wj-avatar-large){--wj-avatar-width: 48px;--wj-avatar-height: 48px}
 `;
-class j extends v {
+class g extends v {
   constructor() {
     super();
-    l(this, "className", "Avatar");
+    n(this, "className", "Avatar");
   }
   static get cssStyleSheet() {
-    return g;
+    return j;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, i, s) {
-    let n = document.createDocumentFragment(), o = document.createElement("div");
-    if (o.setAttribute("part", "native"), o.classList.add("native-avatar"), this.size && this.classList.add("wj-avatar-" + this.size), this.isImage()) {
+  draw(t, o, s) {
+    let l = document.createDocumentFragment(), i = document.createElement("div");
+    if (i.setAttribute("part", "native"), i.classList.add("native-avatar"), this.size && this.classList.add("wj-avatar-" + this.size), this.isImage()) {
       let e = document.createElement("slot");
-      o.appendChild(e);
+      i.appendChild(e);
     } else if (this.hasAttribute("initials")) {
       let e = c(this.label);
-      this.setAttribute("style", `--wj-avatar-background-color: ${w(e)}`), o.innerText = e;
+      this.setAttribute("style", `--wj-avatar-background-color: ${w(e)}`), i.innerText = e;
     } else {
       let e = document.createElement("slot");
-      e.setAttribute("name", "icon"), o.appendChild(e);
+      e.setAttribute("name", "icon"), i.appendChild(e);
     }
-    return n.appendChild(o), n;
+    return l.appendChild(i), l;
   }
   isImage() {
     return this.getElementsByTagName("wj-img").length > 0;
   }
 }
-customElements.get("wj-avatar") || window.customElements.define("wj-avatar", j);
+customElements.get("wj-avatar") || window.customElements.define("wj-avatar", g);
 export {
-  j as Avatar
+  g as Avatar
 };

package/dist/wj-badge.js

@@ -1,31 +1,31 @@
-var n = Object.defineProperty;
-var c = (t, o, r) => o in t ? n(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r;
-var s = (t, o, r) => (c(t, typeof o != "symbol" ? o + "" : o, r), r);
-import l from "./wj-element.js";
+var e = Object.defineProperty;
+var l = (r, o, t) => o in r ? e(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var c = (r, o, t) => (l(r, typeof o != "symbol" ? o + "" : o, t), t);
+import n from "./wj-element.js";
 import "./wj-store.js";
-const i = `/*!
+const w = `/*!
 * direction.scss
-*/:host(.wj-color-primary){--wj-color-base: #7252D3 !important;--wj-color-contrast: #fff !important}:host(.wj-color-complete){--wj-color-base: #0072EC !important;--wj-color-contrast: #fff !important}:host(.wj-color-success){--wj-color-base: #19AD79 !important;--wj-color-contrast: #fff !important}:host(.wj-color-warning){--wj-color-base: #FFd945 !important;--wj-color-contrast: #4b4b4b !important}:host(.wj-color-danger){--wj-color-base: #D83C31 !important;--wj-color-contrast: #fff !important}:host(.wj-color-info){--wj-color-base: #3B4752 !important;--wj-color-contrast: #fff !important}:host(.wj-color-menu){--wj-color-base: #f4f4f4 !important;--wj-color-contrast: #4b4b4b !important}:host{--wj-chip-border-radius: 100px;text-shadow:none;font-family:Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:600;background-color:#e0e0e0;font-size:11px;padding-left:6px;padding-right:6px;color:#4b4b4b;border-radius:10px}:host(.wj-color){background-color:var(--wj-color-base, red);color:var(--wj-color-contrast)}
+*/:host(.wj-color-primary){--wj-color-base: var(--wj-color-primary) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-complete){--wj-color-base: var(--wj-color-complete) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-success){--wj-color-base: var(--wj-color-success) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-warning){--wj-color-base: var(--wj-color-warning) !important;--wj-color-contrast: var(--wj-color-contrast-high) !important}:host(.wj-color-danger){--wj-color-base: var(--wj-color-danger) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-info){--wj-color-base: var(--wj-color-info) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-menu){--wj-color-base: var(--wj-color-contrast-lower) !important;--wj-color-contrast: var(--wj-color-contrast-high) !important}:host{--wj-chip-border-radius: 100px;text-shadow:none;font-family:var(--wj-font-family);font-weight:600;background-color:var(--wj-color-contrast-low);font-size:11px;padding-left:6px;padding-right:6px;color:var(--wj-color-contrast-high);border-radius:10px}:host(.wj-color){background-color:var(--wj-color-base, red);color:var(--wj-color-contrast)}
 `;
-class m extends l {
+class i extends n {
   constructor() {
     super();
-    s(this, "className", "Badge");
+    c(this, "className", "Badge");
   }
   static get cssStyleSheet() {
-    return i;
+    return w;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(r, w, p) {
-    let e = document.createDocumentFragment(), a = document.createElement("slot");
-    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), e.appendChild(a), e;
+  draw(t, j, m) {
+    let a = document.createDocumentFragment(), s = document.createElement("slot");
+    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), a.appendChild(s), a;
   }
 }
-let b = "true";
-customElements.get("wj-badge") || window.customElements.define("wj-badge", m);
+let g = "true";
+customElements.get("wj-badge") || window.customElements.define("wj-badge", i);
 export {
-  m as Badge,
-  b as __esModule
+  i as Badge,
+  g as __esModule
 };

package/dist/wj-breadcrumb.js

@@ -1,11 +1,9 @@
 var h = Object.defineProperty;
 var b = (o, a, e) => a in o ? h(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
 var p = (o, a, e) => (b(o, typeof a != "symbol" ? a + "" : a, e), e);
-import w, { WjElementUtils as l, event as g } from "./wj-element.js";
+import w, { WjElementUtils as l, event as j } from "./wj-element.js";
 import "./wj-store.js";
-const j = `/*!
-* direction.scss
-*/:host{--wj-breadcrumb-a: rgba(33, 33, 33, .81);--wj-breadcrumb-a-hover: rgba(33, 33, 33, .62);display:flex;flex:0 0 auto;align-items:center;line-height:1.5}:host(.collapsed){display:none}.native-breadcrumb{display:flex;align-items:center;width:100%;outline:none;background:inherit;padding:.25rem .75rem;color:var(--wj-breadcrumb-a);text-decoration:none}.native-breadcrumb.hidden{display:none}.native-breadcrumb.active{font-weight:700}.native-breadcrumb:hover{color:var(--wj-breadcrumb-a-hover)}button{margin-inline:.75rem;border:0 solid transparent;border-radius:3px;background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.separator{display:inline-flex;align-items:center}::slotted([slot=start]){margin-inline:0 .5rem}::slotted([slot=end]){margin-inline:.5rem 0}
+const g = `:host{--wj-breadcrumb-a: var(--wj-color-contrast-high);--wj-breadcrumb-a-hover: var(--wj-color-contrast-medium);display:flex;flex:0 0 auto;align-items:center;line-height:1.5}:host(.collapsed){display:none}.native-breadcrumb{display:flex;align-items:center;width:100%;outline:none;background:inherit;padding:.25rem .75rem;color:var(--wj-breadcrumb-a);text-decoration:none}.native-breadcrumb.hidden{display:none}.native-breadcrumb.active{font-weight:700}.native-breadcrumb:hover{color:var(--wj-breadcrumb-a-hover)}button{margin-inline:.75rem;border:0 solid transparent;border-radius:3px;background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.separator{display:inline-flex;align-items:center}::slotted([slot=start]){margin-inline:0 .5rem}::slotted([slot=end]){margin-inline:.5rem 0}
 `;
 class v extends w {
   constructor() {
@@ -27,7 +25,7 @@ class v extends w {
     this._collapsedVariant = e || this.parentElement.collapsedVariant;
   }
   static get cssStyleSheet() {
-    return j;
+    return g;
   }
   static get observedAttributes() {
     return ["show-collapsed-indicator", "collapsed", "last"];
@@ -60,26 +58,24 @@ class v extends w {
     return this.collapsedVariant === "DROPDOWN" ? e = this.collapseDropdown() : e = this.collapseButton(), e;
   }
   collapseDropdown() {
-    console.log("DROPDOWN");
     let e = document.createElement("wj-dropdown");
     e.setAttribute("placement", "bottom"), e.setAttribute("offset", "10");
     let r = document.createElement("wj-button");
-    r.setAttribute("slot", "trigger"), r.setAttribute("variant", "link"), r.innerHTML = '<wj-icon name="dots"></wj-icon>';
+    r.setAttribute("slot", "trigger"), r.setAttribute("fill", "link"), r.innerHTML = '<wj-icon name="dots"></wj-icon>';
     let t = document.createElement("wj-menu");
-    return t.setAttribute("variant", "context"), e.appendChild(r), e.appendChild(t), e.innerHTML = `<wj-button slot="trigger" variant="link">
+    return t.setAttribute("variant", "context"), e.appendChild(r), e.appendChild(t), e.innerHTML = `<wj-button slot="trigger" fill="link">
             <wj-icon name="dots"></wj-icon>
         </wj-button>
         <wj-menu variant="context">
-            <wj-menu-item>Tralala</wj-menu-item>
+            <wj-menu-item>Test 0</wj-menu-item>
             <wj-menu-item>Test 1</wj-menu-item>
             <wj-menu-item>Test 2</wj-menu-item>
         </wj-menu>`, this.parentElement.querySelectorAll("wj-breadcrumb").forEach((s) => {
-      console.log(s);
     }), e;
   }
   collapseButton() {
     let e = document.createElement("button");
-    return e.setAttribute("aria-label", "Show more breadcrumbs"), e.setAttribute("part", "collapsed-indicator"), e.innerHTML = '<wj-icon name="dots"></wj-icon>', g.addListener(e, "click", null, (r) => {
+    return e.setAttribute("aria-label", "Show more breadcrumbs"), e.setAttribute("part", "collapsed-indicator"), e.innerHTML = '<wj-icon name="dots"></wj-icon>', j.addListener(e, "click", null, (r) => {
       this.native.classList.remove("hidden"), e.remove(), this.parentElement.querySelectorAll("wj-breadcrumb").forEach((t) => {
         t.classList.remove("collapsed");
       }), r.stopPropagation();

package/dist/wj-breadcrumbs.js

@@ -1,16 +1,14 @@
-var n = Object.defineProperty;
-var u = (r, t, e) => t in r ? n(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var i = (r, t, e) => (u(r, typeof t != "symbol" ? t + "" : t, e), e);
+var i = Object.defineProperty;
+var n = (r, t, e) => t in r ? i(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var u = (r, t, e) => (n(r, typeof t != "symbol" ? t + "" : t, e), e);
 import d from "./wj-element.js";
 import "./wj-store.js";
-const p = `/*!
-* direction.scss
-*/:host{display:flex;flex-wrap:wrap;align-items:center}
+const p = `:host{display:flex;flex-wrap:wrap;align-items:center}
 `;
 class b extends d {
   constructor() {
     super();
-    i(this, "className", "Breadcrumbs");
+    u(this, "className", "Breadcrumbs");
     this.last = !1;
   }
   static get cssStyleSheet() {

package/dist/wj-button-group.js

@@ -1,16 +1,14 @@
 var c = Object.defineProperty;
-var d = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var u = (o, e, t) => (d(o, typeof e != "symbol" ? e + "" : e, t), t);
-import p from "./wj-element.js";
+var p = (n, e, t) => e in n ? c(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var i = (n, e, t) => (p(n, typeof e != "symbol" ? e + "" : e, t), t);
+import d from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
-* 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}
+const m = `: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!important}
 `;
-class g extends p {
+class g extends d {
   constructor() {
     super();
-    u(this, "className", "ButtonGroup");
+    i(this, "className", "ButtonGroup");
   }
   static get cssStyleSheet() {
     return m;
@@ -22,14 +20,14 @@ class g extends p {
     this.isShadowRoot = "open";
   }
   draw(t, l, a) {
-    let s = document.createDocumentFragment(), n = document.createElement("div");
-    return n.classList.add("native-button-group"), n.setAttribute("part", "native"), this.slotElement = document.createElement("slot"), n.appendChild(this.slotElement), s.appendChild(n), s;
+    let s = document.createDocumentFragment(), o = document.createElement("div");
+    return o.classList.add("native-button-group"), o.setAttribute("part", "native"), this.slotElement = document.createElement("slot"), o.appendChild(this.slotElement), s.appendChild(o), s;
   }
   afterDraw(t, l, a) {
     const s = [...this.slotElement.assignedElements({ flatten: !0 })];
-    s.forEach((n) => {
-      let i = s.indexOf(n), r = this.findButton(n);
-      r && (r.classList.add("wj-button-group-button"), r.classList.toggle("wj-button-group-first", i === 0), r.classList.toggle("wj-button-group-inner", i > 0 && i < s.length - 1), r.classList.toggle("wj-button-group-last", i === s.length - 1));
+    s.forEach((o) => {
+      let u = s.indexOf(o), r = this.findButton(o);
+      r && (r.classList.add("wj-button-group-button"), r.classList.toggle("wj-button-group-first", u === 0), r.classList.toggle("wj-button-group-inner", u > 0 && u < s.length - 1), r.classList.toggle("wj-button-group-last", u === s.length - 1));
     });
   }
   findButton(t) {

package/dist/wj-button.js

@@ -1,17 +1,15 @@
 var d = Object.defineProperty;
-var c = (o, n, t) => n in o ? d(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
-var u = (o, n, t) => (c(o, typeof n != "symbol" ? n + "" : n, t), t);
-import w, { event as a } from "./wj-element.js";
+var b = (t, e, o) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var c = (t, e, o) => (b(t, typeof e != "symbol" ? e + "" : e, o), o);
+import j, { WjElementUtils as h, event as i } from "./wj-element.js";
 import "./wj-store.js";
-const b = (o) => o === "false" || o === "null" || o === "NaN" || o === "undefined" || o === "0" ? !1 : !!o, j = `/*!
-* direction.scss
-*/:host(.wj-button-solid.wj-color-primary){--wj-button-background-color: #7252D3;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-primary){--wj-button-border-color: #7252d3;--wj-button-color: #7252D3}:host(.wj-button-solid.wj-color-complete){--wj-button-background-color: #0072EC;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-complete){--wj-button-border-color: #0072ec;--wj-button-color: #0072EC}:host(.wj-button-solid.wj-color-success){--wj-button-background-color: #19AD79;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-success){--wj-button-border-color: #19ad79;--wj-button-color: #19AD79}:host(.wj-button-solid.wj-color-warning){--wj-button-background-color: #FFd945;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-warning){--wj-button-border-color: #ffd945;--wj-button-color: #FFd945}:host(.wj-button-solid.wj-color-danger){--wj-button-background-color: #D83C31;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-danger){--wj-button-border-color: #d83c31;--wj-button-color: #D83C31}:host(.wj-button-solid.wj-color-neutral){--wj-button-background-color: #212121;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-neutral){--wj-button-border-color: #212121;--wj-button-color: #212121}:host(.wj-button-solid.wj-color-default){--wj-button-background-color: #fff;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-default){--wj-button-border-color: rgba(33, 33, 33, .17);--wj-button-background-color: #fff;--wj-button-color: #4b4b4b}:host{--wj-button-border-radius: 4px;--wj-button-border-width: 1px;--wj-button-border-style: solid;--wj-button-border-color: rgba(33, 33, 33, .17);--wj-button-margin-inline: 0;--wj-padding-top: .4rem;--wj-padding-start: .5rem;--wj-padding-end: .5rem;--wj-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wj-button-margin-inline)}:host(.wj-button-group-button){display:block}.button-native{font-family:var(--wj-font-family);font-size:var(--wj-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;overflow:hidden;border-width:var(--wj-button-border-width);border-style:var(--wj-button-border-style);border-color:var(--wj-button-border-color);outline:none;background-color:var(--wj-button-background-color);color:var(--wj-button-color);line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wj-button-border-radius);padding-top:var(--wj-padding-top);padding-bottom:var(--wj-padding-bottom);padding-left:var(--wj-padding-start);padding-right:var(--wj-padding-end)}@media (any-hover: hover){:host(.wj-button-solid:hover){--wj-button-background-color: #845ae0;--wj-button-border-color: #7252D3;--wj-button-color: #fff}:host(.wj-button-outline:hover){--wj-button-background-color: rgba(114, 82, 211, .1);--wj-button-border-color: #7252D3;--wj-button-color: #7252D3}:host(.wj-button-solid.wj-color-complete:hover){--wj-button-background-color: #0f8ff9;--wj-button-border-color: #0072EC;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-complete:hover){--wj-button-background-color: rgba(0, 114, 236, .1);--wj-button-border-color: #0072EC;--wj-button-color: #0072EC}:host(.wj-button-solid.wj-color-success:hover){--wj-button-background-color: #26bf93;--wj-button-border-color: #19AD79;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-success:hover){--wj-button-background-color: rgba(25, 173, 121, .1);--wj-button-border-color: #19AD79;--wj-button-color: #19AD79}:host(.wj-button-solid.wj-color-warning:hover){--wj-button-background-color: #ffe858;--wj-button-border-color: #FFd945;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-warning:hover){--wj-button-background-color: rgba(255, 217, 69, .1);--wj-button-border-color: #FFd945;--wj-button-color: #FFd945}:host(.wj-button-solid.wj-color-danger:hover){--wj-button-background-color: #e6533c;--wj-button-border-color: #D83C31;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-danger:hover){--wj-button-background-color: rgba(216, 60, 49, .1);--wj-button-border-color: #D83C31;--wj-button-color: #D83C31}:host(.wj-button-solid.wj-color-neutral:hover){--wj-button-background-color: #373737;--wj-button-border-color: #212121;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-neutral:hover){--wj-button-background-color: rgba(33, 33, 33, .1);--wj-button-border-color: #212121;--wj-button-color: #212121}:host(.wj-button-solid.wj-color-default:hover){--wj-button-background-color: rgba(245, 245, 245, .19);--wj-button-border-color: #e0e0e0;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-default:hover){--wj-button-background-color: rgba(224, 224, 224, .1);--wj-button-border-color: #e0e0e0;--wj-button-color: #4b4b4b}:host(.wj-button-link:hover){--wj-button-background-color: rgba(128, 128, 128, .2) !important;--wj-button-border-color: transparent !important;color:#4b4b4b!important}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.button-solid.wj-color){background-color:var(--wj-button-background-color);color:var(--wj-button-color)}:host(.wj-button-solid){--wj-button-background-color: #7252D3;--wj-button-color: #fff}:host(.wj-button-outline){--wj-button-border-color: #7252d3;--wj-button-background-color: transparent;--wj-button-color: #7252D3}:host(.wj-button-link){--wj-button-border-width: 1px;--wj-button-border-color: transparent;--wj-button-background-color: transparent !important}:host(.wj-button-disabled){cursor:default;opacity:.5;pointer-events:none}:host(.wj-button-round){--wj-button-border-radius: 100px}:host(.wj-button-large){--wj-padding-top: .6rem;--wj-padding-start: .7rem;--wj-padding-end: .7rem;--wj-padding-bottom: .6rem}:host(.wj-button-small){--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem}::slotted(wj-icon[slot=start]){margin:0 .3rem 0 -.3rem}::slotted(wj-icon[slot=end]){margin:0 -.2rem 0 .3rem}::slotted(wj-icon[slot=caret]){margin:0 0 0 .3rem}slot[name=caret]{display:block}:host(.wj-button-group-first:not(.wj-button-group-last)) .button-native{border-start-end-radius:0;border-end-end-radius:0}:host(.wj-button-group-inner) .button-native{border-radius:0}:host(.wj-button-group-last:not(.wj-button-group-first)) .button-native{border-start-start-radius:0;border-end-start-radius:0}:host(.wj-button-group-button:not(.wj-button-group-first)){margin-inline-start:calc(-1 * var(--wj-button-border-width))!important}
+const u = (t) => t === "false" || t === "null" || t === "NaN" || t === "undefined" || t === "0" ? !1 : !!t, g = `:host(.wj-button-solid.wj-color-primary){--wj-button-background-color: var(--wj-color-primary-10);--wj-button-border-color: var(--wj-color-primary-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-primary){--wj-button-border-color: var(--wj-color-primary-6);--wj-button-color: var(--wj-color-primary-6)}:host(.wj-button-solid.wj-color-complete){--wj-button-background-color: var(--wj-color-complete-10);--wj-button-border-color: var(--wj-color-complete-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-complete){--wj-button-border-color: var(--wj-color-complete-6);--wj-button-color: var(--wj-color-complete-6)}:host(.wj-button-solid.wj-color-success){--wj-button-background-color: var(--wj-color-success-10);--wj-button-border-color: var(--wj-color-success-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-success){--wj-button-border-color: var(--wj-color-success-6);--wj-button-color: var(--wj-color-success-6)}:host(.wj-button-solid.wj-color-warning){--wj-button-background-color: var(--wj-color-warning-10);--wj-button-border-color: var(--wj-color-warning-11);--wj-button-color: var(--wj-color-black)}:host(.wj-button-outline.wj-color-warning){--wj-button-border-color: var(--wj-color-warning-6);--wj-button-color: var(--wj-color-warning-6)}:host(.wj-button-solid.wj-color-danger){--wj-button-background-color: var(--wj-color-danger-10);--wj-button-border-color: var(--wj-color-danger-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-danger){--wj-button-border-color: var(--wj-color-danger-6);--wj-button-color: var(--wj-color-danger-6)}:host(.wj-button-solid.wj-color-neutral){--wj-button-background-color: var(--wj-color-contrast-10);--wj-button-border-color: var(--wj-color-contrast-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-neutral){--wj-button-border-color: var(--wj-color-contrast-6);--wj-button-color: var(--wj-color-contrast-6)}:host(.wj-button-solid.wj-color-default){--wj-button-background-color: transparent;--wj-button-border-color: var(--wj-color-contrast-4);--wj-button-color: var(--wj-color-contrast-11)}:host(.wj-button-outline.wj-color-default){--wj-button-border-color: var(--wj-color-contrast-4);--wj-button-color: var(--wj-color-contrast-11)}:host{--wj-button-border-radius: 4px;--wj-button-border-width: 1px;--wj-button-border-style: solid;--wj-button-border-color: var(--wj-color-contrast-1);--wj-button-margin-inline: 0;--wj-padding-top: .4rem;--wj-padding-start: .5rem;--wj-padding-end: .5rem;--wj-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wj-button-margin-inline)}:host(.wj-button-group-button){display:block}.button-native{font-family:var(--wj-font-family);font-size:var(--wj-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;overflow:hidden;border-width:var(--wj-button-border-width);border-style:var(--wj-button-border-style);border-color:var(--wj-button-border-color);outline:none;background-color:var(--wj-button-background-color);color:var(--wj-button-color);line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wj-button-border-radius);padding-top:var(--wj-padding-top);padding-bottom:var(--wj-padding-bottom);padding-inline:var(--wj-padding-start) var(--wj-padding-end)}@media (any-hover: hover){:host(.wj-button-solid.wj-color-primary:hover){--wj-button-background-color: var(--wj-color-primary-9);--wj-button-border-color: var(--wj-color-primary-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-primary:hover){--wj-button-background-color: var(--wj-color-primary-1);--wj-button-border-color: var(--wj-color-primary-11);--wj-button-color: var(--wj-color-primary-11)}:host(.wj-button-solid.wj-color-complete:hover){--wj-button-background-color: var(--wj-color-complete-9);--wj-button-border-color: var(--wj-color-complete-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-complete:hover){--wj-button-background-color: var(--wj-color-complete-1);--wj-button-border-color: var(--wj-color-complete-11);--wj-button-color: var(--wj-color-complete-11)}:host(.wj-button-solid.wj-color-success:hover){--wj-button-background-color: var(--wj-color-success-9);--wj-button-border-color: var(--wj-color-success-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-success:hover){--wj-button-background-color: var(--wj-color-success-1);--wj-button-border-color: var(--wj-color-success-11);--wj-button-color: var(--wj-color-success-11)}:host(.wj-button-solid.wj-color-warning:hover){--wj-button-background-color: var(--wj-color-warning-9);--wj-button-border-color: var(--wj-color-warning-10);--wj-button-color: var(--wj-color-black)}:host(.wj-button-outline.wj-color-warning:hover){--wj-button-background-color: var(--wj-color-warning-1);--wj-button-border-color: var(--wj-color-warning-11);--wj-button-color: var(--wj-color-warning-11)}:host(.wj-button-solid.wj-color-danger:hover){--wj-button-background-color: var(--wj-color-danger-9);--wj-button-border-color: var(--wj-color-danger-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-danger:hover){--wj-button-background-color: var(--wj-color-danger-1);--wj-button-border-color: var(--wj-color-danger-11);--wj-button-color: var(--wj-color-danger-11)}:host(.wj-button-solid.wj-color-neutral:hover){--wj-button-background-color: var(--wj-color-contrast-9);--wj-button-border-color: var(--wj-color-contrast-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-neutral:hover){--wj-button-background-color: var(--wj-color-contrast-1);--wj-button-border-color: var(--wj-color-contrast-11);--wj-button-color: var(--wj-color-contrast-11)}:host(.wj-button-solid.wj-color-default:hover){--wj-button-background-color: var(--wj-color-contrast-1);--wj-button-border-color: var(--wj-color-contrast-2);--wj-button-color: var(--wj-color-contrast-9)}:host(.wj-button-outline.wj-color-default:hover){--wj-button-background-color: var(--wj-color-contrast-1);--wj-button-border-color: var(--wj-color-contrast-2);--wj-button-color: var(--wj-color-contrast-9)}:host(.wj-button-link:hover){--wj-button-background-color: var(--wj-color-contrast-1) !important;--wj-button-border-color: transparent !important;color:var(--wj-color-contrast-9)!important}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.button-solid.wj-color){background-color:var(--wj-button-background-color);color:var(--wj-button-color)}:host(.wj-button-link){--wj-button-border-width: 1px;--wj-button-border-color: transparent;--wj-button-background-color: transparent !important}:host(.wj-button-disabled){cursor:default;opacity:.5;pointer-events:none}:host(.wj-button-round){--wj-button-border-radius: var(--wj-border-radius-pill)}:host(.wj-button-circle){--wj-button-border-radius: var(--wj-border-radius-circle);aspect-ratio:1/1}:host(.wj-button-large){--wj-padding-top: .6rem;--wj-padding-start: .7rem;--wj-padding-end: .7rem;--wj-padding-bottom: .6rem}:host(.wj-button-small){--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem}::slotted(wj-icon[slot=start]){margin:0 .3rem 0 -.3rem}::slotted(wj-icon[slot=end]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wj-button-group-first:not(.wj-button-group-last)) .button-native{border-start-end-radius:0;border-end-end-radius:0}:host(.wj-button-group-inner) .button-native{border-radius:0}:host(.wj-button-group-last:not(.wj-button-group-first)) .button-native{border-start-start-radius:0;border-end-start-radius:0}:host(.wj-button-group-button:not(.wj-button-group-first)){margin-inline-start:calc(-1 * var(--wj-button-border-width))!important}::slotted([slot=toggle]){display:none}::slotted([slot=toggle].show){display:block}
 `;
-class h extends w {
+class p extends j {
   constructor() {
     super();
-    u(this, "className", "Button");
-    u(this, "eventDialogOpen", (t) => {
+    c(this, "className", "Button");
+    c(this, "eventDialogOpen", (o) => {
       document.dispatchEvent(
         new CustomEvent(
           this.dialog,
@@ -21,45 +19,44 @@ class h extends w {
         )
       );
     });
+    c(this, "toggleStates", () => {
+      this.slotToggle.assignedNodes().filter((l) => l.nodeType === Node.ELEMENT_NODE).forEach((l) => {
+        l.classList.contains("show") ? l.classList.remove("show") : l.classList.add("show");
+      });
+    });
   }
-  set active(t) {
+  set active(o) {
     this.setAttribute("active", "");
   }
   get active() {
     return this.hasAttribute("active");
   }
-  set disabled(t) {
+  set disabled(o) {
     this.setAttribute("disabled", "");
   }
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set fill(t) {
-    this.setAttribute("fill", t);
+  set fill(o) {
+    this.setAttribute("fill", o);
   }
   get fill() {
     return this.getAttribute("fill") || "solid";
   }
-  set outline(t) {
+  set outline(o) {
     this.setAttribute("outline", "");
   }
   get outline() {
     return this.hasAttribute("outline");
   }
-  set round(t) {
-    this.setAttribute("round", "");
-  }
-  get round() {
-    return this.hasAttribute("round");
-  }
-  set stopPropagation(t) {
-    this.setAttribute("stop-propagation", b(t));
+  set stopPropagation(o) {
+    this.setAttribute("stop-propagation", u(o));
   }
   get stopPropagation() {
-    return console.log("SP:", b(this.getAttribute("stop-propagation")), this.innerHTML, this.getAttribute("stop-propagation")), b(this.getAttribute("stop-propagation"));
+    return u(this.getAttribute("stop-propagation"));
   }
   static get cssStyleSheet() {
-    return j;
+    return g;
   }
   static get observedAttributes() {
     return [];
@@ -67,33 +64,33 @@ class h extends w {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, p, g) {
-    let s = document.createDocumentFragment();
-    if (this.disabled && this.classList.add("wj-button-disabled"), this.variant && this.classList.add("wj-button-" + this.variant), this.round && this.classList.add("wj-button-round"), this.outline && this.classList.add("wj-outline"), this.fill && this.classList.add("wj-button-" + this.fill), this.size && this.classList.add("wj-button-" + this.size), this.hasAttribute("color") ? this.classList.add("wj-color-" + this.color, "wj-color") : this.classList.add("wj-color-default", "wj-color"), this.hasAttribute("caret")) {
-      let i = document.createElement("wj-icon");
-      i.style.setProperty("--wj-icon-size", "14px"), i.setAttribute("slot", "caret"), i.setAttribute("name", "chevron-down"), this.appendChild(i);
+  draw(o, l, v) {
+    let w = document.createDocumentFragment();
+    if (this.disabled && this.classList.add("wj-button-disabled"), this.variant && this.classList.add("wj-button-" + this.variant), this.hasAttribute("round") && this.classList.add("wj-button-round"), this.hasAttribute("circle") && this.classList.add("wj-button-circle"), this.outline && this.classList.add("wj-outline"), this.fill && this.classList.add("wj-button-" + this.fill), this.size && this.classList.add("wj-button-" + this.size), this.hasAttribute("color") ? this.classList.add("wj-color-" + this.color, "wj-color") : this.classList.add("wj-color-default", "wj-color"), this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
+      let a = document.createElement("wj-icon");
+      a.style.setProperty("--wj-icon-size", "14px"), a.setAttribute("slot", "caret"), a.setAttribute("name", "chevron-down"), this.appendChild(a);
     }
     if (this.active) {
       this.classList.add("wj-active");
-      let i = document.createElement("wj-icon");
-      i.setAttribute("name", "check"), this.appendChild(i);
+      let a = document.createElement("wj-icon");
+      a.setAttribute("name", "check"), this.appendChild(a);
     }
     this.disabled && this.classList.add("wj-disabled");
-    let l = document.createElement(this.hasAttribute("href") ? "a" : "button");
-    l.classList.add("button-native"), l.setAttribute("part", "native");
-    let e = document.createElement("span");
-    e.classList.add("button-inner");
+    let s = document.createElement(this.hasAttribute("href") ? "a" : "button");
+    s.classList.add("button-native"), s.setAttribute("part", "native");
+    let n = document.createElement("span");
+    n.classList.add("button-inner");
     let r = document.createElement("slot");
-    return r.setAttribute("name", "icon-only"), e.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), e.appendChild(r), r = document.createElement("slot"), e.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), e.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), e.appendChild(r), l.appendChild(e), s.appendChild(l), s;
+    return r.setAttribute("name", "icon-only"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), n.appendChild(r), r = document.createElement("slot"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), n.appendChild(r), this.hasToggle = h.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), n.appendChild(this.slotToggle)), s.appendChild(n), w.appendChild(s), w;
   }
   afterDraw() {
-    console.log("Stop propagation: ", this.stopPropagation), a.addListener(this, "click", "wj:button-click", null, { stopPropagation: this.stopPropagation }), a.addListener(this, "click", null, this.eventDialogOpen);
+    this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), i.addListener(this, "click", "wj:button-click", null, { stopPropagation: this.stopPropagation }), i.addListener(this, "click", null, this.eventDialogOpen), this.hasToggle && i.addListener(this, "click", "wj-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation });
   }
   beforeDisconnect() {
     this.removeEventListener("click", this.eventDialogOpen);
   }
 }
-customElements.get("wj-button") || window.customElements.define("wj-button", h);
+customElements.get("wj-button") || window.customElements.define("wj-button", p);
 export {
-  h as Button
+  p as Button
 };