wj-elements 0.1.83 → 0.1.85

package/dist/dark.css

@@ -149,6 +149,12 @@
   /* Divider */
   --wje-divider-border-color: var(--wje-border-color);
 
+  /* Item */
+  --wje-item-color: var(--wje-color);
+  --wje-item-border-color: var(--wje-border-color);
+  --wje-item-background: transparent;
+  --wje-item-background-hover: var(--wje-color-contrast-3);
+
   /* List */
   --wje-list-background: var(--wje-background);
 

package/dist/light.css

@@ -340,6 +340,27 @@
   --wje-img-compare-position: 50%;
   --wje-img-compare-clip-path: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0);
 
+  /* Item */
+  --wje-item-color: var(--wje-color);
+  --wje-item-border-width: 0 0 1px 0;
+  --wje-item-border-style: solid;
+  --wje-item-border-color: var(--wje-border-color);
+  --wje-item-border-radius: 0;
+  --wje-item-background: transparent;
+  --wje-item-background-hover: var(--wje-color-contrast-3);
+  --wje-item-padding-top: 0px;
+  --wje-item-padding-bottom: 0px;
+  --wje-item-padding-end: 0px;
+  --wje-item-padding-start: 0px;
+  --wje-item-inner-border-width: 0 0 1px 0;
+  --wje-item-inner-padding-top: 0px;
+  --wje-item-inner-padding-bottom: 0px;
+  --wje-item-inner-padding-start: 0px;
+  --wje-item-inner-padding-end: 0px;
+  --wje-item-inner-box-shadow: none;
+  --wje-item-min-height: 40px;
+  --wje-item-transition: var(--wje-transition-fast);
+
   /* List */
   --wje-list-inset-padding: 1rem;
   --wje-list-border-radius: var(--wje-border-radius-medium);

package/dist/wje-card-controls.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Card - Controls ]\n*/\n\n:host {\n  font-family: var(--wje-card-controls-font-family);\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-size: var(--wje-card-controls-font-size);\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n  transition: opacity 0.3s ease;\n  position: absolute;\n  right: 1rem;\n  top: .5rem;\n}";
+const styles = "/*\n[ WJ Card - Controls ]\n*/\n\n:host {\n  font-family: var(--wje-card-controls-font-family);\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-size: var(--wje-card-controls-font-size);\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  /*overflow: hidden;*/\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n  transition: opacity 0.3s ease;\n  position: absolute;\n  right: 1rem;\n  top: .5rem;\n}";
 class CardControls extends WJElement {
   /**
    * CardControls constructor

package/dist/wje-input.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n  --wje-input-font-family: var(--wje-font-family);\n  --wje-input-background-color: var(--wje-background);\n  --wje-input-color: var(--wje-color);\n  --wje-input-color-invalid: var(--wje-color-danger);\n  --wje-input-border-color: var(--wje-border-color);\n  --wje-input-border-color-focus: var(--wje-color-primary);\n  --wje-input-border-width: 1px;\n  --wje-input-border-style: solid;\n  --wje-input-border-radius: 4px;\n  --wje-input-margin-bottom: .5rem;\n  --wje-input-line-height: 20px;\n  --wje-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wje-input-margin-bottom);\n  display: block;\n\n  .wrapper {\n    display: flex;\n    width: 100%;\n  }\n  .native-input {\n    .input-wrapper {\n      width: 100%;\n      position: relative;\n    }\n    &.default {\n      background-color: var(--wje-input-background-color);\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      border-width: var(--wje-input-border-width);\n      border-style: var(--wje-input-border-style);\n      border-color: var(--wje-input-border-color);\n      padding-inline: 0;\n      padding-top: .25rem;\n      padding-bottom: .25rem;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      .input-wrapper {\n        margin-inline: .5rem;\n      }\n      &.focused {\n        border-color: var(--wje-input-border-color-focus) !important;\n        label {\n          opacity: 0.67;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      input {\n        border: none;\n        height: 25px;\n        min-height: 25px;\n        padding: 0;\n        margin-top: -4px;\n        background: none;\n        box-shadow: none;\n        width: 100%;\n      }\n      label {\n        margin: 0;\n        display: block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\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-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      padding-inline: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      &.focused {\n        input {\n          border-color: var(--wje-input-border-color-focus) !important;\n        }\n      }\n      input {\n        background-color: var(--wje-input-background-color);\n        display: block;\n        min-height: 32px;\n        padding-inline: .5rem;\n        padding-top: 0;\n        padding-bottom: 0;\n        /*background: none;*/\n        box-shadow: none;\n        width: 100%;\n        box-sizing: border-box;\n        border-radius: var(--wje-input-border-radius);\n        border-width: var(--wje-input-border-width);\n        border-style: var(--wje-input-border-style);\n        border-color: var(--wje-input-border-color);\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-input-line-height);\n      }\n      .input-wrapper {\n        &:hover .clear {\n          visibility: visible;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-right: none;\n        border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n      }\n\n      ::slotted([slot="end"]) {\n        border-left: none;\n        border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n      }\n\n      &.has-start input{\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      &.has-end input{\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .error-message {\n        position: static;\n\n        background: transparent;\n        padding: 0.25rem 0;\n        left: auto;\n        transform: none;\n        color: var(--wje-input-color-invalid);\n        font-size: 12px;\n        line-height: normal;\n      }\n    }\n  }\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wje-input-color-invalid);\n  content: "*";\n  font-family: var(--wje-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) {\n  .error-message {\n    display: block;\n  }\n  .default {\n    label {\n      opacity: 1 !important;\n      color: var(--wje-input-color-invalid) !important;\n      animation-name: shake;\n      animation-duration: 0.4s;\n      animation-iteration-count: 1;\n    }\n  }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  padding-inline: var(--wje-input-slot-padding-inline);\n}\n\nslot[name="start"], slot[name="end"] {\n  display: flex;\n}\n\nslot[name="error"] {\n  display: none;\n  margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n  display: block;\n}\n\ninput {\n  background-color: var(--wje-input-background-color);\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  font-family: var(--wje-input-font-family);\n  color: var(--wje-input-color);\n  appearance: none;\n  outline: 0;\n  padding: .25rem .5rem;\n  line-height: var(--wje-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: .25rem .5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%,\n  41% {\n    transform: translateX(-4px);\n  }\n  25%,\n  58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n}';
+const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n  --wje-input-font-family: var(--wje-font-family);\n  --wje-input-background-color: var(--wje-background);\n  --wje-input-color: var(--wje-color);\n  --wje-input-color-invalid: var(--wje-color-danger);\n  --wje-input-border-color: var(--wje-border-color);\n  --wje-input-border-color-focus: var(--wje-color-primary);\n  --wje-input-border-width: 1px;\n  --wje-input-border-style: solid;\n  --wje-input-border-radius: 4px;\n  --wje-input-margin-bottom: .5rem;\n  --wje-input-line-height: 20px;\n  --wje-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wje-input-margin-bottom);\n  display: block;\n\n  .wrapper {\n    display: flex;\n    width: 100%;\n  }\n  .native-input {\n    .input-wrapper {\n      width: 100%;\n      position: relative;\n      box-sizing: border-box;\n    }\n    &.default {\n      background-color: var(--wje-input-background-color);\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      border-width: var(--wje-input-border-width);\n      border-style: var(--wje-input-border-style);\n      border-color: var(--wje-input-border-color);\n      padding-inline: 0;\n      padding-top: .25rem;\n      padding-bottom: .25rem;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      .input-wrapper {\n        margin-inline: .5rem;\n      }\n      &.focused {\n        border-color: var(--wje-input-border-color-focus) !important;\n        label {\n          opacity: 0.67;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      input {\n        border: none;\n        height: 25px;\n        min-height: 25px;\n        padding: 0;\n        margin-top: -4px;\n        background: none;\n        box-shadow: none;\n        width: 100%;\n      }\n      label {\n        margin: 0;\n        display: block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\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-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      padding-inline: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      &.focused {\n        input {\n          border-color: var(--wje-input-border-color-focus) !important;\n        }\n      }\n      input {\n        background-color: var(--wje-input-background-color);\n        display: block;\n        min-height: 32px;\n        padding-inline: .5rem;\n        padding-top: 0;\n        padding-bottom: 0;\n        /*background: none;*/\n        box-shadow: none;\n        width: 100%;\n        box-sizing: border-box;\n        border-radius: var(--wje-input-border-radius);\n        border-width: var(--wje-input-border-width);\n        border-style: var(--wje-input-border-style);\n        border-color: var(--wje-input-border-color);\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-input-line-height);\n      }\n      .input-wrapper {\n        &:hover .clear {\n          visibility: visible;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-right: none;\n        border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n      }\n\n      ::slotted([slot="end"]) {\n        border-left: none;\n        border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n      }\n\n      &.has-start input{\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      &.has-end input{\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .error-message {\n        position: static;\n\n        background: transparent;\n        padding: 0.25rem 0;\n        left: auto;\n        transform: none;\n        color: var(--wje-input-color-invalid);\n        font-size: 12px;\n        line-height: normal;\n      }\n    }\n  }\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wje-input-color-invalid);\n  content: "*";\n  font-family: var(--wje-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) {\n  .error-message {\n    display: block;\n  }\n  .default {\n    label {\n      opacity: 1 !important;\n      color: var(--wje-input-color-invalid) !important;\n      animation-name: shake;\n      animation-duration: 0.4s;\n      animation-iteration-count: 1;\n    }\n  }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n/*\n    .options-show is a class that is added to the host element when the select options are shown\n */\n:host(.options-show) ::slotted([slot="start"]) {\n  border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot="end"]) {\n  border-bottom-right-radius: 0 !important;\n}\n\nslot[name="start"], slot[name="end"] {\n  display: flex;\n}\n\nslot[name="error"] {\n  display: none;\n  margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n  display: block;\n}\n\ninput {\n  background-color: var(--wje-input-background-color);\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  font-family: var(--wje-input-font-family);\n  color: var(--wje-input-color);\n  appearance: none;\n  outline: 0;\n  padding: .25rem .5rem;\n  line-height: var(--wje-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: .25rem .5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%,\n  41% {\n    transform: translateX(-4px);\n  }\n  25%,\n  58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n}';
 class Input extends WJElement {
   /**
    * Constructor for the Input class.

package/dist/wje-item.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = '/*\n[ WJ Item ]\n*/\n\n:host {\n    --wje-border-width: 0 0 1px 0;\n    --wje-item-background: transparent;\n    --wje-item-background-hover: var(--wje-color-contrast-3);\n    --wje-item-padding-top: 0px;\n    --wje-item-padding-bottom: 0px;\n    --wje-item-padding-end: 0px;\n    --wje-item-padding-start: 0px;\n    --wje-item-inner-border-width: 0 0 1px 0;\n    --wje-item-inner-padding-top: 0px;\n    --wje-item-inner-padding-bottom: 0px;\n    --wje-item-inner-padding-start: 0px;\n    --wje-item-inner-padding-end: 0px;\n    --wje-item-inner-box-shadow: none;\n    --wje-item-min-height: 40px;\n    --wje-item-transition: opacity 15ms linear, background-color 15ms linear;\n    display: block;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    outline: none;\n    color: var(--wje-item-color);\n    text-align: initial;\n    text-decoration: none;\n    overflow: hidden;\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.item-native {\n    border-radius: var(--wje-item-border-radius);\n    padding-top: var(--wje-item-padding-top);\n    padding-bottom: var(--wje-item-padding-bottom);\n    padding-inline: var(--wje-item-padding-start) var(--wje-item-padding-end);\n    margin: 0;\n    display: flex;\n    position: relative;\n    align-items: inherit;\n    justify-content: inherit;\n    width: 100%;\n    min-height: var(--wje-item-min-height);\n    transition: var(--wje-item-transition);\n    outline: none;\n    background: var(--wje-item-background);\n    overflow: inherit;\n    box-sizing: border-box;\n    z-index: 1;\n    text-decoration: none;\n    color: var(--wje-item-color);\n\n    .item-inner {\n        margin: 0;\n        padding: var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);\n\n        display: flex;\n        position: relative;\n\n        flex: 1 1 0;\n        flex-direction: inherit;\n        align-items: inherit;\n        align-self: stretch;\n\n        min-height: inherit;\n\n        border-width: var(--wje-border-width);\n        border-style: var(--wje-border-style);\n        border-color: var(--wje-border-color);\n\n        box-shadow: var(--wje-item-inner-box-shadow);\n        overflow: inherit;\n        box-sizing: border-box;\n\n        .input-wrapper {\n            display: flex;\n            flex: 1 1 0;\n            flex-direction: inherit;\n            align-items: inherit;\n            align-self: stretch;\n            text-overflow: ellipsis;\n            overflow: inherit;\n            box-sizing: border-box;\n        }\n    }\n\n    .item-bottom {\n        padding: 0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);\n        display: flex;\n        justify-content: space-between;\n    }\n}\n\n@media (any-hover: hover) {\n    :host(:hover) .item-native {\n        color: var(--wje-item-color);\n\n        :after {\n            transition: var(--wje-item-transition);\n            z-index: -1;\n            inset: 0;\n            position: absolute;\n            content: "";\n            background: var(--wje-item-background-hover);\n            opacity: 0.7;\n        }\n    }\n}\n\nbutton,\na {\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-drag: none;\n}\n\n::slotted([slot="start"]) {\n    margin-inline: 0 1rem;\n}\n\n::slotted(wje-label:not([slot="end"])) {\n    flex: 1 1 0;\n}';
+const styles = '/*\n[ WJ Item ]\n*/\n\n:host {\n    display: block;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    outline: none;\n    color: var(--wje-item-color);\n    text-align: initial;\n    text-decoration: none;\n    overflow: hidden;\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.item-native {\n    border-radius: var(--wje-item-border-radius);\n    padding-top: var(--wje-item-padding-top);\n    padding-bottom: var(--wje-item-padding-bottom);\n    padding-inline: var(--wje-item-padding-start) var(--wje-item-padding-end);\n    margin: 0;\n    display: flex;\n    position: relative;\n    align-items: inherit;\n    justify-content: inherit;\n    width: 100%;\n    min-height: var(--wje-item-min-height);\n    transition: var(--wje-item-transition);\n    outline: none;\n    background: var(--wje-item-background);\n    overflow: inherit;\n    box-sizing: border-box;\n    z-index: 1;\n    text-decoration: none;\n    color: var(--wje-item-color);\n\n    .item-inner {\n        margin: 0;\n        padding: var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);\n\n        display: flex;\n        position: relative;\n\n        flex: 1 1 0;\n        flex-direction: inherit;\n        align-items: inherit;\n        align-self: stretch;\n\n        min-height: inherit;\n\n        border-width: var(--wje-item-border-width);\n        border-style: var(--wje-item-border-style);\n        border-color: var(--wje-item-border-color);\n\n        box-shadow: var(--wje-item-inner-box-shadow);\n        overflow: inherit;\n        box-sizing: border-box;\n\n        .input-wrapper {\n            display: flex;\n            flex: 1 1 0;\n            flex-direction: inherit;\n            align-items: inherit;\n            align-self: stretch;\n            text-overflow: ellipsis;\n            overflow: inherit;\n            box-sizing: border-box;\n        }\n    }\n\n    .item-bottom {\n        padding: 0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);\n        display: flex;\n        justify-content: space-between;\n    }\n}\n\n@media (any-hover: hover) {\n    :host(:hover) .item-native {\n        color: var(--wje-item-color);\n\n        :after {\n            transition: var(--wje-item-transition);\n            z-index: -1;\n            inset: 0;\n            position: absolute;\n            content: "";\n            background: var(--wje-item-background-hover);\n            opacity: 0.7;\n        }\n    }\n}\n\nbutton,\na {\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-drag: none;\n}\n\n::slotted([slot="start"]) {\n    margin-inline: 0 1rem;\n}\n\n::slotted(wje-label:not([slot="end"])) {\n    flex: 1 1 0;\n}';
 class Item extends WJElement {
   constructor() {
     super();

package/dist/wje-option.js

@@ -102,7 +102,7 @@ class Option extends WJElement {
    * Adds event listeners after the component is drawn.
    */
   afterDraw() {
-    event.addListener(this, "click", "wje:option-change");
+    event.addListener(this, "click", "wje-option:change");
   }
 }
 Option.define("wje-option", Option);

package/dist/wje-select.js

@@ -14,7 +14,7 @@ import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import { P as Popup } from "./popup.element-DvPGL_NN.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n  --wje-select-border-width: 1px;\n  --wje-select-border-style: solid;\n  --wje-select-border-color: var(--wje-border-color);\n\n  --wje-select-options-border-width: 1px;\n  --wje-select-options-border-style: var(--wje-border-style);\n  --wje-select-options-border-color: var(--wje-border-color);\n\n  --wje-select-background: var(--wje-background);\n  --wje-select-line-height: 20px;\n  --wje-select-color: var(--wje-color);\n  --wje-select-border-radius: var(--wje-border-radius-medium);\n\n  width: 100%;\n  display: block;\n  [slot=arrow] {\n    transform: rotate(0deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.native-select {\n  &.default{\n    .wrapper {\n      display: block;\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n      padding-inline: .5rem;\n      padding-top: 0.125rem;\n      padding-bottom: 0.125rem;\n    }\n    .input-wrapper {\n      padding: 0;\n      min-height: 28px;\n      margin-top: -4px;\n    }\n    &.focused {\n      wje-label {\n        opacity: 0.67;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n    wje-label {\n      margin: 0;\n      display: block;\n      opacity: 1;\n      cursor: text;\n      transition: opacity 0.2s ease 0s;\n      line-height: var(--wje-select-line-height);\n      &.fade {\n        opacity: 0.5;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n  }\n  &.standard {\n    .wrapper {\n      background-color: var(--wje-select-background);\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n    }\n    .input-wrapper {\n      background: transparent;\n      width: 100%;\n    }\n  }\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(--wje-select-background);\n  min-height: 28px;\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  appearance: none;\n  padding: 2px .5rem;\n  font-size: 14px !important;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\ninput {\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  font-size: 14px !important;\n  font-weight: 400;\n  letter-spacing: .01em;\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  font-size: 14px !important;\n}\n\n::placeholder {\n  opacity: 1;\n}\n\n:host [active] {\n  .wrapper {\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n  }\n  [slot=arrow] {\n    transform: rotate(180deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.options-wrapper {\n  border-width: var(--wje-select-options-border-width);\n  border-style: var(--wje-select-options-border-style);\n  border-color: var(--wje-select-options-border-color);\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n  margin-top: -1px;\n  background: var(--wje-select-background);\n}\n\n.find {\n  --wje-input-border-radius: 0;\n  --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n  overflow: auto;\n  height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n  height: calc(100% - 32px - .5rem);\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: .5rem;\n}\n\nwje-chip {\n  --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n  --wje-select-border-width: 1px;\n  --wje-select-border-style: solid;\n  --wje-select-border-color: var(--wje-border-color);\n\n  --wje-select-options-border-width: 1px;\n  --wje-select-options-border-style: var(--wje-border-style);\n  --wje-select-options-border-color: var(--wje-border-color);\n\n  --wje-select-background: var(--wje-background);\n  --wje-select-line-height: 20px;\n  --wje-select-color: var(--wje-color);\n  --wje-select-border-radius: var(--wje-border-radius-medium);\n\n  width: 100%;\n  display: block;\n  [slot=arrow] {\n    transform: rotate(0deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.native-select {\n  &.default{\n    .wrapper {\n      display: block;\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n      padding-inline: .5rem;\n      padding-top: 0.125rem;\n      padding-bottom: 0.125rem;\n    }\n    .input-wrapper {\n      padding: 0;\n      min-height: 28px;\n      margin-top: -4px;\n    }\n    &.focused {\n      wje-label {\n        opacity: 0.67;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n    wje-label {\n      margin: 0;\n      display: block;\n      opacity: 1;\n      cursor: text;\n      transition: opacity 0.2s ease 0s;\n      line-height: var(--wje-select-line-height);\n      &.fade {\n        opacity: 0.5;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n  }\n  &.standard {\n    .wrapper {\n      background-color: var(--wje-select-background);\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n    }\n    .input-wrapper {\n      background: transparent;\n      width: 100%;\n    }\n  }\n}\n\n.wrapper {\n  display: flex;\n  width: 100%;\n}\n\n.input-wrapper {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  align-items: center;\n  background-color: var(--wje-select-background);\n  min-height: 28px;\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  appearance: none;\n  padding: 2px .5rem;\n  font-size: 14px !important;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\ninput {\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  font-size: 14px !important;\n  font-weight: 400;\n  letter-spacing: .01em;\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  font-size: 14px !important;\n}\n\n::placeholder {\n  opacity: 1;\n}\n\n:host [active] {\n  .wrapper {\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n  }\n  [slot=arrow] {\n    transform: rotate(180deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.options-wrapper {\n  border-width: var(--wje-select-options-border-width);\n  border-style: var(--wje-select-options-border-style);\n  border-color: var(--wje-select-options-border-color);\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n  margin-top: calc(0px - var(--wje-select-border-width));\n  background: var(--wje-select-background);\n  overflow: hidden;\n\n}\n\n.find {\n  --wje-input-border-radius: 0;\n  --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n  overflow: auto;\n  height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n  height: calc(100% - 32px - .5rem);\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: .5rem;\n}\n\nwje-chip {\n  --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n.slot-start, .slot-end {\n  &:not(:empty) {\n    margin-right: .5rem;\n  }\n}\n";
 class Select extends WJElement {
   /**
    * Creates an instance of Select.
@@ -50,6 +50,7 @@ class Select extends WJElement {
       }
       e.target.selected = !e.target.hasAttribute("selected");
       this.selections(e.target);
+      event.dispatchCustomEvent(this, "wje-select:change");
     });
     /**
      * Handles the chip remove event.
@@ -142,13 +143,18 @@ class Select extends WJElement {
     let label = document.createElement("wje-label");
     label.innerText = this.label || "";
     let inputWrapper = document.createElement("div");
+    inputWrapper.setAttribute("part", "input-wrapper");
     inputWrapper.classList.add("input-wrapper");
+    let slotStart = document.createElement("div");
+    slotStart.classList.add("slot-start");
     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 slotEnd = document.createElement("div");
+    slotEnd.classList.add("slot-end");
     let arrow = document.createElement("wje-icon");
     arrow.setAttribute("name", "chevron-down");
     arrow.setAttribute("slot", "arrow");
@@ -156,6 +162,7 @@ class Select extends WJElement {
     chips.classList.add("chips");
     chips.innerText = this.placeholder || "";
     let optionsWrapper = document.createElement("div");
+    optionsWrapper.setAttribute("part", "options-wrapper");
     optionsWrapper.classList.add("options-wrapper");
     optionsWrapper.style.setProperty("height", this.maxHeight || "auto");
     let list = document.createElement("div");
@@ -179,11 +186,13 @@ class Select extends WJElement {
     } else {
       wrapper.appendChild(label);
     }
+    inputWrapper.appendChild(slotStart);
     inputWrapper.appendChild(input);
     if (this.hasAttribute("multiple"))
       inputWrapper.appendChild(chips);
     if (this.hasAttribute("clearable"))
       inputWrapper.appendChild(clear);
+    inputWrapper.appendChild(slotEnd);
     inputWrapper.appendChild(arrow);
     list.appendChild(slot);
     if (this.hasAttribute("find")) {
@@ -204,6 +213,8 @@ class Select extends WJElement {
     this.native = native;
     this.popup = popup;
     this.labelElement = label;
+    this.slotStart = slotStart;
+    this.slotEnd = slotEnd;
     this.input = input;
     this.optionsWrapper = optionsWrapper;
     this.chips = chips;
@@ -229,7 +240,7 @@ class Select extends WJElement {
       if (!e.target.value)
         this.labelElement.classList.remove("fade");
     });
-    this.addEventListener("wje:option-change", this.optionChange);
+    this.addEventListener("wje-option:change", this.optionChange);
     this.clear.addEventListener("wje-button:click", (e) => {
       this.getAllOptions().forEach((option) => {
         option.selected = false;
@@ -311,6 +322,16 @@ class Select extends WJElement {
       let value = (option == null ? void 0 : option.textContent.trim()) || "";
       this.value = value;
       this.input.value = value;
+      if (option && option instanceof HTMLElement) {
+        this.slotStart.innerHTML = "";
+        if (option == null ? void 0 : option.querySelector("[slot=start]")) {
+          this.slotStart.appendChild(option == null ? void 0 : option.querySelector("[slot=start]").cloneNode(true));
+        }
+        this.slotEnd.innerHTML = "";
+        if (option == null ? void 0 : option.querySelector("[slot=end]")) {
+          this.slotEnd.appendChild(option == null ? void 0 : option.querySelector("[slot=end]").cloneNode(true));
+        }
+      }
     }
   }
   /**

package/dist/wje-textarea.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return 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  }\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}';
+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 {
   /**
    * Creates an instance of Textarea.

package/dist/wje-toast.js

@@ -5,58 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const simple = (notification, alert, options) => {
-  notification.classList.add("pgn-simple");
-  alert.innerHTML = "<div>" + options.message + "</div>";
-  {
-    alert.appendChild(close());
-  }
-};
-const flip = (notification, alert, options) => {
-  notification.classList.add("pgn-flip");
-  alert.innerHTML = "<span>" + options.message + "</span>";
-  {
-    alert.appendChild(close());
-  }
-};
-const circle = (notification, alert, options) => {
-  notification.classList.add("pgn-circle");
-  let title = "";
-  let message = "";
-  if (options.title)
-    title = `<p><b>${options.title}</b></p>`;
-  if (options.message)
-    message = `<p>${options.message}</p>`;
-  alert.innerHTML = `<wje-avatar>
-      <img alt="Silhouette of a person's head" src="/assets/img/avatar.svg" />
-    </wje-avatar>
-    <div>
-      ${title + message}
-  </div>`;
-  {
-    alert.appendChild(close());
-  }
-};
-const bar = (notification, alert, options) => {
-  notification.classList.add("pgn-bar");
-  alert.classList.add("alert-" + options.type);
-  alert.innerHTML = "<div>" + options.message + "</div>";
-  {
-    alert.appendChild(close());
-  }
-};
-const close = () => {
-  let icon = document.createElement("wje-icon");
-  icon.setAttribute("name", "x");
-  icon.setAttribute("slot", "icon-only");
-  let close2 = document.createElement("wje-button");
-  close2.setAttribute("fill", "link");
-  close2.setAttribute("size", "small");
-  close2.classList.add("close");
-  close2.appendChild(icon);
-  return close2;
-};
-const styles = '/*\n[ TOAST ]\n*/\n\n:host {\n  position: fixed;\n  z-index: 999;\n}\n\n:host([data-position$="-left"]) {\n  left: 0;\n}\n\n:host([data-position$="-right"]) {\n  right: 0;\n}\n\n:host([data-position^="top-"]) {\n  top: 0;\n}\n\n:host([data-position^="bottom-"]) {\n  bottom: 0;\n}\n\n:host([data-position="top"]) {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n:host([data-position="bottom"]) {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.pgn {\n  position: relative;\n  margin: 10px;\n}\n\n.pgn.pgn-flip{\n  /*margin-top: 0;*/\n}\n\n.pgn .alert {\n  margin: 0;\n  margin-bottom: 4px;\n}\n\n/* Simple\n------------------------------------\n*/\n\n.pgn-simple .alert {\n  padding-top: 13px;\n  padding-bottom: 13px;\n  max-width: 500px;\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  max-height: 250px;\n  overflow: hidden;\n}\n\n/* Bar\n------------------------------------\n*/\n\n.pgn-bar {\n  overflow: hidden;\n  margin: 0;\n}\n\n.pgn-bar .alert {\n  border-radius: 0;\n  padding-top: 13px;\n  padding-bottom: 13px;\n  max-height: 91px;\n}\n\n:host([data-position="top"]) .pgn-bar .alert {\n  animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  transform-origin: top left;\n  -webkit-transform-origin: top left;\n}\n\n:host([data-position="bottom"]) .pgn-bar .alert {\n  animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  transform-origin: bottom left;\n  -webkit-transform-origin: bottom left;\n}\n\n.pgn-bar .alert span {\n  opacity: 0;\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n}\n\n@keyframes slideInFromTop {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slideInFromTop {\n  0% {\n    -webkit-transform: translateY(-100%);\n  }\n  100% {\n    -webkit-transform: translateY(0);\n  }\n}\n@keyframes slideInFromBottom {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slideInFromBottom {\n  0% {\n    -webkit-transform: translateY(100%);\n  }\n  100% {\n    -webkit-transform: translateY(0);\n  }\n}\n  /* Circle\n  ------------------------------------\n  */\n\n  .pgn-circle .alert {\n    margin-bottom: 10px;\n    border-radius: 300px;\n    animation: fadeInCircle 0.3s ease forwards,\n    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n    -webkit-animation: fadeInCircle 0.3s ease forwards,\n    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n    height: 48px;\n    overflow: hidden;\n    padding: 6px 55px 6px 6px;\n    -webkit-transform: translateZ(0);\n    position: relative;\n    display: flex;\n  }\n  :host {\n    &[data-position$="-right"] .pgn-circle .alert {\n      float: right;\n    }\n\n    &[data-position$="-left"] .pgn-circle .alert {\n      float: left;\n    }\n\n    &[data-position^="bottom-"] .pgn-circle .alert {\n      margin-bottom: 20px;\n    }\n  }\n\n  wje-avatar:first-child {\n    margin-right: 8px;\n  }\n\n  .pgn-circle .alert .close {\n    margin-top: -12px;\n    position: absolute;\n    right: 18px;\n    top: 50%;\n    opacity: 0;\n    animation: fadeIn 0.3s 0.5s ease forwards;\n    -webkit-animation: fadeIn 0.3s 0.5s ease forwards;\n  }\n  .pgn-circle .alert p {\n    margin: 0;\n  }\n  .pgn-circle .alert > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .pgn-circle .alert > div > div {\n    display: table-cell;\n    vertical-align: middle;\n  }\n  @keyframes fadeInCircle {\n    0% {\n      opacity: 0;\n      width: 60px;\n    }\n    100% {\n      opacity: 1;\n      width: 60px;\n    }\n  }\n  @-webkit-keyframes fadeInCircle {\n    0% {\n      opacity: 0;\n      width: 60px;\n    }\n    100% {\n      opacity: 1;\n      width: 60px;\n    }\n  }\n  @keyframes resizeCircle {\n    0% {\n      width: 60px;\n    }\n    100% {\n      width: 300px;\n    }\n  }\n  @-webkit-keyframes resizeCircle {\n    0% {\n      width: 60px;\n    }\n    100% {\n      width: 300px;\n    }\n  }\n\n  /* Flip\n  ------------------------------------\n  */\n\n  :host[data-position^="bottom-"] .pgn-flip .alert {\n    -webkit-transform-origin: 50% 100%;\n    transform-origin: 50% 100%;\n  }\n  .pgn-flip .alert {\n    -webkit-transform-origin: 50% 0%;\n    transform-origin: 50% 0%;\n    -webkit-animation-name: flipInX;\n    animation-name: flipInX;\n    -webkit-animation-duration: 0.8s;\n    animation-duration: 0.8s;\n    border-radius: 0;\n    padding: 25px 35px;\n    max-width: 500px;\n    max-height: 250px;\n    overflow: hidden;\n  }\n  @-webkit-keyframes flipInX {\n    0% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n      -webkit-transition-timing-function: ease-in;\n    }\n    40% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n      -webkit-transition-timing-function: ease-out;\n    }\n    60% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n      -webkit-transition-timing-function: ease-in;\n      opacity: 1;\n    }\n    80% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n      -webkit-transition-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: perspective(400px);\n    }\n  }\n  @keyframes flipInX {\n    0% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n      -webkit-transition-timing-function: ease-in;\n      transition-timing-function: ease-in;\n    }\n    40% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n      -webkit-transition-timing-function: ease-out;\n      transition-timing-function: ease-out;\n    }\n    60% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n      -webkit-transition-timing-function: ease-in;\n      transition-timing-function: ease-in;\n      opacity: 1;\n    }\n    80% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n      -webkit-transition-timing-function: ease-out;\n      transition-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: perspective(400px);\n      transform: perspective(400px);\n    }\n  }\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* Pages Notification customizations */\n  :host([data-position="top"]) {\n    top: 60px;\n    left: 0;\n  }\n  :host([data-position="bottom"]) {\n    left: 0;\n  }\n\n  :host([data-position$="-left"]) {\n    left: 0;\n    right: auto;\n  }\n\n  :host([data-position^="top-"]) {\n    bottom: auto;\n  }\n\n  :host {\n    z-index: 999;\n  }\n\n  @media (max-width: 979px) {\n    body .pgn-wrapper[data-position="top"] {\n      left: 0 !important;\n    }\n    body .pgn-wrapper[data-position="bottom"] {\n      left: 0 !important;\n    }\n  }\n  @media (max-width: 767px) {\n    body .pgn-wrapper[data-position$="-left"],\n    body .pgn-wrapper[data-position$="-right"] {\n      left: 10px !important;\n      right: 10px !important;\n    }\n    body .pgn-wrapper[data-position$="-right"] .alert,\n    body .pgn-wrapper[data-position$="-left"] .alert {\n      max-width: 100%;\n      width: 100%;\n    }\n  }\n\n.alert {\n  background-image: none;\n  box-shadow: none;\n  text-shadow: none;\n  padding: 9px 19px 9px 15px;\n  border-radius: 3px;\n  font-size: 13px;\n  border-width: 0;\n  transition: all 0.2s linear 0s;\n  display: flex;\n  align-items: center;\n  &.bordered {\n    border-width: 1px;\n  }\n\n  .link {\n    color: #ce8f22;\n    font-weight: bold;\n  }\n\n  .alert-heading {\n    color: #ce8f22 !important;\n    margin-bottom: 5px;\n    font-weight: 600;\n  }\n\n  .btn-small {\n    position: relative;\n    top: -3.5px;\n  }\n\n  .button-set {\n    .btn {\n      position: relative;\n      top: 8px;\n    }\n  }\n}\n\n/* Alert : Color Options\n------------------------------------\n*/\n.alert-danger,\n.alert-error,\n.alert-danger.btn,\n.alert-error.btn {\n  background-color: var(--wje-color-primary-2) !important;\n  color: var(--wje-color-primary-11)!important;\n  border-color: var(--wje-color-primary-9)!important;\n\n  .close {\n    background-position: -95px -10px !important;\n  }\n}\n\n.alert-warning {\n\n  background-color: var(--wje-color-warning-2) !important;\n  color: var(--wje-color-warning-11)!important;\n  border-color: var(--wje-color-warning-9)!important;\n}\n\n.alert-info {\n  background-color: var(--wje-color-complete-2) !important;\n  color: var(--wje-color-complete-11) !important;\n  border-color: var(--wje-color-complete-9) !important;\n\n  .close {\n    background-position: -67px -10px !important;\n  }\n}\n\n.alert-success, .alert-success.btn {\n  background-color: var(--wje-color-success-2) !important;\n  color: var(--wje-color-success-11) !important;\n  border-color: var(--wje-color-success-9) !important;\n  .close {\n    background-position: -38px -10px !important;\n  }\n}\n\n.alert-default {\n  background-color: var(--wje-color-contrast-2) !important;\n  color: var(--wje-color-contrast-11)!important;\n  border-color: var(--wje-color-contrast-9)!important;\n\n  .close {\n    background-position: -67px -10px !important;\n  }\n}\n';
+const styles = '/*\n[ TOAST ]\n*/\n\n:host {\n  position: fixed;\n  z-index: 999;\n}\n\n:host([position$="-left"]) {\n  left: 0;\n}\n\n:host([position$="-right"]) {\n  right: 0;\n}\n\n:host([position^="top-"]) {\n  top: 0;\n}\n\n:host([position^="bottom-"]) {\n  bottom: 0;\n}\n\n:host([position="top"]) {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n:host([position="bottom"]) {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.pgn {\n  position: relative;\n  margin: 10px;\n}\n\n.pgn.pgn-flip{\n  /*margin-top: 0;*/\n}\n\n.pgn .alert {\n  margin: 0;\n  /*margin-bottom: 4px;*/\n}\n\n/* Simple\n------------------------------------\n*/\n\n.pgn-simple .alert {\n  padding-top: 13px;\n  padding-bottom: 13px;\n  max-width: 500px;\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  max-height: 250px;\n  overflow: hidden;\n}\n\n/* Bar\n------------------------------------\n*/\n\n.pgn-bar {\n  overflow: hidden;\n  margin: 0;\n}\n\n.pgn-bar .alert {\n  border-radius: 0;\n  padding-top: 13px;\n  padding-bottom: 13px;\n  max-height: 91px;\n}\n\n:host([position="top"]) .pgn-bar .alert {\n  animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  transform-origin: top left;\n  -webkit-transform-origin: top left;\n}\n\n:host([position="bottom"]) .pgn-bar .alert {\n  animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  transform-origin: bottom left;\n  -webkit-transform-origin: bottom left;\n}\n\n.pgn-bar .alert span {\n  opacity: 0;\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n}\n\n@keyframes slideInFromTop {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slideInFromTop {\n  0% {\n    -webkit-transform: translateY(-100%);\n  }\n  100% {\n    -webkit-transform: translateY(0);\n  }\n}\n@keyframes slideInFromBottom {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slideInFromBottom {\n  0% {\n    -webkit-transform: translateY(100%);\n  }\n  100% {\n    -webkit-transform: translateY(0);\n  }\n}\n  /* Circle\n  ------------------------------------\n  */\n\n  .pgn-circle .alert {\n    margin-bottom: 10px;\n    border-radius: 300px;\n    animation: fadeInCircle 0.3s ease forwards,\n    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n    -webkit-animation: fadeInCircle 0.3s ease forwards,\n    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n    height: 48px;\n    overflow: hidden;\n    padding: 6px 55px 6px 6px;\n    -webkit-transform: translateZ(0);\n    position: relative;\n    display: flex;\n  }\n  :host {\n    &[data-position$="-right"] .pgn-circle .alert {\n      float: right;\n    }\n\n    &[data-position$="-left"] .pgn-circle .alert {\n      float: left;\n    }\n\n    &[data-position^="bottom-"] .pgn-circle .alert {\n      margin-bottom: 20px;\n    }\n  }\n\n  wje-avatar:first-child {\n    margin-right: 8px;\n  }\n\n  .pgn-circle .alert .close {\n    margin-top: -12px;\n    position: absolute;\n    right: 18px;\n    top: 50%;\n    opacity: 0;\n    animation: fadeIn 0.3s 0.5s ease forwards;\n    -webkit-animation: fadeIn 0.3s 0.5s ease forwards;\n  }\n  .pgn-circle .alert p {\n    margin: 0;\n  }\n  .pgn-circle .alert > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .pgn-circle .alert > div > div {\n    display: table-cell;\n    vertical-align: middle;\n  }\n  @keyframes fadeInCircle {\n    0% {\n      opacity: 0;\n      width: 60px;\n    }\n    100% {\n      opacity: 1;\n      width: 60px;\n    }\n  }\n  @-webkit-keyframes fadeInCircle {\n    0% {\n      opacity: 0;\n      width: 60px;\n    }\n    100% {\n      opacity: 1;\n      width: 60px;\n    }\n  }\n  @keyframes resizeCircle {\n    0% {\n      width: 60px;\n    }\n    100% {\n      width: 300px;\n    }\n  }\n  @-webkit-keyframes resizeCircle {\n    0% {\n      width: 60px;\n    }\n    100% {\n      width: 300px;\n    }\n  }\n\n  /* Flip\n  ------------------------------------\n  */\n\n  :host[data-position^="bottom-"] .pgn-flip .alert {\n    -webkit-transform-origin: 50% 100%;\n    transform-origin: 50% 100%;\n  }\n  .pgn-flip .alert {\n    -webkit-transform-origin: 50% 0%;\n    transform-origin: 50% 0%;\n    -webkit-animation-name: flipInX;\n    animation-name: flipInX;\n    -webkit-animation-duration: 0.8s;\n    animation-duration: 0.8s;\n    border-radius: 0;\n    padding: 25px 35px;\n    max-width: 500px;\n    max-height: 250px;\n    overflow: hidden;\n  }\n  @-webkit-keyframes flipInX {\n    0% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n      -webkit-transition-timing-function: ease-in;\n    }\n    40% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n      -webkit-transition-timing-function: ease-out;\n    }\n    60% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n      -webkit-transition-timing-function: ease-in;\n      opacity: 1;\n    }\n    80% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n      -webkit-transition-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: perspective(400px);\n    }\n  }\n  @keyframes flipInX {\n    0% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n      -webkit-transition-timing-function: ease-in;\n      transition-timing-function: ease-in;\n    }\n    40% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n      -webkit-transition-timing-function: ease-out;\n      transition-timing-function: ease-out;\n    }\n    60% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n      -webkit-transition-timing-function: ease-in;\n      transition-timing-function: ease-in;\n      opacity: 1;\n    }\n    80% {\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n      transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n      -webkit-transition-timing-function: ease-out;\n      transition-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: perspective(400px);\n      transform: perspective(400px);\n    }\n  }\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* Pages Notification customizations */\n  :host([data-position="top"]) {\n    top: 60px;\n    left: 0;\n  }\n  :host([data-position="bottom"]) {\n    left: 0;\n  }\n\n  :host([data-position$="-left"]) {\n    left: 0;\n    right: auto;\n  }\n\n  :host([data-position^="top-"]) {\n    bottom: auto;\n  }\n\n  :host {\n    z-index: 999;\n  }\n\n  @media (max-width: 979px) {\n    body .pgn-wrapper[data-position="top"] {\n      left: 0 !important;\n    }\n    body .pgn-wrapper[data-position="bottom"] {\n      left: 0 !important;\n    }\n  }\n  @media (max-width: 767px) {\n    body .pgn-wrapper[data-position$="-left"],\n    body .pgn-wrapper[data-position$="-right"] {\n      left: 10px !important;\n      right: 10px !important;\n    }\n    body .pgn-wrapper[data-position$="-right"] .alert,\n    body .pgn-wrapper[data-position$="-left"] .alert {\n      max-width: 100%;\n      width: 100%;\n    }\n  }\n\n.alert {\n  background-image: none;\n  box-shadow: none;\n  text-shadow: none;\n  padding: 9px 19px 9px 15px;\n  border-radius: 3px;\n  font-size: 13px;\n  border-width: 0;\n  transition: all 0.2s linear 0s;\n  display: flex;\n  align-items: center;\n  &.bordered {\n    border-width: 1px;\n  }\n\n  .link {\n    color: #ce8f22;\n    font-weight: bold;\n  }\n\n  .alert-heading {\n    color: #ce8f22 !important;\n    margin-bottom: 5px;\n    font-weight: 600;\n  }\n\n  .btn-small {\n    position: relative;\n    top: -3.5px;\n  }\n\n  .button-set {\n    .btn {\n      position: relative;\n      top: 8px;\n    }\n  }\n}\n\n/* Alert : Color Options\n------------------------------------\n*/\n.alert-danger,\n.alert-error,\n.alert-danger.btn,\n.alert-error.btn {\n  background-color: var(--wje-color-primary-2) !important;\n  color: var(--wje-color-primary-11)!important;\n  border-color: var(--wje-color-primary-9)!important;\n\n  .close {\n    background-position: -95px -10px !important;\n  }\n}\n\n.alert-warning {\n\n  background-color: var(--wje-color-warning-2) !important;\n  color: var(--wje-color-warning-11)!important;\n  border-color: var(--wje-color-warning-9)!important;\n}\n\n.alert-info {\n  background-color: var(--wje-color-complete-2) !important;\n  color: var(--wje-color-complete-11) !important;\n  border-color: var(--wje-color-complete-9) !important;\n\n  .close {\n    background-position: -67px -10px !important;\n  }\n}\n\n.alert-success, .alert-success.btn {\n  background-color: var(--wje-color-success-2) !important;\n  color: var(--wje-color-success-11) !important;\n  border-color: var(--wje-color-success-9) !important;\n  .close {\n    background-position: -38px -10px !important;\n  }\n}\n\n.alert-default {\n  background-color: var(--wje-color-contrast-2) !important;\n  color: var(--wje-color-contrast-11)!important;\n  border-color: var(--wje-color-contrast-9)!important;\n\n  .close {\n    background-position: -67px -10px !important;\n  }\n}\n';
 class Toast extends WJElement {
   /**
    * Toast constructor
@@ -70,6 +19,24 @@ class Toast extends WJElement {
      */
     __publicField(this, "className", "Toast");
   }
+  set position(value) {
+    this.setAttribute("position", value);
+  }
+  get position() {
+    return this.getAttribute("position");
+  }
+  set type(value) {
+    this.setAttribute("type", value);
+  }
+  get type() {
+    return this.getAttribute("type");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
   /**
    * Get CSS stylesheet
    * @static
@@ -78,6 +45,15 @@ class Toast extends WJElement {
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["position", "type", "variant"];
+  }
   /**
    * Setup attributes
    */
@@ -93,7 +69,7 @@ class Toast extends WJElement {
    */
   draw(context, store, params) {
     let fragment = document.createDocumentFragment();
-    let options = {
+    ({
       message: "Záznam bol úspešne uložený.",
       position: this.position,
       showClose: true,
@@ -101,28 +77,20 @@ class Toast extends WJElement {
       timeout: this.duration || 4e3,
       type: this.type || "success",
       title: this.title || "John Doe"
-    };
-    this.container = document.querySelector("body");
-    this.notification = document.createElement("div");
-    this.notification.classList.add("pgn", "push-on-sidebar-open");
-    this.classList.add("pgn-wrapper");
-    this.setAttribute("data-position", options.position);
-    this.alert = document.createElement("div");
-    this.alert.classList.add("alert");
-    this.alert.classList.add("alert-" + options.type);
-    if (options.style == "bar") {
-      bar(this.notification, this.alert, options);
-    } else if (options.style == "flip") {
-      flip(this.notification, this.alert, options);
-    } else if (options.style == "circle") {
-      circle(this.notification, this.alert, options);
-    } else if (options.style == "simple") {
-      simple(this.notification, this.alert, options);
-    } else {
-      simple(this.notification, this.alert, options);
-    }
-    this.notification.appendChild(this.alert);
-    fragment.appendChild(this.notification);
+    });
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-toast");
+    let avatar = document.createElement("div");
+    avatar.classList.add("avatar");
+    let content = document.createElement("div");
+    content.classList.add("content");
+    let close = document.createElement("div");
+    close.classList.add("close");
+    native.appendChild(avatar);
+    native.appendChild(content);
+    native.appendChild(close);
+    fragment.appendChild(native);
     return fragment;
   }
 }

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.83",
+  "version": "0.1.85",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -61,6 +61,8 @@
     "sass": "^1.63.5",
     "terser": "^5.29.2",
     "vite": "^5.1.2",
-    "vite-plugin-javascript-obfuscator": "^3.1.0"
+    "vite-plugin-javascript-obfuscator": "^3.1.0",
+    "dotenv": "^16.4.5",
+    "animate.css": "^4.1.1"
   }
 }