wj-elements 0.1.126 → 0.1.128

package/dist/wje-store.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 class PubSub {
   constructor() {
     this.events = {};

package/dist/wje-tab-group.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Tab Group ]\n*/\n\n:host {\n  --wje-tab-top: 0;\n  --wje-tab-start: 0;\n  --wje-tab-end: 0;\n  --wje-tab-bottom: 0;\n}\n.native-tab-group {\n\n  display: flex;\n  flex-direction: column;\n\n  overflow: hidden;\n  position: relative;\n}\n\n.native-tab-group > header {\n  display: flex;\n  flex-direction: column;\n\n  & > nav {\n    display: flex;\n  }\n}\n\n.native-tab-group > section {\n  width: 100%;\n\n  & > article {\n    scroll-snap-align: start;\n    overflow-y: auto;\n    overscroll-behavior-y: contain;\n  }\n}\n\n/*TOP*/\n:host([variant=top]) {\n  --wje-tab-top: auto !important;\n  --wje-tab-writing-mode: horizontal-tb;\n  .native-tab-group {\n    flex-direction: column;\n  }\n  nav {\n    border-bottom: 1px solid var(--wje-border-color);\n  }\n}\n\n/*START*/\n:host([variant=start]){\n  --wje-tab-start: auto !important;\n  --wje-tab-writing-mode: vertical-rl;\n  .native-tab-group {\n    flex-direction: row;\n  }\n  nav {\n    flex-direction: column;\n    border-right: 1px solid var(--wje-border-color);\n  }\n}\n\n/*END*/\n:host([variant=end]){\n  --wje-tab-writing-mode: vertical-rl;\n  .native-tab-group {\n    flex-direction: row-reverse;\n  }\n  nav {\n    flex-direction: column;\n    border-left: 1px solid var(--wje-border-color);\n  }\n}\n\n/*BOTTOM*/\n:host([variant=bottom]) {\n  --wje-tab-bottom: auto !important;\n  --wje-tab-writing-mode: horizontal-tb;\n  .native-tab-group {\n    flex-direction: column-reverse;\n  }\n  nav {\n    border-top: 1px solid var(--wje-border-color);\n  }\n}";
 class TabGroup extends WJElement {

package/dist/wje-tab-panel.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Tab Panel ]\n*/\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 {

package/dist/wje-tab.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
 const styles = '/*\n[ WJ Tab ]\n*/\n\n:host {\n  display: block;\n  position: relative;\n  .native-tab {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    font-family: var(--wje-tab-font-family);\n    font-size: var(--wje-tab-font-size);\n    letter-spacing: var(--wje-tab-letter-spacing);\n    text-transform: var(--wje-tab-text-transfrom);\n    font-weight: var(--wje-tab-font-weight);\n    text-decoration: none;\n    padding-inline: var(--wje-tab-padding-inline);\n    padding-top: var(--wje-tab-padding-top);\n    padding-bottom: var(--wje-tab-padding-bottom);\n    border-radius: var(--wje-tab-border-radius);\n    color: var(--wje-color);\n    line-height: var(--wje-tab-line-height);\n    & > svg {\n      inline-size: 1.5em;\n      pointer-events: none;\n    }\n\n    &:hover {\n      background: var(--wje-tab-color-hover);\n      &:after {\n        display: block;\n      }\n    }\n\n    &:after {\n      content: " ";\n      display: none;\n      block-size: 0.15rem;\n      writing-mode: var(--wje-tab-writing-mode);\n      background: var(--wje-tab-color-active);\n      position: absolute;\n      bottom: var(--wje-tab-bottom);\n      left: var(--wje-tab-start);\n      right: var(--wje-tab-end);\n      top: var(--wje-tab-top);\n    }\n  }\n}\n\n:host([disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: inherit;\n  &:after {\n    display: none;\n  }\n}\n\n:host([active]) a:after {\n  display: block;\n}';
 class Tab extends WJElement {

package/dist/wje-textarea.js

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

package/dist/wje-thumbnail.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Thumbnail ]\n*/\n\n:host {\n  width: var(--wje-thumbnail-width);\n  height: var(--wje-thumbnail-height);\n  display: block;\n  border-radius: var(--wje-border-radius);\n}\n\n:host([circle]) ::slotted(img) {\n  border-radius: 50%;\n}\n::slotted(wje-img),\n::slotted(img) {\n  border-radius: var(--wje-thumbnail-border-radius);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n}";
 class Thumbnail extends WJElement {

package/dist/wje-toast.js

@@ -1,11 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement, { event } from "./wje-element.js";
-const styles = '/*\n[ WJ Toast ]\n*/\n\n:host {\n  position: relative;\n  z-index: 9999;\n  width: 300px;\n  margin: .5rem 0;\n  display: block;\n}\n\n.native-toast {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  overflow: hidden;\n  margin: 0;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--wje-border-radius-large);\n  position: relative;\n\n  slot[name="avatar"]::slotted(wje-avatar) {\n    margin-right: .5rem;\n  }\n\n  .content {\n    font-size: var(--wje-font-size-small);\n    .headline {\n      font-size: var(--wje-font-size);\n      font-weight: var(--wje-font-weight-bold);\n    }\n  }\n\n  wje-button {\n    --wje-button-margin-inline: auto 0;\n    margin-left: auto !important;\n  }\n\n  .countdown {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 4px;\n    .countdown-bar {\n      height: 100%;\n    }\n  }\n}\n\n:host([position=top]) {\n  animation: slideDown .3s ease-out forwards;\n  top: 1rem;\n  left: auto;\n  right: auto;\n}\n\n@keyframes slideDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n/*PRIMARY*/\n:host([color=primary]) .native-toast {\n  background-color: var(--wje-color-primary-1);\n  color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color=complete]) .native-toast {\n  background-color: var(--wje-color-complete-1);\n  color: var(--wje-color-complete-9);\n  border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color=success]) .native-toast {\n  background-color: var(--wje-color-success-1);\n  color: var(--wje-color-success-9);\n  border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color=warning]) .native-toast{\n  background-color: var(--wje-color-warning-1);\n  color: var(--wje-color-warning-11);\n  border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color=danger]) .native-toast {\n  background-color: var(--wje-color-danger-1);\n  color: var(--wje-color-danger-9);\n  border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color=info]) .native-toast {\n  background-color: var(--wje-color-info-1);\n  color: var(--wje-color-info-11);\n  border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color=contrast]) .native-toast {\n  background-color: var(--wje-color-contrast-2);\n  color: var(--wje-color-contrast-9);\n  border-color: var(--wje-color-contrast-3);\n}\n\n\n\n\n\n\n\n\n\n/*PRIMARY*/\n:host([color=primary]) .countdown-bar {\n  background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color=complete]) .countdown-bar {\n  background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color=success]) .countdown-bar {\n  background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color=warning]) .countdown-bar{\n  background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color=danger]) .countdown-bar {\n  background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color=info]) .countdown-bar {\n  background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color=contrast]) .countdown-bar {\n  background-color: var(--wje-color-contrast-9);\n}';
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import WJElement, { WjElementUtils, event } from "./wje-element.js";
+const styles = '/*\n[ WJ Toast ]\n*/\n\n:host {\n  position: relative;\n  z-index: 9999;\n  width: 300px;\n  margin: .5rem 0;\n  display: block;\n}\n\n.native-toast {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  overflow: hidden;\n  margin: 0;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--wje-border-radius-large);\n  position: relative;\n\n  &.has-media slot[name="media"] {\n    flex: 0 0 1.5rem;\n    width: 1.5rem;\n    display: flex;\n    margin-right: .5rem;\n    justify-content: center;\n  }\n\n  .content {\n    font-size: var(--wje-font-size-small);\n    .headline {\n      font-size: var(--wje-font-size);\n      font-weight: var(--wje-font-weight-bold);\n    }\n  }\n\n  wje-button {\n    --wje-button-margin-inline: auto 0;\n    margin-left: auto !important;\n  }\n\n  .countdown {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 4px;\n    .countdown-bar {\n      height: 100%;\n    }\n  }\n}\n\n:host([position=top]) {\n  animation: slideDown .3s ease-out forwards;\n  top: 1rem;\n  left: auto;\n  right: auto;\n}\n\n:host::part(icon) {\n  margin-right: .5rem;\n}\n\n@keyframes slideDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n/*PRIMARY*/\n:host([color=primary]) .native-toast {\n  background-color: var(--wje-color-primary-1);\n  color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color=complete]) .native-toast {\n  background-color: var(--wje-color-complete-1);\n  color: var(--wje-color-complete-9);\n  border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color=success]) .native-toast {\n  background-color: var(--wje-color-success-1);\n  color: var(--wje-color-success-9);\n  border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color=warning]) .native-toast{\n  background-color: var(--wje-color-warning-1);\n  color: var(--wje-color-warning-11);\n  border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color=danger]) .native-toast {\n  background-color: var(--wje-color-danger-1);\n  color: var(--wje-color-danger-9);\n  border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color=info]) .native-toast {\n  background-color: var(--wje-color-info-1);\n  color: var(--wje-color-info-11);\n  border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color=contrast]) .native-toast {\n  background-color: var(--wje-color-contrast-2);\n  color: var(--wje-color-contrast-9);\n  border-color: var(--wje-color-contrast-3);\n}\n\n\n\n\n\n\n\n\n\n/*PRIMARY*/\n:host([color=primary]) .countdown-bar {\n  background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color=complete]) .countdown-bar {\n  background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color=success]) .countdown-bar {\n  background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color=warning]) .countdown-bar{\n  background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color=danger]) .countdown-bar {\n  background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color=info]) .countdown-bar {\n  background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color=contrast]) .countdown-bar {\n  background-color: var(--wje-color-contrast-9);\n}';
 class Toast extends WJElement {
   /**
    * Toast constructor
@@ -80,51 +77,113 @@ class Toast extends WJElement {
         if (this.toastStack.parentElement === null) {
           document.body.append(this.toastStack);
         }
-        this.toastStack.appendChild(this);
+        this.toastStack.append(this);
         this.show();
         this.addEventListener("wje-toast:after-hide", this.removeChildAndStack);
       });
     });
     this.toastStack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
   }
+  /**
+   * Set headline
+   * @param value
+   */
   set headline(value) {
     this.setAttribute("headline", value);
   }
+  /**
+   * Get headline
+   * @returns {string}
+   */
   get headline() {
     return this.getAttribute("headline");
   }
+  /**
+   * Set open
+   * @param value
+   */
   set open(value) {
     this.setAttribute("open", value);
   }
+  /**
+   * Get open
+   * @returns {string}
+   */
   get open() {
     return this.getAttribute("open");
   }
+  /**
+   * Set duration
+   * @param value
+   */
   set duration(value) {
     this.setAttribute("duration", value);
   }
+  /**
+   * Get duration
+   * @returns {number}
+   */
   get duration() {
     return +this.getAttribute("duration");
   }
+  /**
+   * Set closable
+   * @param value
+   */
   set closable(value) {
     if (value)
       this.setAttribute("closable", value);
   }
+  /**
+   * Get closable
+   * @returns {string}
+   */
   get closable() {
     return this.getAttribute("closable");
   }
+  /**
+   * Set color
+   * @param value
+   */
   set color(value) {
     this.setAttribute("color", value);
   }
+  /**
+   * Get color
+   * @returns {string}
+   */
   get color() {
     return this.getAttribute("color");
   }
+  /**
+   * Set countdown
+   * @param value
+   */
   set countdown(value) {
     if (value)
       this.setAttribute("countdown", value);
   }
+  /**
+   * Get countdown
+   * @returns {boolean}
+   */
   get countdown() {
     return this.hasAttribute("countdown");
   }
+  /**
+   * Set icon
+   * @param value
+   */
+  set icon(value) {
+    this.setAttribute("icon", value);
+  }
+  /**
+   * Get icon
+   * @returns {string}
+   */
+  get icon() {
+    return this.getAttribute("icon");
+  }
   /**
    * Get CSS stylesheet
    * @static
@@ -139,9 +198,9 @@ class Toast extends WJElement {
    * @static
    * @returns {Array<string>}
    */
-  static get observedAttributes() {
-    return ["open", "color", "duration"];
-  }
+  // static get observedAttributes() {
+  //     return ["open", "color", "duration"];
+  // }
   /**
    * Called when an attribute changes.
    *
@@ -169,14 +228,21 @@ class Toast extends WJElement {
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.classList.add("native-toast");
-    let avatarSlot = document.createElement("slot");
-    avatarSlot.setAttribute("name", "avatar");
-    avatarSlot.classList.add("avatar");
+    let mediaSlot = document.createElement("slot");
+    mediaSlot.setAttribute("name", "media");
+    mediaSlot.classList.add("media");
+    mediaSlot.addEventListener("slotchange", () => {
+      if (WjElementUtils.hasSlotContent(this.context, "media")) {
+        mediaSlot.parentElement.classList.add("has-media");
+      } else {
+        mediaSlot.parentElement.classList.remove("has-media");
+      }
+    });
     let content = document.createElement("div");
     content.classList.add("content");
     content.innerHTML = `<div class="headline">${this.headline}</div><div class="message"><slot></slot></div>`;
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "x");
+    let iconX = document.createElement("wje-icon");
+    iconX.setAttribute("name", "x");
     let closeBtn = document.createElement("wje-button");
     closeBtn.setAttribute("fill", "link");
     closeBtn.setAttribute("color", this.color);
@@ -186,9 +252,17 @@ class Toast extends WJElement {
     countdownEl.classList.add("countdown");
     let countdownBar = document.createElement("div");
     countdownBar.classList.add("countdown-bar");
-    closeBtn.appendChild(icon);
+    closeBtn.appendChild(iconX);
     countdownEl.appendChild(countdownBar);
-    native.appendChild(avatarSlot);
+    if (this.hasAttribute("icon") && this.icon) {
+      let icon = document.createElement("wje-icon");
+      icon.setAttribute("name", this.icon);
+      icon.setAttribute("color", this.color);
+      icon.setAttribute("slot", "media");
+      icon.setAttribute("part", "icon");
+      this.appendChild(icon);
+    }
+    native.appendChild(mediaSlot);
     native.appendChild(content);
     if (this.hasAttribute("closable"))
       native.appendChild(closeBtn);

package/dist/wje-toggle.js

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

package/dist/wje-toolbar-action.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Toolbar Action ]\n*/\n\n:host {\n  .native-toolbar-action {\n    display: flex;\n  }\n}";
 class ToolbarAction extends WJElement {

package/dist/wje-toolbar.js

@@ -1,11 +1,8 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-import { w as withRouterLinks } from "./router-links-F7MJWhZi.js";
+import { w as withRouterLinks } from "./router-links-I2vcmVCs.js";
 const styles = '/*\n[ WJ Toolbar ]\n*/\n\n:host {\n  --wje-toolbar-background: var(--wje-background);\n  --wje-toolbar-height: auto;\n  --wje-toolbar-min-height: 70px;\n  --wje-toolbar-padding-top: 1rem;\n  --wje-toolbar-padding-bottom: 1rem;\n  --wje-toolbar-padding-inline: 1.5rem;\n  --wje-toolbar-border-color: var(--wje-border-color);\n  --wje-toolbar-top: 0;\n  width: 100%;\n  height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n  background-color: var(--wje-toolbar-background);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  border-bottom: 1px solid var(--wje-toolbar-border-color);\n  padding-inline: var(--wje-toolbar-padding-inline);\n  padding-top: var(--wje-toolbar-padding-top);\n  padding-bottom: var(--wje-toolbar-padding-bottom);\n  box-shadow: 0 10px 30px 0 rgba(82,63,105,.05);\n}\n\n::slotted {\n  grid-column: span 4;\n}\n\n::slotted([slot="start"]) {\n  margin-right: auto;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--wje-toolbar-top);\n  z-index: 99;\n}';
 class Toolbar extends withRouterLinks(WJElement) {
   /**

package/dist/wje-tooltip.js

@@ -1,9 +1,6 @@
 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;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
 const styles = '/*\n[ WJ Tooltip ]\n*/\n\n.native-tooltip {\n  display: flex;\n  align-items: center;\n  padding: var(--wje-tooltip-spacing);\n  color: var(--wje-tooltip-color);\n  background-color: var(--wje-tooltip-background);\n  font-weight: var(--wje-tooltip-font-weight);\n  font-size:  var(--wje-tooltip-font-size);\n  border-radius: var(--wje-tooltip-border-radius);\n  line-height: var(--wje-tooltip-line-height);\n  box-sizing: border-box;\n  box-shadow: var(--wje-tooltip-shadow);\n}\n\n::slotted([slot="start"]) {\n  margin: 0 .3rem 0 0;\n}\n\n::slotted([slot="end"]) {\n  margin: 0 0 0 .3rem;\n}\n\n.arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: var(--wje-tooltip-arrow-color);\n  transform: rotate(45deg);\n}\n';
 class Tooltip extends WJElement {

package/dist/wje-visually-hidden.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.126",
+  "version": "0.1.128",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -30,7 +30,9 @@
     "preview": "vite preview --mode production",
     "watch": "vite build --watch --mode development",
     "analyze": "cem analyze",
-    "create-element": "node wje-cli-script/create-element.cjs"
+    "create-element": "node wje-cli-script/create-element.cjs",
+    "test": "web-test-runner --group default",
+    "test:watch": "web-test-runner --watch --group default"
   },
   "exports": {
     ".": {
@@ -57,15 +59,20 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.3",
+    "@open-wc/testing": "^3.2.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "animate.css": "^4.1.1",
     "custom-element-jet-brains-integration": "^1.4.4",
+    "dotenv": "^16.4.5",
     "javascript-obfuscator": "^4.1.0",
     "miragejs": "^0.1.48",
+    "playwright": "^1.48.1",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.63.5",
     "terser": "^5.29.2",
     "vite": "^5.1.2",
-    "vite-plugin-javascript-obfuscator": "^3.1.0",
-    "dotenv": "^16.4.5",
-    "animate.css": "^4.1.1"
+    "vite-plugin-javascript-obfuscator": "^3.1.0"
   }
-}
+}