wj-elements 0.1.121 → 0.1.123

package/dist/styles.css

@@ -823,4 +823,15 @@ z = font size
   content: attr(data-text);
   padding: 0 1rem;
   text-transform: uppercase;
+}
+
+.wje-toast-stack {
+  position: fixed;
+  top: 0;
+  margin: 0 .5rem;
+  width: 300px;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  z-index: 9999;
 }

package/dist/wje-animation.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 import WJElement from "./wje-element.js";
 import { fetchAndParseCSS } from "./wje-fetchAndParseCSS.js";
-const styles = '/*\r\n[ Standard Element ]\r\n*/\r\n\r\nhtml {\r\n  font-size: 100%;\r\n  -ms-text-size-adjust: 100%;\r\n  -webkit-text-size-adjust: 100%;\r\n}\r\nbody {\r\n  color: var(--wje-color-contrast-8);\r\n  font-family: var(--wje-font-family);\r\n  font-size: var(--wje-font-size);\r\n  font-weight: normal;\r\n  letter-spacing: 0.01em;\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-size-adjust: 100%;\r\n  -ms-text-size-adjust: 100%;\r\n  -webkit-font-feature-settings: "kern" 1;\r\n  -moz-font-feature-settings: "kern" 1;\r\n  margin: 0;\r\n  padding: 0 !important;\r\n}\r\n/* Headings\r\n------------------------------------\r\n*/\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  margin: .625rem 0;\r\n  font-family: var(--wje-font-family);\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-size-adjust: 100%;\r\n  -ms-text-size-adjust: 100%;\r\n  font-weight: 500;\r\n  color: inherit;\r\n  display: inline-block;\r\n}\r\nh1 {\r\n  font-size: var(--wje-font-size-2x-large);\r\n  line-height: 44px;\r\n  letter-spacing: -0.0141279em;\r\n}\r\nh2 {\r\n  font-size: var(--wje-font-size-x-large);\r\n  line-height: 34px;\r\n  letter-spacing: -0.021em;\r\n}\r\nh3 {\r\n  font-size: var(--wje-font-size-large);\r\n  line-height: 28px;\r\n  letter-spacing: -0.0114923em;\r\n}\r\nh4 {\r\n  font-size: var(--wje-font-size-large);\r\n  line-height: 26px;\r\n  letter-spacing: -0.00865734em;\r\n}\r\nh5 {\r\n  font-size: var(--wje-font-size-medium);\r\n  line-height: 24px;\r\n  letter-spacing: -0.00630069em;\r\n}\r\nh3 small,\r\nh4 small,\r\nh5 small {\r\n  font-weight: 300;\r\n}\r\nh1.block,\r\nh2.block,\r\nh3.block,\r\nh4.block,\r\nh5.block,\r\nh6.block {\r\n  padding-bottom: .625rem;\r\n}\r\n/* Lins and Others\r\n------------------------------------\r\n*/\r\na {\r\n  text-shadow: none !important;\r\n  color: var(--wje-color-primary-11);\r\n  transition: color 0.1s linear 0s, background-color 0.1s linear 0s,\r\n  opacity 0.2s linear 0s !important;\r\n  font-weight: 500;\r\n}\r\na:focus,\r\na:hover,\r\na:active {\r\n  color: var(--wje-color-primary);\r\n}\r\n\r\na,\r\na:focus,\r\na:hover,\r\na:active {\r\n  outline: 0 !important;\r\n  text-decoration: none;\r\n}\r\n\r\na.no-style{\r\n  color: inherit;\r\n  font-weight: normal;\r\n}\r\n\r\nbr {\r\n  line-height: normal;\r\n  clear: both;\r\n}\r\n\r\np {\r\n  display: block;\r\n  color: inherit;\r\n  font-size: var(--wje-font-size);\r\n  font-weight: normal;\r\n  letter-spacing: 0.00177646em;\r\n  line-height: 21px;\r\n  margin: 0 0 .625rem 0;\r\n  font-style: normal;\r\n  white-space: normal;\r\n}\r\n\r\nsmall,\r\n.small {\r\n  line-height: 18px;\r\n  font-size: 85.714%;\r\n}\r\n\r\nlabel {\r\n  &.inline {\r\n    display: inline-block;\r\n    position: relative;\r\n    top: 0;\r\n    font-size: 13px;\r\n  }\r\n}\r\n\r\nul,\r\nol {\r\n  margin-bottom: .625rem;\r\n  & > li {\r\n    padding-left: 3px;\r\n    line-height: 24px;\r\n  }\r\n  &.lg-icon {\r\n    & > li {\r\n      font-size: 21px;\r\n      & span {\r\n        font-size: 14px;\r\n      }\r\n    }\r\n  }\r\n  &.no-style {\r\n    list-style: none;\r\n    padding-left: 5px;\r\n  }\r\n}\r\n\r\naddress {\r\n  margin-bottom: 0;\r\n  a {\r\n    color: var(--wje-color-contrast-8);\r\n  }\r\n}\r\n\r\nblockquote {\r\n  padding: 4px 0 0 18px;\r\n  border-left: 0;\r\n  &:before {\r\n    content: "\\e95d";\r\n    font-size: 20px;\r\n    margin-right: 6px;\r\n    float: left;\r\n    position: relative;\r\n    top: -12px;\r\n  }\r\n  p {\r\n    font-size: 16px;\r\n    margin-bottom: 4px;\r\n  }\r\n  small {\r\n    line-height: 29px;\r\n    color: var(--wje-color-contrast-8);\r\n    &:before {\r\n      content: "—";\r\n      margin-right: 6px;\r\n    }\r\n  }\r\n  &.pull-right {\r\n    border-right: 0;\r\n    &:before {\r\n      float: right;\r\n      content: "";\r\n      margin-left: 6px;\r\n      margin-right: 0;\r\n    }\r\n    small {\r\n      padding-right: 30px;\r\n      &:after {\r\n        content: "";\r\n      }\r\n    }\r\n  }\r\n}\r\nhr {\r\n  border-color: var(--wje-border-color);\r\n  &.double {\r\n    border-width: 2px;\r\n  }\r\n  &.dotted {\r\n    border-style: dotted none none;\r\n  }\r\n}\r\n\r\n.ff-sup {\r\n  font-feature-settings: "kern" 1, "sups" 1;\r\n  -webkit-font-feature-settings: "kern" 1, "sups" 1;\r\n  -moz-font-feature-settings: "kern" 1, "sups" 1;\r\n}\r\n\r\n.ff-sub {\r\n  font-feature-settings: "kern" 1, "subs" 1;\r\n  -webkit-font-feature-settings: "kern" 1, "subs" 1;\r\n  -moz-font-feature-settings: "kern" 1, "subs" 1;\r\n}\r\n\r\n/* Standard HTML Typography tags\r\n------------------------------------\r\n*/\r\n\r\ncode {\r\n  color: var(--wje-color-contrast-6);\r\n  background-color: var(--wje-color);\r\n  font-size: 97%;\r\n  position: relative;\r\n  line-height: inherit;\r\n  border-radius: 3px;\r\n  padding: 5px 7px;\r\n  margin: 0;\r\n  &:hover {\r\n    color: var(--wje-color-complete);\r\n  }\r\n  &.code-sm{\r\n    padding: 3px 6px;\r\n  }\r\n}\r\n\r\nfigcaption {\r\n  font-size: 13px;\r\n  margin-top: .625rem;\r\n  font-weight: 400;\r\n  display: block;\r\n  letter-spacing: 0.008em;\r\n  text-align: center;\r\n  color: var(--wje-color-contrast-6);\r\n  line-height: 1.46;\r\n}\r\n\r\nem {\r\n  font-style: italic !important;\r\n  font-family: inherit;\r\n  font-weight: inherit;\r\n}\r\n\r\nins {\r\n  font-family: var(--wje-font-family);\r\n  border-bottom: 1px solid #d0d0d0;\r\n  text-decoration: none;\r\n  color: var(--wje-color-contrast-8);\r\n  font-weight: normal;\r\n  font-size: 94%;\r\n}\r\n\r\ncite {\r\n  font-family: var(--wje-font-family);\r\n  font-weight: 300;\r\n  color: var(--wje-color-contrast-6);\r\n  text-decoration: none;\r\n  font-style: normal;\r\n  hanging-punctuation: first;\r\n}\r\n\r\nsup {\r\n  top: -0.28em;\r\n  font-size: 70%;\r\n}\r\n\r\nsub {\r\n  bottom: 0.03em;\r\n}\r\n\r\nvar {\r\n  font-family: var(--wje-font-family);\r\n  font-feature-settings: "calt" 1, "tnum" 1, "frac" 1, "case" 1, "ss01" 1,\r\n  "cv11" 1;\r\n}\r\n\r\nabbr {\r\n  text-decoration: none;\r\n  letter-spacing: 0.01em;\r\n  background-color: transparent;\r\n  border-bottom: 2px solid #ffba5a;\r\n  transition-property: color, background, border;\r\n  transition-duration: 0.15s;\r\n  transition-timing-function: linear;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n\r\nq {\r\n  font-family: var(--wje-font-family);\r\n  font-weight: 500;\r\n  font-size: 20px;\r\n  hanging-punctuation: first;\r\n\r\n  &:before {\r\n    content: "\\201C";\r\n    color: rgba(0, 0, 0, 0.44);\r\n    font-size: 35px;\r\n  }\r\n\r\n  &:after {\r\n    content: "\\201D";\r\n    font-size: 35px;\r\n    color: rgba(0, 0, 0, 0.44);\r\n  }\r\n}\r\naudio {\r\n  margin-top: 42px;\r\n}\r\nhr {\r\n  clear: both;\r\n  margin-bottom: 42px;\r\n  margin-top: 42px;\r\n  border: 0;\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.13);\r\n}\r\naddress {\r\n  font-family: var(--wje-font-family);\r\n  font-style: normal;\r\n  margin: 0 0 1.75em;\r\n  font-size: 14px;\r\n  line-height: 24px;\r\n  margin-top: 24px;\r\n}\r\nabbr {\r\n  text-decoration: none;\r\n  letter-spacing: 0.01em;\r\n  background-color: transparent;\r\n  border-bottom: 2px solid #ffba5a;\r\n  transition-property: color, background, border;\r\n  transition-duration: 0.15s;\r\n  transition-timing-function: linear;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n\r\nacronym {\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n  background-color: transparent;\r\n  border-bottom: 2px solid #ffba5a;\r\n  transition-property: color, background, border;\r\n  transition-duration: 0.15s;\r\n  transition-timing-function: linear;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n\r\npre {\r\n  tab-size: 4;\r\n  font-size: 85.714%;\r\n  overflow-x: auto;\r\n  font-family: monospace, monospace;\r\n  line-height: 1.7;\r\n  counter-reset: line;\r\n  background-color: var(--wje-color-contrast-3)er;\r\n  color: var(--wje-color-contrast-8);\r\n  margin-inline: 0;\r\n  padding: 1rem 1.25rem;\r\n  border-radius: 3px;\r\n  margin-top: 1rem;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\ndt {\r\n  font-weight: 700;\r\n  margin-bottom: 5px;\r\n}\r\n\r\ndd {\r\n  margin: 0 0 1.75em;\r\n}\r\n\r\nkbd {\r\n  font-size: 85.714%;\r\n  font-family: var(--wje-font-family);\r\n  position: relative;\r\n  line-height: 34px;\r\n  top: -3px;\r\n  letter-spacing: 0.01em;\r\n  padding: 5px 7px;\r\n  margin: 0;\r\n  color: rgba(0, 0, 0, 0.53);\r\n  background-color: #fff;\r\n  border-radius: 3px;\r\n  box-shadow: 0 2px 0 1px #c7c7c7, 0 1px 0 1px rgba(0, 0, 0, 0.15),\r\n  0 0 0 1px #ececec;\r\n}\r\n\r\n/* Types\r\n------------------------------------\r\n*/\r\n\r\n.overline {\r\n  text-transform: uppercase;\r\n  display: inline-block;\r\n  letter-spacing: 0.06em;\r\n  font-size: 11px;\r\n}\r\n\r\n/* Font Sizes\r\n------------------------------------\r\n*/\r\n\r\n.small-text {\r\n  font-size: 12px !important;\r\n  letter-spacing: 0.00849077em;\r\n  line-height: 18px;\r\n  a {\r\n    text-decoration: underline;\r\n  }\r\n}\r\n.normal-text {\r\n  font-size: 13px !important;\r\n}\r\n.large-text {\r\n  font-size: 15px !important;\r\n}\r\n\r\n/* Font Weights\r\n------------------------------------\r\n */\r\n\r\n.normal {\r\n  font-weight: normal !important;\r\n}\r\n.semi-bold {\r\n  font-weight: 500 !important;\r\n}\r\n.bold {\r\n  font-weight: 600 !important;\r\n}\r\n.light {\r\n  font-weight: 300 !important;\r\n}\r\n\r\n/* Misc\r\n------------------------------------\r\n*/\r\n\r\n.all-caps {\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.07em !important;\r\n}\r\n.text-uppercase {\r\n  text-transform: uppercase !important;\r\n  letter-spacing: 0.07em !important;\r\n}\r\n.muted {\r\n  color: var(--wje-color-contrast-6);\r\n}\r\n.hint-text {\r\n  opacity: 0.76 !important;\r\n}\r\n.no-decoration {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.text-ellipsis {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n/* Gradients\r\n------------------------------------\r\n*/\r\n.gradient-grey {\r\n  background: -webkit-linear-gradient(\r\n                  top,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n  background: linear-gradient(\r\n                  to bottom,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n}\r\n.gradient-black {\r\n  background: -webkit-linear-gradient(\r\n                  top,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n  background: linear-gradient(\r\n                  to bottom,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n}\r\n\r\n/* Other Colors\r\n------------------------------------\r\n*/\r\n.bg-black {\r\n  background-color: var(--wje-color-black) !important;\r\n  color: var(--wje-color-contrast-0);\r\n}\r\n.bg-white {\r\n  background-color: var(--wje-color-contrast-0) !important;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n.bg-transparent {\r\n  background-color: transparent !important;\r\n}\r\n\r\n/* Text Colors */\r\n.link {\r\n  opacity: 0.7;\r\n  &:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n/* Text Aligngments\r\n------------------------------------\r\n*/\r\n\r\n.text-right {\r\n  text-align: right !important;\r\n}\r\n.text-left {\r\n  text-align: left !important;\r\n}\r\n.text-center {\r\n  text-align: center !important;\r\n}\r\n\r\n/* Strokes\r\n------------------------------------\r\n*/\r\n\r\n.stroke-primary {\r\n  stroke: var(--wje-color-primary) !important;\r\n}\r\n.stroke-complete {\r\n  stroke: var(--wje-color-complete) !important;\r\n}\r\n.stroke-success {\r\n  stroke: var(--wje-color-success) !important;\r\n}\r\n.stroke-info {\r\n  stroke: var(--wje-color-info) !important;\r\n}\r\n.stroke-warning {\r\n  stroke: var(--wje-color-warning) !important;\r\n}\r\n.stroke-danger {\r\n  stroke: var(--wje-color-danger) !important;\r\n}\r\n\r\n/* Font Sizes\r\n------------------------------------\r\ntracking =a+b×e(c × z)\r\n\r\na, b and c are constants\r\na = -0.0223\r\nb = 0.185\r\nc = -0.1745\r\nz = font size\r\n\r\n*/\r\n.fs-x-small {\r\n  font-size: var(--wje-font-size-x-small) !important;\r\n  letter-spacing: 0.0180093em;\r\n  line-height: 15px;\r\n}\r\n.fs-small {\r\n  font-size: var(--wje-font-size-small) !important;\r\n  letter-spacing: 0.00849077em;\r\n  line-height: 18px;\r\n}\r\n.fs {\r\n  font-size: var(--wje-font-size) !important;\r\n  letter-spacing: 0.00177646em;\r\n  line-height: 22px;\r\n}\r\n\r\n.fs-medium {\r\n  font-size: var(--wje-font-size-medium) !important;\r\n  letter-spacing: -0.00295978em;\r\n  line-height: 24px;\r\n}\r\n\r\n.fs-large {\r\n  font-size: var(--wje-font-size-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-x-large {\r\n  font-size: var(--wje-font-size-x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-2x-large {\r\n  font-size: var(--wje-font-size-2x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-3x-large {\r\n  font-size: var(--wje-font-size-3x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-4x-large {\r\n  font-size: var(--wje-font-size-4x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n/* Line-heights\r\n------------------------------------\r\n*/\r\n.lh-normal {\r\n  line-height: normal;\r\n}\r\n.lh-10 {\r\n  line-height: 10px;\r\n}\r\n.lh-11 {\r\n  line-height: 11px;\r\n}\r\n.lh-12 {\r\n  line-height: 12px;\r\n}\r\n.lh-13 {\r\n  line-height: 13px;\r\n}\r\n.lh-14 {\r\n  line-height: 14px;\r\n}\r\n.lh-15 {\r\n  line-height: 15px;\r\n}\r\n.lh-16 {\r\n  line-height: 16px;\r\n}\r\n\r\n/* Font Faces\r\n------------------------------------\r\n*/\r\n\r\n.font-arial {\r\n  font-family: Arial, sans-serif !important;\r\n}\r\n.font-montserrat {\r\n  font-family: var(--wje-font-family-secondary) !important;\r\n}\r\n.font-heading {\r\n  font-family: var(--wje-font-family-secondary);\r\n}\r\n.font-secondary {\r\n  font-family: var(--wje-font-family-secondary);\r\n}\r\n\r\n/* Wells\r\n------------------------------------\r\n*/\r\n.well {\r\n  background-color: var(--wje-color-contrast-3);\r\n  -webkit-border-radius: 3px;\r\n  -moz-border-radius: 3px;\r\n  border-radius: 3px;\r\n  -webkit-box-shadow: none !important;\r\n  -moz-box-shadow: none !important;\r\n  box-shadow: none !important;\r\n  border: none;\r\n  background-image: none;\r\n  &.well-large {\r\n    padding: 24px;\r\n    width: auto;\r\n  }\r\n  &.well-small {\r\n    padding: 13px;\r\n    width: auto;\r\n  }\r\n  &.green {\r\n    background-color: var(--wje-color-complete);\r\n    color: var(--wje-color-contrast-0);\r\n    border: none;\r\n  }\r\n}\r\n.overflow-ellipsis {\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Responsive Handlers : Typo\r\n------------------------------------\r\n*/\r\n\r\n@media (max-width: 1024px) {\r\n  body,\r\n  p {\r\n    font-size: var(--wje-font-size-small);\r\n    line-height: 20px;\r\n  }\r\n\r\n  h1 {\r\n    font-size: var(--wje-font-size-2x-large);\r\n    line-height: 44px;\r\n    letter-spacing: -0.08px;\r\n  }\r\n  h2 {\r\n    font-size: var(--wje-font-size-x-large);\r\n    line-height: 40px;\r\n  }\r\n  h3 {\r\n    font-size: var(--wje-font-size-large);\r\n    line-height: 35.88px;\r\n  }\r\n  h4 {\r\n    font-size: var(--wje-font-size-large);\r\n    line-height: 33.88px;\r\n  }\r\n  h5 {\r\n    font-size: var(--wje-font-size-medium);\r\n    line-height: 25.88px;\r\n  }\r\n  small,\r\n  .small {\r\n    font-size: 89%;\r\n    line-height: 17px;\r\n  }\r\n}\r\n\r\n.alert {\r\n  & > p,\r\n  & > ul {\r\n    margin-bottom: 0;\r\n  }\r\n}\r\n.table {\r\n  & > tbody {\r\n    & > tr {\r\n      & > td,\r\n      & > th {\r\n        line-height: 1.42857143;\r\n      }\r\n    }\r\n  }\r\n  & > tfoot {\r\n    & > tr {\r\n      & > td,\r\n      & > th {\r\n        line-height: 1.42857143;\r\n      }\r\n    }\r\n  }\r\n  & > thead {\r\n    & > tr {\r\n      & > td,\r\n      & > th {\r\n        line-height: 1.42857143;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n/* For Windows : Fixes\r\n------------------------------------\r\n*/\r\n\r\n\r\n.line-clamp-2 {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.line-clamp-3 {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.line-clamp-5 {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 5;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.text-separator {\r\n  display: block;\r\n  text-align: center;\r\n  margin: 1.5rem 0;\r\n  width: 100%;\r\n  background: linear-gradient(to top, transparent 0%, transparent calc(50% - 1px), var(--wje-border-color) calc(50% - 1px), var(--wje-border-color) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);\r\n}\r\n.text-separator::before {\r\n  background: #fff;\r\n  content: attr(data-text);\r\n  padding: 0 1rem;\r\n  text-transform: uppercase;\r\n}';
+const styles = '/*\r\n[ Standard Element ]\r\n*/\r\n\r\nhtml {\r\n  font-size: 100%;\r\n  -ms-text-size-adjust: 100%;\r\n  -webkit-text-size-adjust: 100%;\r\n}\r\nbody {\r\n  color: var(--wje-color-contrast-8);\r\n  font-family: var(--wje-font-family);\r\n  font-size: var(--wje-font-size);\r\n  font-weight: normal;\r\n  letter-spacing: 0.01em;\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-size-adjust: 100%;\r\n  -ms-text-size-adjust: 100%;\r\n  -webkit-font-feature-settings: "kern" 1;\r\n  -moz-font-feature-settings: "kern" 1;\r\n  margin: 0;\r\n  padding: 0 !important;\r\n}\r\n/* Headings\r\n------------------------------------\r\n*/\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  margin: .625rem 0;\r\n  font-family: var(--wje-font-family);\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-size-adjust: 100%;\r\n  -ms-text-size-adjust: 100%;\r\n  font-weight: 500;\r\n  color: inherit;\r\n  display: inline-block;\r\n}\r\nh1 {\r\n  font-size: var(--wje-font-size-2x-large);\r\n  line-height: 44px;\r\n  letter-spacing: -0.0141279em;\r\n}\r\nh2 {\r\n  font-size: var(--wje-font-size-x-large);\r\n  line-height: 34px;\r\n  letter-spacing: -0.021em;\r\n}\r\nh3 {\r\n  font-size: var(--wje-font-size-large);\r\n  line-height: 28px;\r\n  letter-spacing: -0.0114923em;\r\n}\r\nh4 {\r\n  font-size: var(--wje-font-size-large);\r\n  line-height: 26px;\r\n  letter-spacing: -0.00865734em;\r\n}\r\nh5 {\r\n  font-size: var(--wje-font-size-medium);\r\n  line-height: 24px;\r\n  letter-spacing: -0.00630069em;\r\n}\r\nh3 small,\r\nh4 small,\r\nh5 small {\r\n  font-weight: 300;\r\n}\r\nh1.block,\r\nh2.block,\r\nh3.block,\r\nh4.block,\r\nh5.block,\r\nh6.block {\r\n  padding-bottom: .625rem;\r\n}\r\n/* Lins and Others\r\n------------------------------------\r\n*/\r\na {\r\n  text-shadow: none !important;\r\n  color: var(--wje-color-primary-11);\r\n  transition: color 0.1s linear 0s, background-color 0.1s linear 0s,\r\n  opacity 0.2s linear 0s !important;\r\n  font-weight: 500;\r\n}\r\na:focus,\r\na:hover,\r\na:active {\r\n  color: var(--wje-color-primary);\r\n}\r\n\r\na,\r\na:focus,\r\na:hover,\r\na:active {\r\n  outline: 0 !important;\r\n  text-decoration: none;\r\n}\r\n\r\na.no-style{\r\n  color: inherit;\r\n  font-weight: normal;\r\n}\r\n\r\nbr {\r\n  line-height: normal;\r\n  clear: both;\r\n}\r\n\r\np {\r\n  display: block;\r\n  color: inherit;\r\n  font-size: var(--wje-font-size);\r\n  font-weight: normal;\r\n  letter-spacing: 0.00177646em;\r\n  line-height: 21px;\r\n  margin: 0 0 .625rem 0;\r\n  font-style: normal;\r\n  white-space: normal;\r\n}\r\n\r\nsmall,\r\n.small {\r\n  line-height: 18px;\r\n  font-size: 85.714%;\r\n}\r\n\r\nlabel {\r\n  &.inline {\r\n    display: inline-block;\r\n    position: relative;\r\n    top: 0;\r\n    font-size: 13px;\r\n  }\r\n}\r\n\r\nul,\r\nol {\r\n  margin-bottom: .625rem;\r\n  & > li {\r\n    padding-left: 3px;\r\n    line-height: 24px;\r\n  }\r\n  &.lg-icon {\r\n    & > li {\r\n      font-size: 21px;\r\n      & span {\r\n        font-size: 14px;\r\n      }\r\n    }\r\n  }\r\n  &.no-style {\r\n    list-style: none;\r\n    padding-left: 5px;\r\n  }\r\n}\r\n\r\naddress {\r\n  margin-bottom: 0;\r\n  a {\r\n    color: var(--wje-color-contrast-8);\r\n  }\r\n}\r\n\r\nblockquote {\r\n  padding: 4px 0 0 18px;\r\n  border-left: 0;\r\n  &:before {\r\n    content: "\\e95d";\r\n    font-size: 20px;\r\n    margin-right: 6px;\r\n    float: left;\r\n    position: relative;\r\n    top: -12px;\r\n  }\r\n  p {\r\n    font-size: 16px;\r\n    margin-bottom: 4px;\r\n  }\r\n  small {\r\n    line-height: 29px;\r\n    color: var(--wje-color-contrast-8);\r\n    &:before {\r\n      content: "—";\r\n      margin-right: 6px;\r\n    }\r\n  }\r\n  &.pull-right {\r\n    border-right: 0;\r\n    &:before {\r\n      float: right;\r\n      content: "";\r\n      margin-left: 6px;\r\n      margin-right: 0;\r\n    }\r\n    small {\r\n      padding-right: 30px;\r\n      &:after {\r\n        content: "";\r\n      }\r\n    }\r\n  }\r\n}\r\nhr {\r\n  border-color: var(--wje-border-color);\r\n  &.double {\r\n    border-width: 2px;\r\n  }\r\n  &.dotted {\r\n    border-style: dotted none none;\r\n  }\r\n}\r\n\r\n.ff-sup {\r\n  font-feature-settings: "kern" 1, "sups" 1;\r\n  -webkit-font-feature-settings: "kern" 1, "sups" 1;\r\n  -moz-font-feature-settings: "kern" 1, "sups" 1;\r\n}\r\n\r\n.ff-sub {\r\n  font-feature-settings: "kern" 1, "subs" 1;\r\n  -webkit-font-feature-settings: "kern" 1, "subs" 1;\r\n  -moz-font-feature-settings: "kern" 1, "subs" 1;\r\n}\r\n\r\n/* Standard HTML Typography tags\r\n------------------------------------\r\n*/\r\n\r\ncode {\r\n  color: var(--wje-color-contrast-6);\r\n  background-color: var(--wje-color);\r\n  font-size: 97%;\r\n  position: relative;\r\n  line-height: inherit;\r\n  border-radius: 3px;\r\n  padding: 5px 7px;\r\n  margin: 0;\r\n  &:hover {\r\n    color: var(--wje-color-complete);\r\n  }\r\n  &.code-sm{\r\n    padding: 3px 6px;\r\n  }\r\n}\r\n\r\nfigcaption {\r\n  font-size: 13px;\r\n  margin-top: .625rem;\r\n  font-weight: 400;\r\n  display: block;\r\n  letter-spacing: 0.008em;\r\n  text-align: center;\r\n  color: var(--wje-color-contrast-6);\r\n  line-height: 1.46;\r\n}\r\n\r\nem {\r\n  font-style: italic !important;\r\n  font-family: inherit;\r\n  font-weight: inherit;\r\n}\r\n\r\nins {\r\n  font-family: var(--wje-font-family);\r\n  border-bottom: 1px solid #d0d0d0;\r\n  text-decoration: none;\r\n  color: var(--wje-color-contrast-8);\r\n  font-weight: normal;\r\n  font-size: 94%;\r\n}\r\n\r\ncite {\r\n  font-family: var(--wje-font-family);\r\n  font-weight: 300;\r\n  color: var(--wje-color-contrast-6);\r\n  text-decoration: none;\r\n  font-style: normal;\r\n  hanging-punctuation: first;\r\n}\r\n\r\nsup {\r\n  top: -0.28em;\r\n  font-size: 70%;\r\n}\r\n\r\nsub {\r\n  bottom: 0.03em;\r\n}\r\n\r\nvar {\r\n  font-family: var(--wje-font-family);\r\n  font-feature-settings: "calt" 1, "tnum" 1, "frac" 1, "case" 1, "ss01" 1,\r\n  "cv11" 1;\r\n}\r\n\r\nabbr {\r\n  text-decoration: none;\r\n  letter-spacing: 0.01em;\r\n  background-color: transparent;\r\n  border-bottom: 2px solid #ffba5a;\r\n  transition-property: color, background, border;\r\n  transition-duration: 0.15s;\r\n  transition-timing-function: linear;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n\r\nq {\r\n  font-family: var(--wje-font-family);\r\n  font-weight: 500;\r\n  font-size: 20px;\r\n  hanging-punctuation: first;\r\n\r\n  &:before {\r\n    content: "\\201C";\r\n    color: rgba(0, 0, 0, 0.44);\r\n    font-size: 35px;\r\n  }\r\n\r\n  &:after {\r\n    content: "\\201D";\r\n    font-size: 35px;\r\n    color: rgba(0, 0, 0, 0.44);\r\n  }\r\n}\r\naudio {\r\n  margin-top: 42px;\r\n}\r\nhr {\r\n  clear: both;\r\n  margin-bottom: 42px;\r\n  margin-top: 42px;\r\n  border: 0;\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.13);\r\n}\r\naddress {\r\n  font-family: var(--wje-font-family);\r\n  font-style: normal;\r\n  margin: 0 0 1.75em;\r\n  font-size: 14px;\r\n  line-height: 24px;\r\n  margin-top: 24px;\r\n}\r\nabbr {\r\n  text-decoration: none;\r\n  letter-spacing: 0.01em;\r\n  background-color: transparent;\r\n  border-bottom: 2px solid #ffba5a;\r\n  transition-property: color, background, border;\r\n  transition-duration: 0.15s;\r\n  transition-timing-function: linear;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n\r\nacronym {\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n  background-color: transparent;\r\n  border-bottom: 2px solid #ffba5a;\r\n  transition-property: color, background, border;\r\n  transition-duration: 0.15s;\r\n  transition-timing-function: linear;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n\r\npre {\r\n  tab-size: 4;\r\n  font-size: 85.714%;\r\n  overflow-x: auto;\r\n  font-family: monospace, monospace;\r\n  line-height: 1.7;\r\n  counter-reset: line;\r\n  background-color: var(--wje-color-contrast-3)er;\r\n  color: var(--wje-color-contrast-8);\r\n  margin-inline: 0;\r\n  padding: 1rem 1.25rem;\r\n  border-radius: 3px;\r\n  margin-top: 1rem;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\ndt {\r\n  font-weight: 700;\r\n  margin-bottom: 5px;\r\n}\r\n\r\ndd {\r\n  margin: 0 0 1.75em;\r\n}\r\n\r\nkbd {\r\n  font-size: 85.714%;\r\n  font-family: var(--wje-font-family);\r\n  position: relative;\r\n  line-height: 34px;\r\n  top: -3px;\r\n  letter-spacing: 0.01em;\r\n  padding: 5px 7px;\r\n  margin: 0;\r\n  color: rgba(0, 0, 0, 0.53);\r\n  background-color: #fff;\r\n  border-radius: 3px;\r\n  box-shadow: 0 2px 0 1px #c7c7c7, 0 1px 0 1px rgba(0, 0, 0, 0.15),\r\n  0 0 0 1px #ececec;\r\n}\r\n\r\n/* Types\r\n------------------------------------\r\n*/\r\n\r\n.overline {\r\n  text-transform: uppercase;\r\n  display: inline-block;\r\n  letter-spacing: 0.06em;\r\n  font-size: 11px;\r\n}\r\n\r\n/* Font Sizes\r\n------------------------------------\r\n*/\r\n\r\n.small-text {\r\n  font-size: 12px !important;\r\n  letter-spacing: 0.00849077em;\r\n  line-height: 18px;\r\n  a {\r\n    text-decoration: underline;\r\n  }\r\n}\r\n.normal-text {\r\n  font-size: 13px !important;\r\n}\r\n.large-text {\r\n  font-size: 15px !important;\r\n}\r\n\r\n/* Font Weights\r\n------------------------------------\r\n */\r\n\r\n.normal {\r\n  font-weight: normal !important;\r\n}\r\n.semi-bold {\r\n  font-weight: 500 !important;\r\n}\r\n.bold {\r\n  font-weight: 600 !important;\r\n}\r\n.light {\r\n  font-weight: 300 !important;\r\n}\r\n\r\n/* Misc\r\n------------------------------------\r\n*/\r\n\r\n.all-caps {\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.07em !important;\r\n}\r\n.text-uppercase {\r\n  text-transform: uppercase !important;\r\n  letter-spacing: 0.07em !important;\r\n}\r\n.muted {\r\n  color: var(--wje-color-contrast-6);\r\n}\r\n.hint-text {\r\n  opacity: 0.76 !important;\r\n}\r\n.no-decoration {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.text-ellipsis {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n/* Gradients\r\n------------------------------------\r\n*/\r\n.gradient-grey {\r\n  background: -webkit-linear-gradient(\r\n                  top,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n  background: linear-gradient(\r\n                  to bottom,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n}\r\n.gradient-black {\r\n  background: -webkit-linear-gradient(\r\n                  top,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n  background: linear-gradient(\r\n                  to bottom,\r\n                  rgba(0, 0, 0, 0) 0%,\r\n                  rgba(0, 0, 0, 0.8) 75%\r\n  );\r\n}\r\n\r\n/* Other Colors\r\n------------------------------------\r\n*/\r\n.bg-black {\r\n  background-color: var(--wje-color-black) !important;\r\n  color: var(--wje-color-contrast-0);\r\n}\r\n.bg-white {\r\n  background-color: var(--wje-color-contrast-0) !important;\r\n  color: var(--wje-color-contrast-8);\r\n}\r\n.bg-transparent {\r\n  background-color: transparent !important;\r\n}\r\n\r\n/* Text Colors */\r\n.link {\r\n  opacity: 0.7;\r\n  &:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n/* Text Aligngments\r\n------------------------------------\r\n*/\r\n\r\n.text-right {\r\n  text-align: right !important;\r\n}\r\n.text-left {\r\n  text-align: left !important;\r\n}\r\n.text-center {\r\n  text-align: center !important;\r\n}\r\n\r\n/* Strokes\r\n------------------------------------\r\n*/\r\n\r\n.stroke-primary {\r\n  stroke: var(--wje-color-primary) !important;\r\n}\r\n.stroke-complete {\r\n  stroke: var(--wje-color-complete) !important;\r\n}\r\n.stroke-success {\r\n  stroke: var(--wje-color-success) !important;\r\n}\r\n.stroke-info {\r\n  stroke: var(--wje-color-info) !important;\r\n}\r\n.stroke-warning {\r\n  stroke: var(--wje-color-warning) !important;\r\n}\r\n.stroke-danger {\r\n  stroke: var(--wje-color-danger) !important;\r\n}\r\n\r\n/* Font Sizes\r\n------------------------------------\r\ntracking =a+b×e(c × z)\r\n\r\na, b and c are constants\r\na = -0.0223\r\nb = 0.185\r\nc = -0.1745\r\nz = font size\r\n\r\n*/\r\n.fs-x-small {\r\n  font-size: var(--wje-font-size-x-small) !important;\r\n  letter-spacing: 0.0180093em;\r\n  line-height: 15px;\r\n}\r\n.fs-small {\r\n  font-size: var(--wje-font-size-small) !important;\r\n  letter-spacing: 0.00849077em;\r\n  line-height: 18px;\r\n}\r\n.fs {\r\n  font-size: var(--wje-font-size) !important;\r\n  letter-spacing: 0.00177646em;\r\n  line-height: 22px;\r\n}\r\n\r\n.fs-medium {\r\n  font-size: var(--wje-font-size-medium) !important;\r\n  letter-spacing: -0.00295978em;\r\n  line-height: 24px;\r\n}\r\n\r\n.fs-large {\r\n  font-size: var(--wje-font-size-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-x-large {\r\n  font-size: var(--wje-font-size-x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-2x-large {\r\n  font-size: var(--wje-font-size-2x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-3x-large {\r\n  font-size: var(--wje-font-size-3x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n.fs-4x-large {\r\n  font-size: var(--wje-font-size-4x-large) !important;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n}\r\n\r\n/* Line-heights\r\n------------------------------------\r\n*/\r\n.lh-normal {\r\n  line-height: normal;\r\n}\r\n.lh-10 {\r\n  line-height: 10px;\r\n}\r\n.lh-11 {\r\n  line-height: 11px;\r\n}\r\n.lh-12 {\r\n  line-height: 12px;\r\n}\r\n.lh-13 {\r\n  line-height: 13px;\r\n}\r\n.lh-14 {\r\n  line-height: 14px;\r\n}\r\n.lh-15 {\r\n  line-height: 15px;\r\n}\r\n.lh-16 {\r\n  line-height: 16px;\r\n}\r\n\r\n/* Font Faces\r\n------------------------------------\r\n*/\r\n\r\n.font-arial {\r\n  font-family: Arial, sans-serif !important;\r\n}\r\n.font-montserrat {\r\n  font-family: var(--wje-font-family-secondary) !important;\r\n}\r\n.font-heading {\r\n  font-family: var(--wje-font-family-secondary);\r\n}\r\n.font-secondary {\r\n  font-family: var(--wje-font-family-secondary);\r\n}\r\n\r\n/* Wells\r\n------------------------------------\r\n*/\r\n.well {\r\n  background-color: var(--wje-color-contrast-3);\r\n  -webkit-border-radius: 3px;\r\n  -moz-border-radius: 3px;\r\n  border-radius: 3px;\r\n  -webkit-box-shadow: none !important;\r\n  -moz-box-shadow: none !important;\r\n  box-shadow: none !important;\r\n  border: none;\r\n  background-image: none;\r\n  &.well-large {\r\n    padding: 24px;\r\n    width: auto;\r\n  }\r\n  &.well-small {\r\n    padding: 13px;\r\n    width: auto;\r\n  }\r\n  &.green {\r\n    background-color: var(--wje-color-complete);\r\n    color: var(--wje-color-contrast-0);\r\n    border: none;\r\n  }\r\n}\r\n.overflow-ellipsis {\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Responsive Handlers : Typo\r\n------------------------------------\r\n*/\r\n\r\n@media (max-width: 1024px) {\r\n  body,\r\n  p {\r\n    font-size: var(--wje-font-size-small);\r\n    line-height: 20px;\r\n  }\r\n\r\n  h1 {\r\n    font-size: var(--wje-font-size-2x-large);\r\n    line-height: 44px;\r\n    letter-spacing: -0.08px;\r\n  }\r\n  h2 {\r\n    font-size: var(--wje-font-size-x-large);\r\n    line-height: 40px;\r\n  }\r\n  h3 {\r\n    font-size: var(--wje-font-size-large);\r\n    line-height: 35.88px;\r\n  }\r\n  h4 {\r\n    font-size: var(--wje-font-size-large);\r\n    line-height: 33.88px;\r\n  }\r\n  h5 {\r\n    font-size: var(--wje-font-size-medium);\r\n    line-height: 25.88px;\r\n  }\r\n  small,\r\n  .small {\r\n    font-size: 89%;\r\n    line-height: 17px;\r\n  }\r\n}\r\n\r\n.alert {\r\n  & > p,\r\n  & > ul {\r\n    margin-bottom: 0;\r\n  }\r\n}\r\n.table {\r\n  & > tbody {\r\n    & > tr {\r\n      & > td,\r\n      & > th {\r\n        line-height: 1.42857143;\r\n      }\r\n    }\r\n  }\r\n  & > tfoot {\r\n    & > tr {\r\n      & > td,\r\n      & > th {\r\n        line-height: 1.42857143;\r\n      }\r\n    }\r\n  }\r\n  & > thead {\r\n    & > tr {\r\n      & > td,\r\n      & > th {\r\n        line-height: 1.42857143;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n/* For Windows : Fixes\r\n------------------------------------\r\n*/\r\n\r\n\r\n.line-clamp-2 {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.line-clamp-3 {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.line-clamp-5 {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 5;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.text-separator {\r\n  display: block;\r\n  text-align: center;\r\n  margin: 1.5rem 0;\r\n  width: 100%;\r\n  background: linear-gradient(to top, transparent 0%, transparent calc(50% - 1px), var(--wje-border-color) calc(50% - 1px), var(--wje-border-color) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);\r\n}\r\n.text-separator::before {\r\n  background: #fff;\r\n  content: attr(data-text);\r\n  padding: 0 1rem;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.wje-toast-stack {\r\n  position: fixed;\r\n  top: 0;\r\n  margin: 0 .5rem;\r\n  width: 300px;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  overflow: auto;\r\n  z-index: 9999;\r\n}';
 const animations = `@charset "UTF-8";/*!
  * animate.css - https://animate.style/
  * Version - 4.1.1

package/dist/wje-element.js

@@ -534,6 +534,15 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   beforeDisconnect() {
   }
+  afterDisconnect() {
+  }
+  beforeRedraw() {
+  }
+  /**
+   * Cleans up the component.
+   */
+  componentCleanup() {
+  }
   disconnectedCallback() {
     var _a, _b;
     (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
@@ -542,6 +551,7 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.isAttached = false;
     (_b = this.afterDisconnect) == null ? void 0 : _b.call(this);
     this.drawingStatus = this.drawingStatuses.DISCONNECTED;
+    this.componentCleanup();
   }
   async enqueueUpdate() {
     try {
@@ -564,11 +574,12 @@ const _WJElement = class _WJElement extends HTMLElement {
     }
   }
   async refresh() {
-    var _a, _b;
+    var _a, _b, _c;
     if (this.drawingStatus && this.drawingStatus >= this.drawingStatuses.START) {
-      (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
+      (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
+      (_b = this.beforeDisconnect) == null ? void 0 : _b.call(this);
       this.refreshUpdatePromise();
-      (_b = this.afterDisconnect) == null ? void 0 : _b.call(this);
+      (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
       return this.initWjElement(true);
     }
   }
@@ -596,7 +607,7 @@ const _WJElement = class _WJElement extends HTMLElement {
     }
   }
   async render() {
-    this.drawingStatus = "DRAWING";
+    this.drawingStatus = this.drawingStatuses.DRAWING;
     let _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
     if (_draw instanceof Promise) {
       _draw = await _draw;

package/dist/wje-radio-group.js

@@ -16,6 +16,7 @@ class RadioGroup extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "RadioGroup");
+    this.internals = this.attachInternals();
   }
   /**
    * Returns the CSS styles for the component.
@@ -27,13 +28,82 @@ class RadioGroup extends WJElement {
     return styles;
   }
   /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
+  * Setter for the value attribute.
+  * @param {string} value - The value to set.
+  */
+  set value(value) {
+    if (this.checkRadio(value)) {
+      this.setAttribute("value", value);
+      this.internals.setFormValue(value);
+    }
+  }
+  /**
+   * Getter for the value attribute.
+   * @returns {string} The value of the attribute.
+   */
+  get value() {
+    return this.getAttribute("value");
+  }
+  /**
+   * Getter for the form attribute.
+   * @returns {HTMLFormElement} The form the input is associated with.
+   */
+  get form() {
+    return this.internals.form;
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string} The name of the input.
+   */
+  get name() {
+    return this.getAttribute("name");
+  }
+  /**
+   * Getter for the type attribute.
+   * @returns {string} The type of the input.
+   */
+  get type() {
+    return this.localName;
+  }
+  /**
+   * Getter for the validity attribute.
+   * @returns {ValidityState} The validity state of the input.
+   */
+  get validity() {
+    return this.internals.validity;
+  }
+  /**
+   * Getter for the validationMessage attribute.
+   * @returns {string} The validation message of the input.
+   */
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  /**
+   * Getter for the willValidate attribute.
+   * @returns {boolean} Whether the input will be validated.
+   */
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  /**
+   * @summary Getter for the defaultValue attribute.
+   * This method retrieves the 'value' attribute of the custom input element.
+   * The 'value' attribute represents the default value of the input element.
+   * If the 'value' attribute is not set, it returns an empty string.
+   * @returns {string} The default value of the input element.
    */
-  static get observedAttributes() {
-    return [];
+  get defaultValue() {
+    return this.getAttribute("value") ?? "";
+  }
+  /**
+   * @summary Setter for the defaultValue attribute.
+   * This method sets the 'value' attribute of the custom input element to the provided value.
+   * The 'value' attribute represents the default value of the input element.
+   * @param {string} value - The value to set as the default value.
+   */
+  set defaultValue(value) {
+    this.setAttribute("value", value);
   }
   /**
    * Sets up the attributes for the component.
@@ -54,6 +124,13 @@ class RadioGroup extends WJElement {
     let native = document.createElement("div");
     native.classList.add("native-radio-group", this.hasAttribute("inline") ? "wje-inline" : "ddd");
     let slot = document.createElement("slot");
+    let label = document.createElement("label");
+    label.innerText = this.label;
+    if (this.value && !this.hasAttribute("error"))
+      label.classList.add("fade");
+    if (this.label) {
+      native.appendChild(label);
+    }
     native.appendChild(slot);
     fragment.appendChild(native);
     return fragment;
@@ -63,12 +140,11 @@ class RadioGroup extends WJElement {
    * Handles the selection of radio buttons.
    */
   afterDraw() {
-    if (this.value) {
-      this.setRadioToChekced(this.getRadioByValue(this.value));
-    }
+    this.checkRadio(this.value);
     this.addEventListener("wje-radio:input", (e) => {
-      this.removeCheck();
-      this.setRadioToChekced(e.detail.context);
+      if (this.checkRadio(e.detail.context.value)) {
+        this.value = e.detail.context.value;
+      }
     });
   }
   /**
@@ -78,7 +154,7 @@ class RadioGroup extends WJElement {
    * @returns {Radio} The radio button.
    */
   getRadioByValue(value) {
-    return this.getAllElements().filter((el) => el instanceof Radio && el.value === value)[0];
+    return this.getAllElements().find((el) => el instanceof Radio && el.value === value);
   }
   /**
    * Removes the check from all radio buttons.
@@ -91,14 +167,16 @@ class RadioGroup extends WJElement {
   }
   /**
    * Sets the given radio button to checked.
-   *
-   * @param {Radio} radio - The radio button to check.
    */
-  setRadioToChekced(radio) {
-    if (radio instanceof Radio) {
-      this.setAttribute("value", radio.value);
+  checkRadio(value) {
+    this.removeCheck();
+    const radio = this.getRadioByValue(value);
+    if (radio) {
       radio.checked = true;
+      return true;
     }
+    console.error(`Radio with value ${value} not found`);
+    return false;
   }
   /**
    * Returns all the elements in the radio group.
@@ -106,9 +184,68 @@ class RadioGroup extends WJElement {
    * @returns {Array<Element>} The elements.
    */
   getAllElements() {
-    return Array.from(this.childNodes);
+    return Array.from(this.children);
+  }
+  /**
+   * @summary Callback function that is called when the custom element is associated with a form.
+   * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
+   * @param {HTMLFormElement} form - The form the custom element is associated with.
+   */
+  formAssociatedCallback(form) {
+  }
+  /**
+   * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
+   * This method is responsible for resetting the value of the custom input element to its default value.
+   * It also resets the form value and validity state in the form internals.
+   *
+   * @method
+   */
+  formResetCallback() {
+    this.value = this.defaultValue;
+    this.internals.setFormValue(this.defaultValue);
+    this.internals.setValidity({});
+  }
+  /**
+   * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
+   * This method is responsible for restoring the value of the custom input element to its saved state.
+   * It also restores the form value and validity state in the form internals to their saved states.
+   *
+   * @param {Object} state - The saved state of the custom input element.
+   * @method
+   */
+  formStateRestoreCallback(state) {
+    this.value = state.value;
+    this.internals.setFormValue(state.value);
+    this.internals.setValidity({});
+  }
+  /**
+   * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
+   * This method is responsible for saving the value of the custom input element.
+   *
+   * @returns {Object} The saved state of the custom input element.
+   * @method
+   */
+  formStateSaveCallback() {
+    return {
+      value: this.value
+    };
+  }
+  /**
+   * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
+   * This method is not implemented yet.
+   *
+   * @param {boolean} disabled - The new disabled state of the custom input element.
+   * @method
+   */
+  formDisabledCallback(disabled) {
+    console.warn("formDisabledCallback not implemented yet");
   }
 }
+/**
+ * Whether the input is associated with a form.
+ * @type {boolean}
+ */
+__publicField(RadioGroup, "formAssociated", true);
 RadioGroup.define("wje-radio-group", RadioGroup);
 export {
   RadioGroup as default

package/dist/wje-sliding-container.js

@@ -337,22 +337,24 @@ class SlidingContainer extends WJElement {
    */
   async open(event) {
     await Promise.resolve(this.beforeOpen(event)).then(async () => {
-      await Promise.resolve(
-        !this._isOpen ? (() => {
+      if (!this._isOpen) {
+        this.dispatchEvent(
+          new CustomEvent("wje-sliding-container:beforeOpen", {
+            bubbles: true,
+            composed: true
+          })
+        );
+        await this.doAnimateTransition();
+        await Promise.resolve(this.afterOpen(event)).then(() => {
+          this._isOpen = true;
           this.dispatchEvent(
             new CustomEvent("wje-sliding-container:open", {
               bubbles: true,
               composed: true
             })
           );
-          this.doAnimateTransition();
-        })() : () => {
-        }
-      ).then(async () => {
-        await Promise.resolve(this.afterOpen(event)).then(() => {
-          this._isOpen = true;
         });
-      });
+      }
     });
   }
   /**
@@ -362,18 +364,14 @@ class SlidingContainer extends WJElement {
    */
   async close(event) {
     await Promise.resolve(this.beforeClose(event)).then(async () => {
-      await Promise.resolve(
-        this._isOpen ? (() => {
-          this.dispatchEvent(
-            new CustomEvent("wje-sliding-container:close", {
-              bubbles: true,
-              composed: true
-            })
-          );
-          this.doAnimateTransition();
-        })() : () => {
-        }
-      ).then(async () => {
+      if (this._isOpen) {
+        this.dispatchEvent(
+          new CustomEvent("wje-sliding-container:beforeClose", {
+            bubbles: true,
+            composed: true
+          })
+        );
+        await this.doAnimateTransition();
         await Promise.resolve(this.afterClose(event)).then(() => {
           if (this.removeChildAfterClose) {
             this.childNodes.forEach((child) => {
@@ -381,8 +379,14 @@ class SlidingContainer extends WJElement {
             });
           }
           this._isOpen = false;
+          this.dispatchEvent(
+            new CustomEvent("wje-sliding-container:close", {
+              bubbles: true,
+              composed: true
+            })
+          );
         });
-      });
+      }
     });
   }
   /**

package/dist/wje-toast.js

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import WJElement from "./wje-element.js";
-const styles = '/*\r\n[ TOAST ]\r\n*/\r\n\r\n:host {\r\n  position: fixed;\r\n  z-index: 999;\r\n}\r\n\r\n:host([data-position$="-left"]) {\r\n  left: 0;\r\n}\r\n\r\n:host([data-position$="-right"]) {\r\n  right: 0;\r\n}\r\n\r\n:host([data-position^="top-"]) {\r\n  top: 0;\r\n}\r\n\r\n:host([data-position^="bottom-"]) {\r\n  bottom: 0;\r\n}\r\n\r\n:host([data-position="top"]) {\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n}\r\n\r\n:host([data-position="bottom"]) {\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n}\r\n\r\n.pgn {\r\n  position: relative;\r\n  margin: 10px;\r\n}\r\n\r\n.pgn.pgn-flip{\r\n  /*margin-top: 0;*/\r\n}\r\n\r\n.pgn .alert {\r\n  margin: 0;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n/* Simple\r\n------------------------------------\r\n*/\r\n\r\n.pgn-simple .alert {\r\n  padding-top: 13px;\r\n  padding-bottom: 13px;\r\n  max-width: 500px;\r\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n  max-height: 250px;\r\n  overflow: hidden;\r\n}\r\n\r\n/* Bar\r\n------------------------------------\r\n*/\r\n\r\n.pgn-bar {\r\n  overflow: hidden;\r\n  margin: 0;\r\n}\r\n\r\n.pgn-bar .alert {\r\n  border-radius: 0;\r\n  padding-top: 13px;\r\n  padding-bottom: 13px;\r\n  max-height: 91px;\r\n}\r\n\r\n:host([data-position="top"]) .pgn-bar .alert {\r\n  animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n  -webkit-animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n  transform-origin: top left;\r\n  -webkit-transform-origin: top left;\r\n}\r\n\r\n:host([data-position="bottom"]) .pgn-bar .alert {\r\n  animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n  -webkit-animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n  transform-origin: bottom left;\r\n  -webkit-transform-origin: bottom left;\r\n}\r\n\r\n.pgn-bar .alert span {\r\n  opacity: 0;\r\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\r\n}\r\n\r\n@keyframes slideInFromTop {\r\n  0% {\r\n    transform: translateY(-100%);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@-webkit-keyframes slideInFromTop {\r\n  0% {\r\n    -webkit-transform: translateY(-100%);\r\n  }\r\n  100% {\r\n    -webkit-transform: translateY(0);\r\n  }\r\n}\r\n@keyframes slideInFromBottom {\r\n  0% {\r\n    transform: translateY(100%);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@-webkit-keyframes slideInFromBottom {\r\n  0% {\r\n    -webkit-transform: translateY(100%);\r\n  }\r\n  100% {\r\n    -webkit-transform: translateY(0);\r\n  }\r\n}\r\n  /* Circle\r\n  ------------------------------------\r\n  */\r\n\r\n  .pgn-circle .alert {\r\n    margin-bottom: 10px;\r\n    border-radius: 300px;\r\n    animation: fadeInCircle 0.3s ease forwards,\r\n    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\r\n    -webkit-animation: fadeInCircle 0.3s ease forwards,\r\n    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\r\n    height: 48px;\r\n    overflow: hidden;\r\n    padding: 6px 55px 6px 6px;\r\n    -webkit-transform: translateZ(0);\r\n    position: relative;\r\n    display: flex;\r\n  }\r\n  :host {\r\n    &[data-position$="-right"] .pgn-circle .alert {\r\n      float: right;\r\n    }\r\n\r\n    &[data-position$="-left"] .pgn-circle .alert {\r\n      float: left;\r\n    }\r\n\r\n    &[data-position^="bottom-"] .pgn-circle .alert {\r\n      margin-bottom: 20px;\r\n    }\r\n  }\r\n\r\n  wje-avatar:first-child {\r\n    margin-right: 8px;\r\n  }\r\n\r\n  .pgn-circle .alert .close {\r\n    margin-top: -12px;\r\n    position: absolute;\r\n    right: 18px;\r\n    top: 50%;\r\n    opacity: 0;\r\n    animation: fadeIn 0.3s 0.5s ease forwards;\r\n    -webkit-animation: fadeIn 0.3s 0.5s ease forwards;\r\n  }\r\n  .pgn-circle .alert p {\r\n    margin: 0;\r\n  }\r\n  .pgn-circle .alert > div {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n  .pgn-circle .alert > div > div {\r\n    display: table-cell;\r\n    vertical-align: middle;\r\n  }\r\n  @keyframes fadeInCircle {\r\n    0% {\r\n      opacity: 0;\r\n      width: 60px;\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n      width: 60px;\r\n    }\r\n  }\r\n  @-webkit-keyframes fadeInCircle {\r\n    0% {\r\n      opacity: 0;\r\n      width: 60px;\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n      width: 60px;\r\n    }\r\n  }\r\n  @keyframes resizeCircle {\r\n    0% {\r\n      width: 60px;\r\n    }\r\n    100% {\r\n      width: 300px;\r\n    }\r\n  }\r\n  @-webkit-keyframes resizeCircle {\r\n    0% {\r\n      width: 60px;\r\n    }\r\n    100% {\r\n      width: 300px;\r\n    }\r\n  }\r\n\r\n  /* Flip\r\n  ------------------------------------\r\n  */\r\n\r\n  :host[data-position^="bottom-"] .pgn-flip .alert {\r\n    -webkit-transform-origin: 50% 100%;\r\n    transform-origin: 50% 100%;\r\n  }\r\n  .pgn-flip .alert {\r\n    -webkit-transform-origin: 50% 0%;\r\n    transform-origin: 50% 0%;\r\n    -webkit-animation-name: flipInX;\r\n    animation-name: flipInX;\r\n    -webkit-animation-duration: 0.8s;\r\n    animation-duration: 0.8s;\r\n    border-radius: 0;\r\n    padding: 25px 35px;\r\n    max-width: 500px;\r\n    max-height: 250px;\r\n    overflow: hidden;\r\n  }\r\n  @-webkit-keyframes flipInX {\r\n    0% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\r\n      -webkit-transition-timing-function: ease-in;\r\n    }\r\n    40% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\r\n      -webkit-transition-timing-function: ease-out;\r\n    }\r\n    60% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\r\n      -webkit-transition-timing-function: ease-in;\r\n      opacity: 1;\r\n    }\r\n    80% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\r\n      -webkit-transition-timing-function: ease-out;\r\n    }\r\n    100% {\r\n      -webkit-transform: perspective(400px);\r\n    }\r\n  }\r\n  @keyframes flipInX {\r\n    0% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\r\n      transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\r\n      -webkit-transition-timing-function: ease-in;\r\n      transition-timing-function: ease-in;\r\n    }\r\n    40% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\r\n      transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\r\n      -webkit-transition-timing-function: ease-out;\r\n      transition-timing-function: ease-out;\r\n    }\r\n    60% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\r\n      transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\r\n      -webkit-transition-timing-function: ease-in;\r\n      transition-timing-function: ease-in;\r\n      opacity: 1;\r\n    }\r\n    80% {\r\n      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\r\n      transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\r\n      -webkit-transition-timing-function: ease-out;\r\n      transition-timing-function: ease-out;\r\n    }\r\n    100% {\r\n      -webkit-transform: perspective(400px);\r\n      transform: perspective(400px);\r\n    }\r\n  }\r\n  @keyframes fadeIn {\r\n    0% {\r\n      opacity: 0;\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n    }\r\n  }\r\n  @-webkit-keyframes fadeIn {\r\n    0% {\r\n      opacity: 0;\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  /* Pages Notification customizations */\r\n  :host([data-position="top"]) {\r\n    top: 60px;\r\n    left: 0;\r\n  }\r\n  :host([data-position="bottom"]) {\r\n    left: 0;\r\n  }\r\n\r\n  :host([data-position$="-left"]) {\r\n    left: 0;\r\n    right: auto;\r\n  }\r\n\r\n  :host([data-position^="top-"]) {\r\n    bottom: auto;\r\n  }\r\n\r\n  :host {\r\n    z-index: 999;\r\n  }\r\n\r\n  @media (max-width: 979px) {\r\n    body .pgn-wrapper[data-position="top"] {\r\n      left: 0 !important;\r\n    }\r\n    body .pgn-wrapper[data-position="bottom"] {\r\n      left: 0 !important;\r\n    }\r\n  }\r\n  @media (max-width: 767px) {\r\n    body .pgn-wrapper[data-position$="-left"],\r\n    body .pgn-wrapper[data-position$="-right"] {\r\n      left: 10px !important;\r\n      right: 10px !important;\r\n    }\r\n    body .pgn-wrapper[data-position$="-right"] .alert,\r\n    body .pgn-wrapper[data-position$="-left"] .alert {\r\n      max-width: 100%;\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n.alert {\r\n  background-image: none;\r\n  box-shadow: none;\r\n  text-shadow: none;\r\n  padding: 9px 19px 9px 15px;\r\n  border-radius: 3px;\r\n  font-size: 13px;\r\n  border-width: 0;\r\n  transition: all 0.2s linear 0s;\r\n  display: flex;\r\n  align-items: center;\r\n  &.bordered {\r\n    border-width: 1px;\r\n  }\r\n\r\n  .link {\r\n    color: #ce8f22;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .alert-heading {\r\n    color: #ce8f22 !important;\r\n    margin-bottom: 5px;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .btn-small {\r\n    position: relative;\r\n    top: -3.5px;\r\n  }\r\n\r\n  .button-set {\r\n    .btn {\r\n      position: relative;\r\n      top: 8px;\r\n    }\r\n  }\r\n}\r\n\r\n/* Alert : Color Options\r\n------------------------------------\r\n*/\r\n.alert-danger,\r\n.alert-error,\r\n.alert-danger.btn,\r\n.alert-error.btn {\r\n  background-color: var(--wje-color-primary-2) !important;\r\n  color: var(--wje-color-primary-11)!important;\r\n  border-color: var(--wje-color-primary-9)!important;\r\n\r\n  .close {\r\n    background-position: -95px -10px !important;\r\n  }\r\n}\r\n\r\n.alert-warning {\r\n\r\n  background-color: var(--wje-color-warning-2) !important;\r\n  color: var(--wje-color-warning-11)!important;\r\n  border-color: var(--wje-color-warning-9)!important;\r\n}\r\n\r\n.alert-info {\r\n  background-color: var(--wje-color-complete-2) !important;\r\n  color: var(--wje-color-complete-11) !important;\r\n  border-color: var(--wje-color-complete-9) !important;\r\n\r\n  .close {\r\n    background-position: -67px -10px !important;\r\n  }\r\n}\r\n\r\n.alert-success, .alert-success.btn {\r\n  background-color: var(--wje-color-success-2) !important;\r\n  color: var(--wje-color-success-11) !important;\r\n  border-color: var(--wje-color-success-9) !important;\r\n  .close {\r\n    background-position: -38px -10px !important;\r\n  }\r\n}\r\n\r\n.alert-default {\r\n  background-color: var(--wje-color-contrast-2) !important;\r\n  color: var(--wje-color-contrast-11)!important;\r\n  border-color: var(--wje-color-contrast-9)!important;\r\n\r\n  .close {\r\n    background-position: -67px -10px !important;\r\n  }\r\n}\r\n';
+import WJElement, { event } from "./wje-element.js";
+const styles = '/*\r\n[ WJ Toast ]\r\n*/\r\n\r\n:host {\r\n  position: relative;\r\n  z-index: 9999;\r\n  width: 300px;\r\n  margin: .5rem 0;\r\n  display: block;\r\n}\r\n\r\n.native-toast {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  overflow: hidden;\r\n  margin: 0;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-radius: var(--wje-border-radius-large);\r\n  position: relative;\r\n\r\n  slot[name="avatar"]::slotted(wje-avatar) {\r\n    margin-right: .5rem;\r\n  }\r\n\r\n  .content {\r\n    font-size: var(--wje-font-size-small);\r\n    .headline {\r\n      font-size: var(--wje-font-size);\r\n      font-weight: var(--wje-font-weight-bold);\r\n    }\r\n  }\r\n\r\n  wje-button {\r\n    --wje-button-margin-inline: auto 0;\r\n    margin-left: auto !important;\r\n  }\r\n\r\n  .countdown {\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 100%;\r\n    height: 4px;\r\n    .countdown-bar {\r\n      height: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n:host([position=top]) {\r\n  animation: slideDown .3s ease-out forwards;\r\n  top: 1rem;\r\n  left: auto;\r\n  right: auto;\r\n}\r\n\r\n@keyframes slideDown {\r\n  0% {\r\n    transform: translateY(-100%);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n/*PRIMARY*/\r\n:host([color=primary]) .native-toast {\r\n  background-color: var(--wje-color-primary-1);\r\n  color: var(--wje-color-primary-9);\r\n  border-color: var(--wje-color-primary-3);\r\n}\r\n\r\n/*COMPLETE*/\r\n:host([color=complete]) .native-toast {\r\n  background-color: var(--wje-color-complete-1);\r\n  color: var(--wje-color-complete-9);\r\n  border-color: var(--wje-color-complete-3);\r\n}\r\n\r\n/*SUCCESS*/\r\n:host([color=success]) .native-toast {\r\n  background-color: var(--wje-color-success-1);\r\n  color: var(--wje-color-success-9);\r\n  border-color: var(--wje-color-success-3);\r\n}\r\n\r\n/*WARNING*/\r\n:host([color=warning]) .native-toast{\r\n  background-color: var(--wje-color-warning-1);\r\n  color: var(--wje-color-warning-11);\r\n  border-color: var(--wje-color-warning-3);\r\n}\r\n\r\n/*DANGER*/\r\n:host([color=danger]) .native-toast {\r\n  background-color: var(--wje-color-danger-1);\r\n  color: var(--wje-color-danger-9);\r\n  border-color: var(--wje-color-danger-3);\r\n}\r\n\r\n/*INFO*/\r\n:host([color=info]) .native-toast {\r\n  background-color: var(--wje-color-info-1);\r\n  color: var(--wje-color-info-11);\r\n  border-color: var(--wje-color-info-4);\r\n}\r\n\r\n/*CONTRAST*/\r\n:host([color=contrast]) .native-toast {\r\n  background-color: var(--wje-color-contrast-2);\r\n  color: var(--wje-color-contrast-9);\r\n  border-color: var(--wje-color-contrast-3);\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/*PRIMARY*/\r\n:host([color=primary]) .countdown-bar {\r\n  background-color: var(--wje-color-primary-9);\r\n}\r\n\r\n/*COMPLETE*/\r\n:host([color=complete]) .countdown-bar {\r\n  background-color: var(--wje-color-complete-9);\r\n}\r\n\r\n/*SUCCESS*/\r\n:host([color=success]) .countdown-bar {\r\n  background-color: var(--wje-color-success-9);\r\n}\r\n\r\n/*WARNING*/\r\n:host([color=warning]) .countdown-bar{\r\n  background-color: var(--wje-color-warning-9);\r\n}\r\n\r\n/*DANGER*/\r\n:host([color=danger]) .countdown-bar {\r\n  background-color: var(--wje-color-danger-9);\r\n}\r\n\r\n/*INFO*/\r\n:host([color=info]) .countdown-bar {\r\n  background-color: var(--wje-color-info-9);\r\n}\r\n\r\n/*CONTRAST*/\r\n:host([color=contrast]) .countdown-bar {\r\n  background-color: var(--wje-color-contrast-9);\r\n}';
 class Toast extends WJElement {
   /**
    * Toast constructor
@@ -18,10 +18,86 @@ class Toast extends WJElement {
      * @type {string}
      */
     __publicField(this, "className", "Toast");
-    __publicField(this, "removeToast", () => {
-      clearTimeout(this.timeout);
-      this.remove();
+    /**
+     * Asynchronously shows the toast notification.
+     *
+     * This method sets the `open` property to `true` and dispatches the
+     * `wje-toast:after-show` custom event. If the toast is already open,
+     * the method returns `undefined`.
+     */
+    __publicField(this, "show", () => {
+      if (this.open) {
+        return void 0;
+      }
+      this.open = true;
+      event.dispatchCustomEvent(this, "wje-toast:after-show");
+    });
+    /**
+     * Asynchronously hides the toast notification.
+     *
+     * This method sets the `open` property to `false` and dispatches the
+     * `wje-toast:after-hide` custom event. If the toast is already hidden,
+     * the method returns `undefined`.
+     */
+    __publicField(this, "hide", () => {
+      if (!this.open) {
+        return void 0;
+      }
+      this.open = false;
+      event.dispatchCustomEvent(this, "wje-toast:after-hide");
+    });
+    /**
+     * Pauses the countdown animation and stops the timer.
+     */
+    __publicField(this, "pause", async () => {
+      var _a;
+      (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
+      this.stopTimer();
+    });
+    /**
+     * Resumes the countdown animation and resumes the timer.
+     */
+    __publicField(this, "resume", async () => {
+      var _a;
+      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+      this.resumeTimer();
+    });
+    /**
+     * Asynchronously starts the toast notification.
+     *
+     * This method appends the toast notification to the document body and
+     * shows the toast notification. The method returns a promise that
+     * resolves when the toast notification is shown.
+     *
+     * @returns {Promise<unknown>}
+     */
+    __publicField(this, "start", () => {
+      return new Promise((resolve) => {
+        let stack = document.body.querySelector(".wje-toast-stack");
+        if (stack) {
+          this.toastStack = stack;
+        }
+        if (this.toastStack.parentElement === null) {
+          document.body.append(this.toastStack);
+        }
+        this.toastStack.appendChild(this);
+        this.show();
+        this.addEventListener("wje-toast:after-hide", this.removeChildAndStack);
+      });
     });
+    this.toastStack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
+  }
+  set headline(value) {
+    this.setAttribute("headline", value);
+  }
+  get headline() {
+    return this.getAttribute("headline");
+  }
+  set open(value) {
+    this.setAttribute("open", value);
+  }
+  get open() {
+    return this.getAttribute("open");
   }
   set duration(value) {
     this.setAttribute("duration", value);
@@ -29,17 +105,25 @@ class Toast extends WJElement {
   get duration() {
     return +this.getAttribute("duration");
   }
-  set position(value) {
-    this.setAttribute("position", value);
+  set closable(value) {
+    if (value)
+      this.setAttribute("closable", value);
   }
-  get position() {
-    return this.getAttribute("position");
+  get closable() {
+    return this.getAttribute("closable");
   }
-  set type(value) {
-    this.setAttribute("type", value);
+  set color(value) {
+    this.setAttribute("color", value);
   }
-  get type() {
-    return this.getAttribute("type");
+  get color() {
+    return this.getAttribute("color");
+  }
+  set countdown(value) {
+    if (value)
+      this.setAttribute("countdown", value);
+  }
+  get countdown() {
+    return this.hasAttribute("countdown");
   }
   /**
    * Get CSS stylesheet
@@ -56,7 +140,16 @@ class Toast extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["position", "type", "duration"];
+    return ["open", "color", "duration"];
+  }
+  /**
+   * Called when an attribute changes.
+   *
+   * @param {string} name - The name of the attribute.
+   * @param {string} old - The old value of the attribute.
+   * @param {string} newName - The new value of the attribute.
+   */
+  attributeChangedCallback(name, old, newName) {
   }
   /**
    * Setup attributes
@@ -81,34 +174,119 @@ class Toast extends WJElement {
     avatarSlot.classList.add("avatar");
     let content = document.createElement("div");
     content.classList.add("content");
-    content.innerHTML = `<div class="title">${this.title}</div><div class="message"><slot></slot></div>`;
+    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 closeBtn = document.createElement("wje-button");
     closeBtn.setAttribute("fill", "link");
-    closeBtn.setAttribute("color", this.type);
+    closeBtn.setAttribute("color", this.color);
     closeBtn.setAttribute("size", "small");
     closeBtn.classList.add("close");
+    let countdownEl = document.createElement("div");
+    countdownEl.classList.add("countdown");
+    let countdownBar = document.createElement("div");
+    countdownBar.classList.add("countdown-bar");
     closeBtn.appendChild(icon);
+    countdownEl.appendChild(countdownBar);
     native.appendChild(avatarSlot);
     native.appendChild(content);
-    if (this.hasAttribute("close"))
+    if (this.hasAttribute("closable"))
       native.appendChild(closeBtn);
+    if (this.hasAttribute("countdown"))
+      native.appendChild(countdownEl);
     fragment.appendChild(native);
     this.closeBtn = closeBtn;
+    this.countdownBar = countdownBar;
     return fragment;
   }
+  /**
+   * After draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   */
   afterDraw() {
-    this.closeBtn.addEventListener("wje-button:click", this.removeToast);
+    this.closeBtn.addEventListener("wje-button:click", this.hide);
+    this.addEventListener("mouseenter", this.pause);
+    this.addEventListener("mouseleave", this.resume);
+    if (this.hasAttribute("countdown")) {
+      const startWidth = "100%";
+      const endWidth = "0";
+      this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {
+        duration: this.duration,
+        easing: "linear"
+      });
+    }
     if (this.duration > 0) {
-      this.timeout = setTimeout(() => {
-        this.removeToast();
-      }, this.duration);
+      this.remainingTime = this.duration;
+      this.startTimer();
     }
   }
+  /**
+   * Before disconnect method
+   *
+   * This method is called before the element is disconnected from the document.
+   */
   beforeDisconnect() {
-    this.closeBtn.removeEventListener("wje-button:click", this.removeToast);
-    clearTimeout(this.timeout);
+    this.closeBtn.removeEventListener("wje-button:click", this.hide);
+    this.removeEventListener("wje-toast:after-hide", this.removeChildAndStack);
+    this.removeEventListener("mouseenter", this.pause);
+    this.removeEventListener("mouseleave", this.resume);
+    clearTimeout(this.timeoutID);
+  }
+  /**
+   * Starts the timer.
+   *
+   * This method sets the `startTime` property to the current time and sets
+   * the `timeoutID` property to the ID of the timeout. The method also
+   * dispatches the `wje-toast:after-hide` custom event when the timeout
+   * expires.
+   */
+  startTimer() {
+    this.startTime = Date.now();
+    if (this.timeoutID) {
+      clearTimeout(this.timeoutID);
+    }
+    this.timeoutID = window.setTimeout(() => {
+      this.hide();
+    }, this.remainingTime);
+  }
+  /**
+   * Stops the timer.
+   *
+   * This method clears the timeout and calculates the remaining time.
+   * The method is called when the toast notification is paused.
+   */
+  stopTimer() {
+    if (this.timeoutID) {
+      window.clearTimeout(this.timeoutID);
+    }
+    const elapsedTime = Date.now() - this.startTime;
+    this.remainingTime -= elapsedTime;
+  }
+  /**
+   * Resumes the timer.
+   *
+   * This method resumes the timer if the remaining time is greater
+   * than zero. The method is called when the toast notification is resumed.
+   */
+  resumeTimer() {
+    if (this.remainingTime > 0) {
+      this.startTimer();
+    }
+  }
+  /**
+   * Removes the toast notification and the toast stack.
+   *
+   * This method removes the toast notification from the toast stack and
+   * removes the toast stack from the document body if the toast stack is
+   * empty.
+   */
+  removeChildAndStack() {
+    this.toastStack.removeChild(this);
+    if (this.toastStack.querySelector("wje-toast") === null) {
+      this.toastStack.remove();
+    }
   }
 }
 Toast.define("wje-toast", Toast);

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.121",
+  "version": "0.1.123",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",