wj-elements 0.1.78 → 0.1.80

package/dist/wje-accordion-item.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-const styles = "/*\n[ WJ Accordion Item ]\n*/\n\n:host {\n    --wje-accordion-background: var(--wje-color-contrast-0);\n    --wje-accordion-border: var(--wje-color-contrast-0);\n    --wje-accordion-border-radius: var(--wje-border-radius-large);\n    --wje-accordion-background-hover: var(--wje-color-contrast-1);\n    --wje-accordion-border-hover: var(--wje-color-contrast-2);\n    --wje-accordion-background-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-border-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color=primary]) {\n    --wje-accordion-background: var(--wje-color-primary-1);\n    --wje-accordion-border: var(--wje-color-primary-1);\n    --wje-accordion-background-hover: var(--wje-color-primary-2);\n    --wje-accordion-border-hover: var(--wje-color-primary-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-primary-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color=complete]) {\n    --wje-accordion-background: var(--wje-color-complete-1);\n    --wje-accordion-border: var(--wje-color-complete-1);\n    --wje-accordion-background-hover: var(--wje-color-complete-2);\n    --wje-accordion-border-hover: var(--wje-color-complete-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-complete-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color=success]) {\n    --wje-accordion-background: var(--wje-color-success-1);\n    --wje-accordion-border: var(--wje-color-success-1);\n    --wje-accordion-background-hover: var(--wje-color-success-2);\n    --wje-accordion-border-hover: var(--wje-color-success-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-success-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color=danger]) {\n    --wje-accordion-background: var(--wje-color-danger-1);\n    --wje-accordion-border: var(--wje-color-danger-1);\n    --wje-accordion-background-hover: var(--wje-color-danger-2);\n    --wje-accordion-border-hover: var(--wje-color-danger-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-danger-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color=warning]) {\n    --wje-accordion-background: var(--wje-color-warning-1);\n    --wje-accordion-border: var(--wje-color-warning-1);\n    --wje-accordion-background-hover: var(--wje-color-warning-2);\n    --wje-accordion-border-hover: var(--wje-color-warning-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-warning-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color=info]) {\n    --wje-accordion-background: var(--wje-color-info-1);\n    --wje-accordion-border: var(--wje-color-info-1);\n    --wje-accordion-background-hover: var(--wje-color-info-2);\n    --wje-accordion-border-hover: var(--wje-color-info-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-info-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host {\n    display: block;\n    margin-bottom: .5rem;\n}\n\n/*:host(.expanding) #content {*/\n/*    display: none;*/\n/*}*/\n\n/*:host(.collapsing) #content {*/\n/*    max-height: 0;*/\n/*}*/\n\n.native-accordion-item {\n    display: block;\n    background-color: var(--wje-accordion-background);\n    border-radius: var(--wje-accordion-border-radius);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--wje-accordion-border);\n    transition: background-color 200ms ease-in-out;\n    &:hover {\n        background-color: var(--wje-accordion-background-hover);\n        border-color: var(--wje-accordion-border-hover);\n    }\n}\n\n:host(.expanded) .native-accordion-item {\n    background-color: var(--wje-accordion-background-expanded);\n    border-color: var(--wje-accordion-border-expanded);\n}\n\n.headline {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    font-size: var(--wje-font-size) !important;\n    color: var(--wje-accordion-headline-color);\n    line-height: normal !important;\n    margin: 0 !important;\n    padding: .75rem;\n}\n\n[name=description] {\n    font-size: var(--wje-font-size-small);\n    color: var(--wje-color-contrast-6);\n}\n\nwje-icon {\n    margin-left: auto;\n    transform: rotate(var(--wje-accordion-marker-rotate, 0deg));\n}\n\n#content {\n    /*background: var(--wje-accordion-background);*/\n    display: block;\n    color: var(--wje-accordion-content-color);\n    overflow: hidden;\n    max-height: 0;\n    transition: max-height 250ms ease-in-out;\n}\n\n#content slot{\n    display: block;\n    margin: 0 .75rem .75rem .75rem;\n}\n\n:host(.expanded) #content {\n    /*display: block;*/\n    /*padding: 0 .75rem .75rem .75rem;*/\n    max-height: 100vh;\n\n}";
+const styles = "/*\r\n[ WJ Accordion Item ]\r\n*/\r\n\r\n:host {\r\n    --wje-accordion-background: var(--wje-color-contrast-0);\r\n    --wje-accordion-border: var(--wje-color-contrast-0);\r\n    --wje-accordion-border-radius: var(--wje-border-radius-large);\r\n    --wje-accordion-background-hover: var(--wje-color-contrast-1);\r\n    --wje-accordion-border-hover: var(--wje-color-contrast-2);\r\n    --wje-accordion-background-expanded: var(--wje-color-contrast-0);\r\n    --wje-accordion-border-expanded: var(--wje-color-contrast-0);\r\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\r\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\r\n}\r\n\r\n:host([color=primary]) {\r\n    --wje-accordion-background: var(--wje-color-primary-1);\r\n    --wje-accordion-border: var(--wje-color-primary-1);\r\n    --wje-accordion-background-hover: var(--wje-color-primary-2);\r\n    --wje-accordion-border-hover: var(--wje-color-primary-2);\r\n    --wje-accordion-background-expanded: transparent;\r\n    --wje-accordion-border-expanded: var(--wje-color-primary-3);\r\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\r\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\r\n}\r\n\r\n:host([color=complete]) {\r\n    --wje-accordion-background: var(--wje-color-complete-1);\r\n    --wje-accordion-border: var(--wje-color-complete-1);\r\n    --wje-accordion-background-hover: var(--wje-color-complete-2);\r\n    --wje-accordion-border-hover: var(--wje-color-complete-2);\r\n    --wje-accordion-background-expanded: transparent;\r\n    --wje-accordion-border-expanded: var(--wje-color-complete-3);\r\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\r\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\r\n}\r\n\r\n:host([color=success]) {\r\n    --wje-accordion-background: var(--wje-color-success-1);\r\n    --wje-accordion-border: var(--wje-color-success-1);\r\n    --wje-accordion-background-hover: var(--wje-color-success-2);\r\n    --wje-accordion-border-hover: var(--wje-color-success-2);\r\n    --wje-accordion-background-expanded: transparent;\r\n    --wje-accordion-border-expanded: var(--wje-color-success-3);\r\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\r\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\r\n}\r\n\r\n:host([color=danger]) {\r\n    --wje-accordion-background: var(--wje-color-danger-1);\r\n    --wje-accordion-border: var(--wje-color-danger-1);\r\n    --wje-accordion-background-hover: var(--wje-color-danger-2);\r\n    --wje-accordion-border-hover: var(--wje-color-danger-2);\r\n    --wje-accordion-background-expanded: transparent;\r\n    --wje-accordion-border-expanded: var(--wje-color-danger-3);\r\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\r\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\r\n}\r\n\r\n:host([color=warning]) {\r\n    --wje-accordion-background: var(--wje-color-warning-1);\r\n    --wje-accordion-border: var(--wje-color-warning-1);\r\n    --wje-accordion-background-hover: var(--wje-color-warning-2);\r\n    --wje-accordion-border-hover: var(--wje-color-warning-2);\r\n    --wje-accordion-background-expanded: transparent;\r\n    --wje-accordion-border-expanded: var(--wje-color-warning-3);\r\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\r\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\r\n}\r\n\r\n:host([color=info]) {\r\n    --wje-accordion-background: var(--wje-color-info-1);\r\n    --wje-accordion-border: var(--wje-color-info-1);\r\n    --wje-accordion-background-hover: var(--wje-color-info-2);\r\n    --wje-accordion-border-hover: var(--wje-color-info-2);\r\n    --wje-accordion-background-expanded: transparent;\r\n    --wje-accordion-border-expanded: var(--wje-color-info-3);\r\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\r\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\r\n}\r\n\r\n:host {\r\n    display: block;\r\n    margin-bottom: .5rem;\r\n}\r\n\r\n/*:host(.expanding) #content {*/\r\n/*    display: none;*/\r\n/*}*/\r\n\r\n/*:host(.collapsing) #content {*/\r\n/*    max-height: 0;*/\r\n/*}*/\r\n\r\n.native-accordion-item {\r\n    display: block;\r\n    background-color: var(--wje-accordion-background);\r\n    border-radius: var(--wje-accordion-border-radius);\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    border-color: var(--wje-accordion-border);\r\n    transition: background-color 200ms ease-in-out;\r\n    &:hover {\r\n        background-color: var(--wje-accordion-background-hover);\r\n        border-color: var(--wje-accordion-border-hover);\r\n    }\r\n}\r\n\r\n:host(.expanded) .native-accordion-item {\r\n    background-color: var(--wje-accordion-background-expanded);\r\n    border-color: var(--wje-accordion-border-expanded);\r\n}\r\n\r\n.headline {\r\n    display: grid;\r\n    grid-template-columns: 1fr auto;\r\n    align-items: center;\r\n    font-size: var(--wje-font-size) !important;\r\n    color: var(--wje-accordion-headline-color);\r\n    line-height: normal !important;\r\n    margin: 0 !important;\r\n    padding: .75rem;\r\n}\r\n\r\n[name=description] {\r\n    font-size: var(--wje-font-size-small);\r\n    color: var(--wje-color-contrast-6);\r\n}\r\n\r\nwje-icon {\r\n    margin-left: auto;\r\n    transform: rotate(var(--wje-accordion-marker-rotate, 0deg));\r\n}\r\n\r\n#content {\r\n    /*background: var(--wje-accordion-background);*/\r\n    display: block;\r\n    color: var(--wje-accordion-content-color);\r\n    overflow: hidden;\r\n    max-height: 0;\r\n    transition: max-height 250ms ease-in-out;\r\n}\r\n\r\n#content slot{\r\n    display: block;\r\n    margin: 0 .75rem .75rem .75rem;\r\n}\r\n\r\n:host(.expanded) #content {\r\n    /*display: block;*/\r\n    /*padding: 0 .75rem .75rem .75rem;*/\r\n    max-height: 100vh;\r\n\r\n}";
 class AccordionItem extends WJElement {
   /**
    * Constructor for the AccordionItem class.

package/dist/wje-accordion.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Accordion ]\n*/\n\n:host {\n  display: block;\n  width: 100%;\n}";
+const styles = "/*\r\n[ WJ Accordion ]\r\n*/\r\n\r\n:host {\r\n  display: block;\r\n  width: 100%;\r\n}";
 class Accordion extends WJElement {
   /**
    * Constructor for the Accordion class.
@@ -45,11 +45,8 @@ class Accordion extends WJElement {
     this.isShadowRoot = "open";
   }
   beforeDraw() {
-    console.log("beforeDraw", this.getAccordions());
     this.getAccordions().forEach((accordion, index) => {
-      console.log(accordion, index, +this.getAttribute("index"));
       if (this.hasAttribute("index") && +this.getAttribute("index") === index) {
-        console.log("index", +this.getAttribute("index") + " !== " + index);
         accordion.classList.add("expanded");
       }
     });

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

package/dist/wje-aside.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = '/*\n[ WJ Aside ]\n*/\n\n:host {\n    --wje-aside-width: "100px";\n    --wje-aside-top: 0;\n    --wje-aside-border-color: var(--wje-border-color);\n    --wje-aside-border-width: 0 1px 0 0;\n    --wje-aside-border-style: solid;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    overflow: auto;\n    border-color: var(--wje-aside-border-color);\n    border-width: var(--wje-aside-border-width);\n    border-style: var(--wje-aside-border-style);\n}\n\n:host(.open) {\n    display: block !important;\n}\n\n@media (min-width: 768px) {\n    :host([fixed]) {\n        position: fixed;\n        width: var(--wje-aside-width);\n        top: var(--wje-aside-top);\n        height: calc(100% - var(--wje-aside-top));\n    }\n}\n\n@media (max-width: 768px) {\n    :host {\n        display: none;\n    }\n\n    :host([variant=top-start]) {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 80%;\n        height: 100%;\n        z-index: 9999;\n        background-color: #fff;\n    }\n}\n\n';
+const styles = '/*\r\n[ WJ Aside ]\r\n*/\r\n\r\n:host {\r\n    --wje-aside-width: "100px";\r\n    --wje-aside-top: 0;\r\n    --wje-aside-border-color: var(--wje-border-color);\r\n    --wje-aside-border-width: 0 1px 0 0;\r\n    --wje-aside-border-style: solid;\r\n    box-sizing: border-box;\r\n    flex-shrink: 0;\r\n    overflow: auto;\r\n    border-color: var(--wje-aside-border-color);\r\n    border-width: var(--wje-aside-border-width);\r\n    border-style: var(--wje-aside-border-style);\r\n}\r\n\r\n:host(.open) {\r\n    display: block !important;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n    :host([fixed]) {\r\n        position: fixed;\r\n        width: var(--wje-aside-width);\r\n        top: var(--wje-aside-top);\r\n        height: calc(100% - var(--wje-aside-top));\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    :host {\r\n        display: none;\r\n    }\r\n\r\n    :host([variant=top-start]) {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 80%;\r\n        height: 100%;\r\n        z-index: 9999;\r\n        background-color: #fff;\r\n    }\r\n}\r\n\r\n';
 class Aside extends WJElement {
   /**
    * Constructor for the Aside class.

package/dist/wje-avatar.js

@@ -22,7 +22,7 @@ function getInitials(string, length = 2) {
   }
   return initials;
 }
-const styles = '/*\n[ WJ Avatar ]\n*/\n\n:host {\n  display: inline-block;\n  font-size: var(--wje-avatar-font-size);\n  font-weight: var(--wje-avatar-font-weight);\n  color: var(--wje-avatar-color);\n  .native-avatar {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--wje-avatar-size);\n    height: var(--wje-avatar-size);\n    border-radius: var(--wje-avatar-border-radius);\n    background-color: var(--wje-avatar-background-color);\n  }\n}\n\n::slotted(wje-img),\n::slotted(img) {\n  border-radius: var(--wje-avatar-border-radius);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n}\n\n:host(.wje-avatar-border) {\n  border-color: var(--wje-avatar-border-color);\n  border-width: var(--wje-avatar-border-width);\n  border-style: var(--wje-avatar-border-style);\n}\n\n:host([size="small"]) {\n  --wje-avatar-size: var(--wje-size-small); /* 12px */\n  --wje-avatar-font-size: var(--wje-font-size-2x-small);\n}\n\n:host([size="medium"]) {\n  --wje-avatar-size: var(--wje-size-medium); /* 14px */\n  --wje-avatar-font-size: var(--wje-font-size-2x-small);\n}\n\n:host([size="normal"]) {\n  --wje-avatar-size: var(--wje-size); /* 14px */\n}\n\n:host([size="large"]) {\n  --wje-avatar-size: var(--wje-size-large); /* 20px */\n}\n\n:host([size="x-large"]) {\n  --wje-avatar-size: var(--wje-size-x-large); /* 24px */\n}\n\n:host([size="2x-large"]) {\n  --wje-avatar-size: var(--wje-size-2x-large); /* 36px */\n  --wje-avatar-font-size: var(--wje-font-size-small);\n}\n\n:host([size="3x-large"]) {\n  --wje-avatar-size: var(--wje-size-3x-large); /* 48px */\n  --wje-avatar-font-size: var(--wje-font-size-medium);\n}\n\n:host([size="4x-large"]) {\n  --wje-avatar-size: var(--wje-size-4x-large); /* 72px */\n  --wje-avatar-font-size: var(--wje-font-size-x-large);\n}\n\n:host([size="5x-large"]) {\n  --wje-avatar-size: var(--wje-size-5x-large); /* 144px */\n  --wje-avatar-font-size: var(--wje-font-size-3x-large);\n}\n\n/* Status Placement */\n:host slot[name=status] {\n  display: block;\n  position: absolute;\n}\n\n:host([status-placement=top-start]) slot[name=status] {\n  top: -4px;\n  left: -4px;\n}\n\n:host([status-placement=top-end]) slot[name=status] {\n  top: -4px;\n  right: -4px;\n}\n\n:host([status-placement=bottom-start]) slot[name=status] {\n  bottom: -4px;\n  left: -4px;\n}\n\n:host([status-placement=bottom-end]) slot[name=status] {\n  bottom: -4px;\n  right: -4px;\n}';
+const styles = '/*\r\n[ WJ Avatar ]\r\n*/\r\n\r\n:host {\r\n  display: inline-block;\r\n  font-size: var(--wje-avatar-font-size);\r\n  font-weight: var(--wje-avatar-font-weight);\r\n  color: var(--wje-avatar-color);\r\n  .native-avatar {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--wje-avatar-size);\r\n    height: var(--wje-avatar-size);\r\n    border-radius: var(--wje-avatar-border-radius);\r\n    background-color: var(--wje-avatar-background-color);\r\n  }\r\n}\r\n\r\n::slotted(wje-img),\r\n::slotted(img) {\r\n  border-radius: var(--wje-avatar-border-radius);\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  overflow: hidden;\r\n}\r\n\r\n:host(.wje-avatar-border) {\r\n  border-color: var(--wje-avatar-border-color);\r\n  border-width: var(--wje-avatar-border-width);\r\n  border-style: var(--wje-avatar-border-style);\r\n}\r\n\r\n:host([size="small"]) {\r\n  --wje-avatar-size: var(--wje-size-small); /* 12px */\r\n  --wje-avatar-font-size: var(--wje-font-size-2x-small);\r\n}\r\n\r\n:host([size="medium"]) {\r\n  --wje-avatar-size: var(--wje-size-medium); /* 14px */\r\n  --wje-avatar-font-size: var(--wje-font-size-2x-small);\r\n}\r\n\r\n:host([size="normal"]) {\r\n  --wje-avatar-size: var(--wje-size); /* 14px */\r\n}\r\n\r\n:host([size="large"]) {\r\n  --wje-avatar-size: var(--wje-size-large); /* 20px */\r\n}\r\n\r\n:host([size="x-large"]) {\r\n  --wje-avatar-size: var(--wje-size-x-large); /* 24px */\r\n}\r\n\r\n:host([size="2x-large"]) {\r\n  --wje-avatar-size: var(--wje-size-2x-large); /* 36px */\r\n  --wje-avatar-font-size: var(--wje-font-size-small);\r\n}\r\n\r\n:host([size="3x-large"]) {\r\n  --wje-avatar-size: var(--wje-size-3x-large); /* 48px */\r\n  --wje-avatar-font-size: var(--wje-font-size-medium);\r\n}\r\n\r\n:host([size="4x-large"]) {\r\n  --wje-avatar-size: var(--wje-size-4x-large); /* 72px */\r\n  --wje-avatar-font-size: var(--wje-font-size-x-large);\r\n}\r\n\r\n:host([size="5x-large"]) {\r\n  --wje-avatar-size: var(--wje-size-5x-large); /* 144px */\r\n  --wje-avatar-font-size: var(--wje-font-size-3x-large);\r\n}\r\n\r\n/* Status Placement */\r\n:host slot[name=status] {\r\n  display: block;\r\n  position: absolute;\r\n}\r\n\r\n:host([status-placement=top-start]) slot[name=status] {\r\n  top: -4px;\r\n  left: -4px;\r\n}\r\n\r\n:host([status-placement=top-end]) slot[name=status] {\r\n  top: -4px;\r\n  right: -4px;\r\n}\r\n\r\n:host([status-placement=bottom-start]) slot[name=status] {\r\n  bottom: -4px;\r\n  left: -4px;\r\n}\r\n\r\n:host([status-placement=bottom-end]) slot[name=status] {\r\n  bottom: -4px;\r\n  right: -4px;\r\n}';
 class Avatar extends WJElement {
   /**
    * Avatar class constructor

package/dist/wje-badge.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Badge ]\n*/\n\n.native-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-shadow: none;\n  font-family: var(--wje-font-family);\n  font-size: var(--wje-font-size-x-small);\n  line-height: 1;\n  padding: 0;\n  padding-block: 0;\n  padding-inline: var(--wje-spacing-2x-small);\n  border-radius: var(--wje-badge-border-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  height: 18px;\n  /*min-width: 18px;*/\n}\n\n.wje-color-primary {\n  background-color: var(--wje-color-primary-2);\n  color: var(--wje-color-primary-9);\n}\n\n.wje-color-complete {\n  background-color: var(--wje-color-complete-2);\n  color: var(--wje-color-complete-9);\n}\n\n.wje-color-success {\n  background-color: var(--wje-color-success-2);\n  color: var(--wje-color-success-9);\n}\n\n.wje-color-warning {\n  background-color: var(--wje-color-warning-2);\n  color: var(--wje-color-warning-11);\n}\n\n.wje-color-danger {\n  background-color: var(--wje-color-danger-2);\n  color: var(--wje-color-danger-9);\n}\n\n.wje-color-info {\n  background-color: var(--wje-color-contrast-0);\n  color: var(--wje-color-info-11);\n  border-color: var(--wje-color-contrast-2);\n}\n\n.wje-color-default {\n  background-color: var(--wje-color-contrast-3);\n  color: var(--wje-color-contrast-11);\n}";
+const styles = "/*\r\n[ WJ Badge ]\r\n*/\r\n\r\n.native-badge {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-shadow: none;\r\n  font-family: var(--wje-font-family);\r\n  font-size: var(--wje-font-size-x-small);\r\n  line-height: 1;\r\n  padding: 0;\r\n  padding-block: 0;\r\n  padding-inline: var(--wje-spacing-2x-small);\r\n  border-radius: var(--wje-badge-border-radius);\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-color: transparent;\r\n  height: 18px;\r\n  /*min-width: 18px;*/\r\n}\r\n\r\n.wje-color-primary {\r\n  background-color: var(--wje-color-primary-2);\r\n  color: var(--wje-color-primary-9);\r\n}\r\n\r\n.wje-color-complete {\r\n  background-color: var(--wje-color-complete-2);\r\n  color: var(--wje-color-complete-9);\r\n}\r\n\r\n.wje-color-success {\r\n  background-color: var(--wje-color-success-2);\r\n  color: var(--wje-color-success-9);\r\n}\r\n\r\n.wje-color-warning {\r\n  background-color: var(--wje-color-warning-2);\r\n  color: var(--wje-color-warning-11);\r\n}\r\n\r\n.wje-color-danger {\r\n  background-color: var(--wje-color-danger-2);\r\n  color: var(--wje-color-danger-9);\r\n}\r\n\r\n.wje-color-info {\r\n  background-color: var(--wje-color-contrast-0);\r\n  color: var(--wje-color-info-11);\r\n  border-color: var(--wje-color-contrast-2);\r\n}\r\n\r\n.wje-color-default {\r\n  background-color: var(--wje-color-contrast-3);\r\n  color: var(--wje-color-contrast-11);\r\n}";
 class Badge extends WJElement {
   /**
    * Badge constructor

package/dist/wje-breadcrumb.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { WjElementUtils, event } from "./wje-element.js";
-const styles = '/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  line-height: 1.5;\n}\n\n:host(.collapsed) {\n  display: none;\n}\n.native-breadcrumb {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  outline: none;\n  background: inherit;\n  padding: .25rem .75rem;\n  color: var(--wje-breadcrumb-a);\n  text-decoration: none;\n  &.hidden {\n    display: none;\n  }\n  &.active {\n    font-weight: bold;\n  }\n  &:hover {\n    color: var(--wje-breadcrumb-a-hover);\n  }\n}\n\nbutton {\n  margin-inline: .75rem;\n  border: 0 solid transparent;\n  border-radius: 3px;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.separator {\n  display: inline-flex;\n  align-items: center;\n}\n\n::slotted([slot="start"]) {\n  margin-inline: 0 .5rem;\n}\n\n::slotted([slot="end"]) {\n  margin-inline: .5rem 0;\n}';
+const styles = '/*\r\n[ WJ Breadcrumb ]\r\n*/\r\n\r\n:host {\r\n  display: flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  line-height: 1.5;\r\n}\r\n\r\n:host(.collapsed) {\r\n  display: none;\r\n}\r\n.native-breadcrumb {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  outline: none;\r\n  background: inherit;\r\n  padding: .25rem .75rem;\r\n  color: var(--wje-breadcrumb-a);\r\n  text-decoration: none;\r\n  &.hidden {\r\n    display: none;\r\n  }\r\n  &.active {\r\n    font-weight: bold;\r\n  }\r\n  &:hover {\r\n    color: var(--wje-breadcrumb-a-hover);\r\n  }\r\n}\r\n\r\nbutton {\r\n  margin-inline: .75rem;\r\n  border: 0 solid transparent;\r\n  border-radius: 3px;\r\n  background-color: transparent;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.separator {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n::slotted([slot="start"]) {\r\n  margin-inline: 0 .5rem;\r\n}\r\n\r\n::slotted([slot="end"]) {\r\n  margin-inline: .5rem 0;\r\n}';
 class Breadcrumb extends WJElement {
   /**
    * Breadcrumb constructor

package/dist/wje-breadcrumbs.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Breadcrumbs ]\n*/\n\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}";
+const styles = "/*\r\n[ WJ Breadcrumbs ]\r\n*/\r\n\r\n:host {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n}";
 class Breadcrumbs extends WJElement {
   /**
    * Breadcrumbs constructor

package/dist/wje-button-group.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Button Group ]\n*/\n\n:host {\n  display: inline-block;\n  .native-button-group {\n    display: flex;\n    flex-wrap: nowrap;\n    line-height: 1;\n  }\n\n  slot {\n    display: contents;\n  }\n}\n\n::slotted(wje-button) {\n  margin: 0 !important;\n}";
+const styles = "/*\r\n[ WJ Button Group ]\r\n*/\r\n\r\n:host {\r\n  display: inline-block;\r\n  .native-button-group {\r\n    display: flex;\r\n    flex-wrap: nowrap;\r\n    line-height: 1;\r\n  }\r\n\r\n  slot {\r\n    display: contents;\r\n  }\r\n}\r\n\r\n::slotted(wje-button) {\r\n  margin: 0 !important;\r\n}";
 class ButtonGroup extends WJElement {
   /**
    * ButtonGroup constructor

package/dist/wje-button.js

@@ -9,7 +9,7 @@ import Icon from "./wje-icon.js";
 const bool = (v) => {
   return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
 };
-const styles = '/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n  background-color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-primary-9);\n  color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n  background-color: var(--wje-color-primary-1);\n  border-color: var(--wje-color-primary-9);\n  color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n  background-color: var(--wje-color-complete-9);\n  border-color: var(--wje-color-complete-9);\n  color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n  background-color: var(--wje-color-complete-1);\n  border-color: var(--wje-color-complete-9);\n  color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n  background-color: var(--wje-color-success-9);\n  border-color: var(--wje-color-success-9);\n  color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n  background-color: var(--wje-color-success-1);\n  border-color: var(--wje-color-success-9);\n  color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n  background-color: var(--wje-color-warning-9);\n  border-color: var(--wje-color-warning-9);\n  color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n  background-color: var(--wje-color-warning-1);\n  border-color: var(--wje-color-warning-11);\n  color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n  background-color: var(--wje-color-danger-9);\n  border-color: var(--wje-color-danger-9);\n  color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n  background-color: var(--wje-color-danger-1);\n  border-color: var(--wje-color-danger-9);\n  color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-neutral {\n  background-color: var(--wje-color-contrast-9);\n  border-color: var(--wje-color-contrast-9);\n  color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-neutral {\n  background-color: var(--wje-color-contrast-1);\n  border-color: var(--wje-color-contrast-9);\n  color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n  background-color: var(--wje-color-contrast-0);\n  border-color: var(--wje-color-contrast-3);\n  color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n  background-color: var(--wje-color-contrast-1);\n  border-color: var(--wje-color-contrast-5);\n  color: var(--wje-color-contrast-11);\n}\n\n:host {\n  --wje-padding-top: .4rem;\n  --wje-padding-start: .5rem;\n  --wje-padding-end: .5rem;\n  --wje-padding-bottom: .4rem;\n\n  display: inline-flex;\n  position: relative;\n  width: auto;\n  cursor: pointer;\n  margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n  display: block;\n}\n\n.native-button {\n  font-family: var(--wje-font-family);\n  font-size: var(--wje-font-size);\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n  border-width: var(--wje-button-border-width);\n  border-style: var(--wje-button-border-style);\n  border-color: var(--wje-button-border-color);\n  background-color: transparent;\n  /*color: var(--wje-button-color);*/\n  line-height: 1;\n  contain: layout style;\n  cursor: pointer;\n  z-index: 0;\n  box-sizing: border-box;\n  appearance: none;\n  margin: 0;\n  border-radius: var(--wje-button-border-radius);\n  padding-top: var(--wje-padding-top);\n  padding-bottom: var(--wje-padding-bottom);\n  padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n  white-space: nowrap;\n}\n\n.native-button:hover {\n  outline-style: solid;\n  outline-width: var(--wje-button-outline-width);\n  transition: outline-width .1s linear;\n}\n\n@media (any-hover: hover) {\n  .wje-button-solid.wje-color-primary:hover {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n    outline-color: var(--wje-color-primary-2);\n  }\n\n  .wje-button-outline.wje-color-primary:hover {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n    outline-color: var(--wje-color-primary-2);\n  }\n\n  .wje-button-solid.wje-color-complete:hover {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n    outline-color: var(--wje-color-complete-2);\n  }\n\n  .wje-button-outline.wje-color-complete:hover {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n    outline-color: var(--wje-color-complete-2);\n  }\n\n  .wje-button-solid.wje-color-success:hover {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n    outline-color: var(--wje-color-success-2);\n  }\n\n  .wje-button-outline.wje-color-success:hover {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n    outline-color: var(--wje-color-success-2);\n  }\n\n  .wje-button-solid.wje-color-warning:hover {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n    outline-color: var(--wje-color-warning-2);\n  }\n\n  .wje-button-outline.wje-color-warning:hover {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n    outline-color: var(--wje-color-warning-2);\n  }\n\n  .wje-button-solid.wje-color-danger:hover {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n    outline-color: var(--wje-color-danger-2);\n  }\n\n  .wje-button-outline.wje-color-danger:hover {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n    outline-color: var(--wje-color-danger-2);\n  }\n\n  .wje-button-solid.wje-color-neutral:hover {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n    outline-color: var(--wje-color-contrast-3);\n  }\n\n  .wje-button-outline.wje-color-neutral:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n    outline-color: var(--wje-color-contrast-3);\n  }\n\n  .wje-button-solid.wje-color-default:hover {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n    outline-color: var(--wje-color-contrast-3);\n  }\n\n  .wje-button-outline.wje-color-default:hover {\n    background-color: var(--wje-color-contrast-2);\n    border-color: var(--wje-color-contrast-5);\n    color: var(--wje-color-contrast-11);\n    outline-color: var(--wje-color-contrast-3);\n  }\n\n  .wje-button-link:hover {\n    background-color: var(--wje-color-contrast-3);\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n    outline-color: transparent;\n    outline-width: 0;\n  }\n}\n\n.button-inner {\n  display: flex;\n  position: relative;\n  flex-flow: row nowrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n  border-width: var(--wje-button-border-width);\n  border-radius: var(--wje-button-border-radius);\n  border-color: transparent;\n  background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n  cursor: default;\n  opacity: .5;\n  pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n  border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n  border-radius: var(--wje-border-radius-circle);\n  aspect-ratio: 1/1;\n  width: 1.813rem;\n  display: flex;\n  align-items: center;\n  --wje-padding-top: 0;\n  --wje-padding-start: 0;\n  --wje-padding-end: 0;\n  --wje-padding-bottom: 0;\n\n}\n\n:host([size=small]) .native-button {\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n}\n\n:host([size=large]) .native-button {\n  --wje-padding-top: .6rem;\n  --wje-padding-start: .7rem;\n  --wje-padding-end: .7rem;\n  --wje-padding-bottom: .6rem;\n}\n\n:host([size=small][circle]) .native-button {\n  width: 1.5rem;\n  --wje-padding-top: 0;\n  --wje-padding-start: 0;\n  --wje-padding-end: 0;\n  --wje-padding-bottom: 0;\n}\n\n:host([size=large][circle]) .native-button {\n  width: 2.188rem;\n  --wje-padding-top: 0;\n  --wje-padding-start: 0;\n  --wje-padding-end: 0;\n  --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot="start"]) {\n  margin: 0 .3rem 0 -.3rem;\n}\n\n::slotted(wje-icon[slot="end"]) {\n  margin: 0 -.2rem 0 .3rem;\n}\n\n:host(:not([only-caret])) slot[name="caret"] {\n  padding: 0 0 0 .3rem;\n}\n\n:host([only-caret]) slot[name="caret"] {\n  padding: 0;\n  display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n  border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n  margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot="toggle"]) {\n  display: none;\n}\n\n::slotted([slot="toggle"].show) {\n  display: block;\n}\n';
+const styles = '/*\r\n[ WJ Button ]\r\n*/\r\n\r\n/*PRIMARY*/\r\n.wje-button-solid.wje-color-primary {\r\n  background-color: var(--wje-color-primary-9);\r\n  border-color: var(--wje-color-primary-9);\r\n  color: var(--wje-color-contrast-0);\r\n}\r\n\r\n.wje-button-outline.wje-color-primary {\r\n  background-color: var(--wje-color-primary-1);\r\n  border-color: var(--wje-color-primary-9);\r\n  color: var(--wje-color-primary-9);\r\n}\r\n\r\n/*COMPLETE*/\r\n.wje-button-solid.wje-color-complete {\r\n  background-color: var(--wje-color-complete-9);\r\n  border-color: var(--wje-color-complete-9);\r\n  color: var(--wje-color-contrast-0);\r\n}\r\n\r\n.wje-button-outline.wje-color-complete {\r\n  background-color: var(--wje-color-complete-1);\r\n  border-color: var(--wje-color-complete-9);\r\n  color: var(--wje-color-complete-9);\r\n}\r\n\r\n/*SUCCESS*/\r\n.wje-button-solid.wje-color-success {\r\n  background-color: var(--wje-color-success-9);\r\n  border-color: var(--wje-color-success-9);\r\n  color: var(--wje-color-contrast-0);\r\n}\r\n\r\n.wje-button-outline.wje-color-success {\r\n  background-color: var(--wje-color-success-1);\r\n  border-color: var(--wje-color-success-9);\r\n  color: var(--wje-color-success-9);\r\n}\r\n\r\n/*WARNING*/\r\n.wje-button-solid.wje-color-warning {\r\n  background-color: var(--wje-color-warning-9);\r\n  border-color: var(--wje-color-warning-9);\r\n  color: var(--wje-color-black);\r\n}\r\n\r\n.wje-button-outline.wje-color-warning {\r\n  background-color: var(--wje-color-warning-1);\r\n  border-color: var(--wje-color-warning-11);\r\n  color: var(--wje-color-warning-11);\r\n}\r\n\r\n/*DANGER*/\r\n.wje-button-solid.wje-color-danger {\r\n  background-color: var(--wje-color-danger-9);\r\n  border-color: var(--wje-color-danger-9);\r\n  color: var(--wje-color-contrast-0);\r\n}\r\n\r\n.wje-button-outline.wje-color-danger {\r\n  background-color: var(--wje-color-danger-1);\r\n  border-color: var(--wje-color-danger-9);\r\n  color: var(--wje-color-danger-9);\r\n}\r\n\r\n/*NEUTRAL*/\r\n.wje-button-solid.wje-color-neutral {\r\n  background-color: var(--wje-color-contrast-9);\r\n  border-color: var(--wje-color-contrast-9);\r\n  color: var(--wje-color-contrast-0);\r\n}\r\n\r\n.wje-button-outline.wje-color-neutral {\r\n  background-color: var(--wje-color-contrast-1);\r\n  border-color: var(--wje-color-contrast-9);\r\n  color: var(--wje-color-contrast-9);\r\n}\r\n\r\n/*DEFAULT*/\r\n.wje-button-solid.wje-color-default {\r\n  background-color: var(--wje-color-contrast-0);\r\n  border-color: var(--wje-color-contrast-3);\r\n  color: var(--wje-color-contrast-11);\r\n}\r\n\r\n.wje-button-outline.wje-color-default {\r\n  background-color: var(--wje-color-contrast-1);\r\n  border-color: var(--wje-color-contrast-5);\r\n  color: var(--wje-color-contrast-11);\r\n}\r\n\r\n:host {\r\n  --wje-padding-top: .4rem;\r\n  --wje-padding-start: .5rem;\r\n  --wje-padding-end: .5rem;\r\n  --wje-padding-bottom: .4rem;\r\n\r\n  display: inline-flex;\r\n  position: relative;\r\n  width: auto;\r\n  cursor: pointer;\r\n  margin-inline: var(--wje-button-margin-inline);\r\n}\r\n\r\n:host(.wje-button-group-button) {\r\n  display: block;\r\n}\r\n\r\n.native-button {\r\n  font-family: var(--wje-font-family);\r\n  font-size: var(--wje-font-size);\r\n  display: flex;\r\n  position: relative;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 100%;\r\n  min-height: inherit;\r\n  /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\r\n  border-width: var(--wje-button-border-width);\r\n  border-style: var(--wje-button-border-style);\r\n  border-color: var(--wje-button-border-color);\r\n  background-color: transparent;\r\n  /*color: var(--wje-button-color);*/\r\n  line-height: 1;\r\n  contain: layout style;\r\n  cursor: pointer;\r\n  z-index: 0;\r\n  box-sizing: border-box;\r\n  appearance: none;\r\n  margin: 0;\r\n  border-radius: var(--wje-button-border-radius);\r\n  padding-top: var(--wje-padding-top);\r\n  padding-bottom: var(--wje-padding-bottom);\r\n  padding-inline: var(--wje-padding-start) var(--wje-padding-end);\r\n  white-space: nowrap;\r\n}\r\n\r\n.native-button:hover {\r\n  outline-style: solid;\r\n  outline-width: var(--wje-button-outline-width);\r\n  transition: outline-width .1s linear;\r\n}\r\n\r\n@media (any-hover: hover) {\r\n  .wje-button-solid.wje-color-primary:hover {\r\n    background-color: var(--wje-color-primary-9);\r\n    border-color: var(--wje-color-primary-9);\r\n    color: var(--wje-color-contrast-0);\r\n    outline-color: var(--wje-color-primary-2);\r\n  }\r\n\r\n  .wje-button-outline.wje-color-primary:hover {\r\n    background-color: var(--wje-color-primary-1);\r\n    border-color: var(--wje-color-primary-9);\r\n    color: var(--wje-color-primary-9);\r\n    outline-color: var(--wje-color-primary-2);\r\n  }\r\n\r\n  .wje-button-solid.wje-color-complete:hover {\r\n    background-color: var(--wje-color-complete-9);\r\n    border-color: var(--wje-color-complete-9);\r\n    color: var(--wje-color-contrast-0);\r\n    outline-color: var(--wje-color-complete-2);\r\n  }\r\n\r\n  .wje-button-outline.wje-color-complete:hover {\r\n    background-color: var(--wje-color-complete-1);\r\n    border-color: var(--wje-color-complete-9);\r\n    color: var(--wje-color-complete-9);\r\n    outline-color: var(--wje-color-complete-2);\r\n  }\r\n\r\n  .wje-button-solid.wje-color-success:hover {\r\n    background-color: var(--wje-color-success-9);\r\n    border-color: var(--wje-color-success-9);\r\n    color: var(--wje-color-contrast-0);\r\n    outline-color: var(--wje-color-success-2);\r\n  }\r\n\r\n  .wje-button-outline.wje-color-success:hover {\r\n    background-color: var(--wje-color-success-1);\r\n    border-color: var(--wje-color-success-9);\r\n    color: var(--wje-color-success-9);\r\n    outline-color: var(--wje-color-success-2);\r\n  }\r\n\r\n  .wje-button-solid.wje-color-warning:hover {\r\n    background-color: var(--wje-color-warning-9);\r\n    border-color: var(--wje-color-warning-9);\r\n    color: var(--wje-color-black);\r\n    outline-color: var(--wje-color-warning-2);\r\n  }\r\n\r\n  .wje-button-outline.wje-color-warning:hover {\r\n    background-color: var(--wje-color-warning-1);\r\n    border-color: var(--wje-color-warning-11);\r\n    color: var(--wje-color-warning-11);\r\n    outline-color: var(--wje-color-warning-2);\r\n  }\r\n\r\n  .wje-button-solid.wje-color-danger:hover {\r\n    background-color: var(--wje-color-danger-9);\r\n    border-color: var(--wje-color-danger-9);\r\n    color: var(--wje-color-contrast-0);\r\n    outline-color: var(--wje-color-danger-2);\r\n  }\r\n\r\n  .wje-button-outline.wje-color-danger:hover {\r\n    background-color: var(--wje-color-danger-1);\r\n    border-color: var(--wje-color-danger-9);\r\n    color: var(--wje-color-danger-9);\r\n    outline-color: var(--wje-color-danger-2);\r\n  }\r\n\r\n  .wje-button-solid.wje-color-neutral:hover {\r\n    background-color: var(--wje-color-contrast-9);\r\n    border-color: var(--wje-color-contrast-9);\r\n    color: var(--wje-color-contrast-0);\r\n    outline-color: var(--wje-color-contrast-3);\r\n  }\r\n\r\n  .wje-button-outline.wje-color-neutral:hover {\r\n    background-color: var(--wje-color-contrast-1);\r\n    border-color: var(--wje-color-contrast-9);\r\n    color: var(--wje-color-contrast-9);\r\n    outline-color: var(--wje-color-contrast-3);\r\n  }\r\n\r\n  .wje-button-solid.wje-color-default:hover {\r\n    background-color: var(--wje-color-contrast-0);\r\n    border-color: var(--wje-color-contrast-3);\r\n    color: var(--wje-color-contrast-11);\r\n    outline-color: var(--wje-color-contrast-3);\r\n  }\r\n\r\n  .wje-button-outline.wje-color-default:hover {\r\n    background-color: var(--wje-color-contrast-2);\r\n    border-color: var(--wje-color-contrast-5);\r\n    color: var(--wje-color-contrast-11);\r\n    outline-color: var(--wje-color-contrast-3);\r\n  }\r\n\r\n  .wje-button-link:hover {\r\n    background-color: var(--wje-color-contrast-3);\r\n    border-color: transparent;\r\n    color: var(--wje-color-contrast-11);\r\n    outline-color: transparent;\r\n    outline-width: 0;\r\n  }\r\n}\r\n\r\n.button-inner {\r\n  display: flex;\r\n  position: relative;\r\n  flex-flow: row nowrap;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  line-height: normal;\r\n}\r\n\r\n/*\r\n[ Link ]\r\n*/\r\n\r\n.wje-button-link {\r\n  border-width: var(--wje-button-border-width);\r\n  border-radius: var(--wje-button-border-radius);\r\n  border-color: transparent;\r\n  background-color: transparent;\r\n}\r\n\r\n/*\r\n[ Disabled ]\r\n*/\r\n\r\n.wje-button-disabled {\r\n  cursor: default;\r\n  opacity: .5;\r\n  pointer-events: none;\r\n}\r\n\r\n/*\r\n[ Round ]\r\n*/\r\n\r\n:host([round]) .native-button {\r\n  border-radius: var(--wje-border-radius-pill);\r\n}\r\n\r\n:host([circle]) .native-button {\r\n  border-radius: var(--wje-border-radius-circle);\r\n  aspect-ratio: 1/1;\r\n  width: 1.813rem;\r\n  display: flex;\r\n  align-items: center;\r\n  --wje-padding-top: 0;\r\n  --wje-padding-start: 0;\r\n  --wje-padding-end: 0;\r\n  --wje-padding-bottom: 0;\r\n\r\n}\r\n\r\n:host([size=small]) .native-button {\r\n  --wje-padding-top: .25rem;\r\n  --wje-padding-start: .25rem;\r\n  --wje-padding-end: .25rem;\r\n  --wje-padding-bottom: .25rem;\r\n}\r\n\r\n:host([size=large]) .native-button {\r\n  --wje-padding-top: .6rem;\r\n  --wje-padding-start: .7rem;\r\n  --wje-padding-end: .7rem;\r\n  --wje-padding-bottom: .6rem;\r\n}\r\n\r\n:host([size=small][circle]) .native-button {\r\n  width: 1.5rem;\r\n  --wje-padding-top: 0;\r\n  --wje-padding-start: 0;\r\n  --wje-padding-end: 0;\r\n  --wje-padding-bottom: 0;\r\n}\r\n\r\n:host([size=large][circle]) .native-button {\r\n  width: 2.188rem;\r\n  --wje-padding-top: 0;\r\n  --wje-padding-start: 0;\r\n  --wje-padding-end: 0;\r\n  --wje-padding-bottom: 0;\r\n}\r\n\r\n::slotted(wje-icon[slot="start"]) {\r\n  margin: 0 .3rem 0 -.3rem;\r\n}\r\n\r\n::slotted(wje-icon[slot="end"]) {\r\n  margin: 0 -.2rem 0 .3rem;\r\n}\r\n\r\n:host(:not([only-caret])) slot[name="caret"] {\r\n  padding: 0 0 0 .3rem;\r\n}\r\n\r\n:host([only-caret]) slot[name="caret"] {\r\n  padding: 0;\r\n  display: block;\r\n}\r\n\r\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\r\n  border-start-end-radius: 0;\r\n  border-end-end-radius: 0;\r\n}\r\n\r\n:host(.wje-button-group-inner) .native-button {\r\n  border-radius: 0;\r\n}\r\n\r\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\r\n  border-start-start-radius: 0;\r\n  border-end-start-radius: 0;\r\n}\r\n\r\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\r\n  margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\r\n}\r\n\r\n::slotted([slot="toggle"]) {\r\n  display: none;\r\n}\r\n\r\n::slotted([slot="toggle"].show) {\r\n  display: block;\r\n}\r\n';
 class Button extends WJElement {
   /**
    * Button constructor

package/dist/wje-card-content.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Card - Content ]\n*/\n\n:host {\n  display: block;\n  padding: var(--wje-card-content-padding);\n  &.no-padding {\n    .row {\n      margin-left: 0;\n      margin-right: 0;\n    }\n  }\n  &.no-bottom-padding {\n    padding-bottom: 0;\n  }\n  &.no-top-padding {\n    padding-top: 0;\n  }\n  .title {\n    margin-top: 0;\n  }\n  &.scrollable {\n    margin-bottom: 20px;\n  }\n  h3 {\n    line-height: 34px;\n    font-size: 26px;\n  }\n}";
+const styles = "/*\r\n[ WJ Card - Content ]\r\n*/\r\n\r\n:host {\r\n  display: block;\r\n  padding: var(--wje-card-content-padding);\r\n  &.no-padding {\r\n    .row {\r\n      margin-left: 0;\r\n      margin-right: 0;\r\n    }\r\n  }\r\n  &.no-bottom-padding {\r\n    padding-bottom: 0;\r\n  }\r\n  &.no-top-padding {\r\n    padding-top: 0;\r\n  }\r\n  .title {\r\n    margin-top: 0;\r\n  }\r\n  &.scrollable {\r\n    margin-bottom: 20px;\r\n  }\r\n  h3 {\r\n    line-height: 34px;\r\n    font-size: 26px;\r\n  }\r\n}";
 class CardContent extends WJElement {
   /**
    * CardContent constructor

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 = "/*\r\n[ WJ Card - Controls ]\r\n*/\r\n\r\n:host {\r\n  font-family: var(--wje-card-controls-font-family);\r\n  text-transform: uppercase;\r\n  display: inline-block;\r\n  letter-spacing: 0.06em;\r\n  font-size: var(--wje-card-controls-font-size);\r\n  font-weight: 500;\r\n  margin: 0;\r\n  padding: 0;\r\n  line-height: normal;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  filter: alpha(opacity=40);\r\n  transition: opacity 0.3s ease;\r\n  position: absolute;\r\n  right: 1rem;\r\n  top: .5rem;\r\n}";
 class CardControls extends WJElement {
   /**
    * CardControls constructor

package/dist/wje-card-header.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = '/*\n[ WJ Card - Header ]\n*/\n\n:host {\n  background: transparent;\n  border-radius: 0;\n  border-bottom: 0;\n  padding: var(--wje-card-header-padding);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.wje-separator):after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  margin-top: .5rem;\n}';
+const styles = '/*\r\n[ WJ Card - Header ]\r\n*/\r\n\r\n:host {\r\n  background: transparent;\r\n  border-radius: 0;\r\n  border-bottom: 0;\r\n  padding: var(--wje-card-header-padding);\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n:host(.wje-separator):after {\r\n  content: "";\r\n  height: 1px;\r\n  background: rgba(0, 0, 0, 0.08);\r\n  margin-top: .5rem;\r\n}';
 class CardHeader extends WJElement {
   /**
    * CardHeader constructor.

package/dist/wje-card-subtitle.js

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

package/dist/wje-card-title.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Card - Title ]\n*/\n\n:host {\n  font-size: var(--wje-card-title-font-size);\n  font-weight: var(--wje-card-title-font-weight);\n  margin: var(--wje-card-title-margin);\n  padding: var(--wje-card-title-padding);\n  line-height: var(--wje-card-title-line-height);\n  display: block;\n  position: relative;\n}";
+const styles = "/*\r\n[ WJ Card - Title ]\r\n*/\r\n\r\n:host {\r\n  font-size: var(--wje-card-title-font-size);\r\n  font-weight: var(--wje-card-title-font-weight);\r\n  margin: var(--wje-card-title-margin);\r\n  padding: var(--wje-card-title-padding);\r\n  line-height: var(--wje-card-title-line-height);\r\n  display: block;\r\n  position: relative;\r\n}";
 class CardTitle extends WJElement {
   /**
    * CardTitle constructor.

package/dist/wje-card.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Card ]\n*/\n\n:host {\n  width: 100%;\n}\n\n.native-card {\n  background-color: transparent;\n  margin: 0;\n  box-shadow: var(--wje-card-shadow);\n  border-color: var(--wje-border-color);\n  border-style: var(--wje-border-style);\n  border-width: var(--wje-border-width);\n  border-radius: var(--wje-card-border-radius);\n  font-family: var(--wje-font-family);\n  font-size: var(--wje-font-size);\n  line-height: var(--wje-line-height-normal);\n  position: relative;\n  width: 100%;\n  word-wrap: normal;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n/*BG - TEXT*/\n.native-card.wje-color-primary {\n  background: var(--wje-color-primary-9);\n  color: var(--wje-color-contrast-0);\n  border-color: var(--wje-color-primary-9);\n}\n\n.native-card.wje-color-complete {\n  background: var(--wje-color-complete-9);\n  color: var(--wje-color-contrast-0);\n  border-color: var(--wje-color-complete-9);\n}\n\n.native-card.wje-color-success {\n  background: var(--wje-color-success-9);\n  color: var(--wje-color-contrast-0);\n  border-color: var(--wje-color-success-9);\n}\n\n.native-card.wje-color-warning {\n  background: var(--wje-color-warning-9);\n  color: var(--wje-color);\n  border-color: var(--wje-color-warning-9);\n}\n\n.native-card.wje-color-danger {\n  background: var(--wje-color-danger-9);\n  color: var(--wje-color-contrast-0);\n  border-color: var(--wje-color-danger-9);\n}\n\n.native-card.wje-color-info {\n  background: var(--wje-color-info-9);\n  color: var(--wje-color-contrast-0);\n  border-color: var(--wje-color-info-9);\n}\n\n.native-card.wje-color-menu {\n  background: var(--wje-color-contrast-9);\n  color: var(--wje-color-contrast-0);\n  border-color: var(--wje-color-contrast-9);\n}";
+const styles = "/*\r\n[ WJ Card ]\r\n*/\r\n\r\n:host {\r\n  width: 100%;\r\n}\r\n\r\n.native-card {\r\n  background-color: transparent;\r\n  margin: 0;\r\n  box-shadow: var(--wje-card-shadow);\r\n  border-color: var(--wje-border-color);\r\n  border-style: var(--wje-border-style);\r\n  border-width: var(--wje-border-width);\r\n  border-radius: var(--wje-card-border-radius);\r\n  font-family: var(--wje-font-family);\r\n  font-size: var(--wje-font-size);\r\n  line-height: var(--wje-line-height-normal);\r\n  position: relative;\r\n  width: 100%;\r\n  word-wrap: normal;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n/*BG - TEXT*/\r\n.native-card.wje-color-primary {\r\n  background: var(--wje-color-primary-9);\r\n  color: var(--wje-color-contrast-0);\r\n  border-color: var(--wje-color-primary-9);\r\n}\r\n\r\n.native-card.wje-color-complete {\r\n  background: var(--wje-color-complete-9);\r\n  color: var(--wje-color-contrast-0);\r\n  border-color: var(--wje-color-complete-9);\r\n}\r\n\r\n.native-card.wje-color-success {\r\n  background: var(--wje-color-success-9);\r\n  color: var(--wje-color-contrast-0);\r\n  border-color: var(--wje-color-success-9);\r\n}\r\n\r\n.native-card.wje-color-warning {\r\n  background: var(--wje-color-warning-9);\r\n  color: var(--wje-color);\r\n  border-color: var(--wje-color-warning-9);\r\n}\r\n\r\n.native-card.wje-color-danger {\r\n  background: var(--wje-color-danger-9);\r\n  color: var(--wje-color-contrast-0);\r\n  border-color: var(--wje-color-danger-9);\r\n}\r\n\r\n.native-card.wje-color-info {\r\n  background: var(--wje-color-info-9);\r\n  color: var(--wje-color-contrast-0);\r\n  border-color: var(--wje-color-info-9);\r\n}\r\n\r\n.native-card.wje-color-menu {\r\n  background: var(--wje-color-contrast-9);\r\n  color: var(--wje-color-contrast-0);\r\n  border-color: var(--wje-color-contrast-9);\r\n}";
 class Card extends WJElement {
   /**
    * Card constructor

package/dist/wje-carousel-item.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-const styles = "/*\n[ WJ Carousel Item ]\n*/\n\n:host {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    width: var(--wje-carousel-size, 100%);\n    max-height: 100%;\n    aspect-ratio: var(--wje-carousel-item-aspect-ratio);\n    scroll-snap-align: center;\n    scroll-snap-stop: always;\n}\n\n.native-carousel-item {\n    width: 100%;\n    height: 100%;\n    display: flex;\n}\n::slotted(wje-img) {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: contain;\n    display: flex;\n}\n";
+const styles = "/*\r\n[ WJ Carousel Item ]\r\n*/\r\n\r\n:host {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    width: var(--wje-carousel-size, 100%);\r\n    max-height: 100%;\r\n    aspect-ratio: var(--wje-carousel-item-aspect-ratio);\r\n    scroll-snap-align: center;\r\n    scroll-snap-stop: always;\r\n}\r\n\r\n.native-carousel-item {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n}\r\n::slotted(wje-img) {\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    object-fit: contain;\r\n    display: flex;\r\n}\r\n";
 class CarouselItem extends WJElement {
   constructor() {
     super();

package/dist/wje-carousel.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ Carousel ]\n*/\n\n.native-carousel {\n  position: relative;\n  width: var(--wje-carousel-width, 100%);\n  height: var(--wje-carousel-height, 300px);\n  scroll-behavior: smooth;\n}\n\n.carousel-slides {\n  display: flex;\n  transition: transform 0.5s ease;\n  align-items: center;\n  justify-items: center;\n  overflow: auto;\n  overscroll-behavior-x: contain;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  aspect-ratio: var(--wje-aspect-ratio, 4 / 3);\n  scroll-snap-type: x mandatory;\n  scroll-padding-inline: 0;\n  overflow-y: hidden;\n  padding-inline: var(--wje-spacing-inline, 0);\n  gap: .5rem;\n}\n\n.carousel-slides::-webkit-scrollbar{\n  display: none;\n}\n\n::slotted(wje-carousel-item) {\n  flex: 0 0 var(--wje-carousel-size);\n  height: 100%;\n}\n\n/*NAVIGATION*/\n\nwje-button {\n  position: absolute;\n  top: 50%;\n\n  border: none;\n  cursor: pointer;\n  z-index: 2;\n}\n\n.prev {\n  left: -1rem;\n  transform: translate(-100%, -50%);\n}\n\n.next {\n  right: -1rem;\n  transform: translate(100%, -50%);\n}\n\n/*PAGINATION*/\n\n.pagination {\n  position: relative;\n  bottom: -.5rem;\n  left: 50%;\n  transform: translate(-50%, 100%);\n  display: flex;\n  z-index: 2;\n  justify-content: center;\n}\n.pagination-item {\n  cursor: pointer;\n  height: 15px;\n  width: 15px;\n  margin: 0 2px;\n  background-color: var(--wje-color-contrast-4);\n  display: inline-block;\n  border-radius: 50%;\n}\n.pagination-item.active {\n  background-color: var(--wje-color);\n}\n\n/*THUMBNAILS*/\n\n.thumbnails {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: auto;\n  gap: .5rem;\n  padding: 0 .5rem;\n  margin-top: .5rem;\n  margin-bottom: .5rem;\n  box-sizing: border-box;\n  overflow-y: hidden;\n  wje-thumbnail {\n    --wje-thumbnail-width: 48px;\n    --wje-thumbnail-height: 48px;\n    --wje-thumbnail-border-radius: 0;\n    cursor: pointer;\n    border: 1px solid transparent;\n  }\n  .active {\n    border: 1px solid var(--wje-color-primary-11);\n  }\n}\n\n\n\n";
+const styles = "/*\r\n[ Carousel ]\r\n*/\r\n\r\n.native-carousel {\r\n  position: relative;\r\n  width: var(--wje-carousel-width, 100%);\r\n  height: var(--wje-carousel-height, 300px);\r\n  scroll-behavior: smooth;\r\n}\r\n\r\n.carousel-slides {\r\n  display: flex;\r\n  transition: transform 0.5s ease;\r\n  align-items: center;\r\n  justify-items: center;\r\n  overflow: auto;\r\n  overscroll-behavior-x: contain;\r\n  scrollbar-width: none;\r\n  -ms-overflow-style: none;\r\n  aspect-ratio: var(--wje-aspect-ratio, 4 / 3);\r\n  scroll-snap-type: x mandatory;\r\n  scroll-padding-inline: 0;\r\n  overflow-y: hidden;\r\n  padding-inline: var(--wje-spacing-inline, 0);\r\n  gap: .5rem;\r\n}\r\n\r\n.carousel-slides::-webkit-scrollbar{\r\n  display: none;\r\n}\r\n\r\n::slotted(wje-carousel-item) {\r\n  flex: 0 0 var(--wje-carousel-size);\r\n  height: 100%;\r\n}\r\n\r\n/*NAVIGATION*/\r\n\r\nwje-button {\r\n  position: absolute;\r\n  top: 50%;\r\n\r\n  border: none;\r\n  cursor: pointer;\r\n  z-index: 2;\r\n}\r\n\r\n.prev {\r\n  left: -1rem;\r\n  transform: translate(-100%, -50%);\r\n}\r\n\r\n.next {\r\n  right: -1rem;\r\n  transform: translate(100%, -50%);\r\n}\r\n\r\n/*PAGINATION*/\r\n\r\n.pagination {\r\n  position: relative;\r\n  bottom: -.5rem;\r\n  left: 50%;\r\n  transform: translate(-50%, 100%);\r\n  display: flex;\r\n  z-index: 2;\r\n  justify-content: center;\r\n}\r\n.pagination-item {\r\n  cursor: pointer;\r\n  height: 15px;\r\n  width: 15px;\r\n  margin: 0 2px;\r\n  background-color: var(--wje-color-contrast-4);\r\n  display: inline-block;\r\n  border-radius: 50%;\r\n}\r\n.pagination-item.active {\r\n  background-color: var(--wje-color);\r\n}\r\n\r\n/*THUMBNAILS*/\r\n\r\n.thumbnails {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  overflow-x: auto;\r\n  gap: .5rem;\r\n  padding: 0 .5rem;\r\n  margin-top: .5rem;\r\n  margin-bottom: .5rem;\r\n  box-sizing: border-box;\r\n  overflow-y: hidden;\r\n  wje-thumbnail {\r\n    --wje-thumbnail-width: 48px;\r\n    --wje-thumbnail-height: 48px;\r\n    --wje-thumbnail-border-radius: 0;\r\n    cursor: pointer;\r\n    border: 1px solid transparent;\r\n  }\r\n  .active {\r\n    border: 1px solid var(--wje-color-primary-11);\r\n  }\r\n}\r\n\r\n\r\n\r\n";
 class Carousel extends WJElement {
   constructor() {
     super();

package/dist/wje-checkbox.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-const styles = '/*\n[ Checkbox ]\n*/\n\n:host {\n  display: block;\n  margin-top: var(--wje-checkbox-margin-top);\n  margin-bottom: var(--wje-checkbox-margin-bottom);\n  margin-inline: var(--wje-checkbox-margin-inline);\n  line-height: 100%;\n  padding-left: 0;\n\n  label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    padding-left: calc(var(--wje-checkbox-size) + .5rem);\n    /*min-width: var(--wje-checkbox-size);*/\n    min-height: var(--wje-checkbox-size);\n    margin-bottom: 0;\n    &:before {\n      content: "";\n      position: absolute;\n      width: var(--wje-checkbox-size);\n      height: var(--wje-checkbox-size);\n      left: 0;\n      -webkit-box-sizing: inherit;\n      box-sizing: border-box;\n      background-color: var(--wje-color-contrast-0);\n      border-width: 1px;\n      border-style: solid;\n      border-color: var(--wje-color-contrast-3);\n    }\n  }\n}\n\n.native-checkbox {\n  label {\n    &:hover {\n      color: var(--wje-color-contrast-11);\n    }\n\n    &:before {\n      border-radius: var(--wje-checkbox-border-radius);\n    }\n  }\n\n  input[type="checkbox"] {\n    position: absolute;\n    margin: 0;\n    z-index: -1;\n    width: 16px;\n    height: 16px;\n    opacity: 0;\n    display: none;\n    & + label {\n      &::after {\n        content: "";\n        position: absolute;\n        left: 0;\n        border-right: 0 solid transparent;\n        border-bottom: 0 solid transparent;\n        width: var(--wje-checkbox-size);\n        height: var(--wje-checkbox-size);\n        overflow: hidden;\n      }\n    }\n  }\n\n  input[type="checkbox"]:checked + label::after {\n    content: "";\n    mask-image: var(--wje-checkbox-checkmark);\n    mask-size: var(--wje-checkbox-size);\n    background-color: var(--wje-color-primary-9);\n  }\n\n  /* Disabled */\n  input[type="checkbox"][disabled] {\n    & + label {\n      cursor: not-allowed !important;\n      color: var(--wje-color-contrast-8);\n      opacity: 0.58;\n\n      &:before {\n        background: var(--wje-color-contrast-2);\n      }\n      &:after {\n        background: transparent;\n      }\n    }\n  }\n\n  input[type="checkbox"]:checked[disabled] {\n    & + label {\n      cursor: not-allowed !important;\n      color: var(--wje-color-contrast-8);\n      opacity: 0.58;\n\n      &:before {\n        background: var(--wje-color-contrast-2);\n      }\n      &:after {\n        background: var(--wje-color-contrast-5);\n      }\n    }\n  }\n\n  /* Indeterminate */\n  input[type="checkbox"]:not(:checked):indeterminate {\n    & + label {\n      &:after {\n        content: "";\n        mask-image: var(--wje-checkbox-interminate);\n        mask-size: var(--wje-checkbox-size);\n        background-color: var(--wje-color-primary-9);\n      }\n    }\n  }\n}\n\n:host([variant=circle]) {\n  label {\n    &:after {\n      border-radius: 99px;\n    }\n\n    &:before {\n      border-radius: 99px;\n    }\n  }\n}\n\n:host([placement=end]) {\n  label {\n    padding-left: 0;\n    padding-right: 26px;\n\n    &:before {\n      right: 0;\n      left: auto;\n    }\n  }\n\n  input[type="checkbox"]:checked {\n    & + label {\n      position: relative;\n\n      &::after {\n        position: absolute;\n        right: 0;\n        left: auto;\n      }\n    }\n  }\n}\n\n/*Colors*/\n\n:host([color=primary]) {\n  input[type="checkbox"]:checked + label::after,\n  input[type="checkbox"]:indeterminate + label:after {\n    background-color: var(--wje-color-contrast-0);\n  }\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\n    border-color: var(--wje-color-primary-9);\n    background-color: var(--wje-color-primary-9);\n  }\n}\n\n:host([color=complete]) {\n  input[type="checkbox"]:checked + label::after,\n  input[type="checkbox"]:indeterminate + label:after  {\n    background-color: var(--wje-color-contrast-0);\n  }\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\n    border-color: var(--wje-color-complete-9);\n    background-color: var(--wje-color-complete-9);\n  }\n}\n\n:host([color=success]) {\n  input[type="checkbox"]:checked + label::after,\n  input[type="checkbox"]:indeterminate + label:after  {\n    background-color: var(--wje-color-contrast-0);\n  }\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\n    border-color: var(--wje-color-success-9);\n    background-color: var(--wje-color-success-9);\n  }\n}\n\n:host([color=warning]) {\n  input[type="checkbox"]:checked + label::after,\n  input[type="checkbox"]:indeterminate + label:after  {\n    background-color: var(--wje-color-contrast-0);\n  }\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\n    border-color: var(--wje-color-warning-9);\n    background-color: var(--wje-color-warning-9);\n  }\n}\n\n:host([color=danger]) {\n  input[type="checkbox"]:checked + label::after,\n  input[type="checkbox"]:indeterminate + label:after  {\n    background-color: var(--wje-color-contrast-0);\n  }\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\n    border-color: var(--wje-color-danger-9);\n    background-color: var(--wje-color-danger-9);\n  }\n}\n\n:host([color=info]) {\n  input[type="checkbox"]:checked + label::after,\n  input[type="checkbox"]:indeterminate + label:after  {\n    background-color: var(--wje-color-contrast-0);\n  }\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\n    border-color: var(--wje-color-info-9);\n    background-color: var(--wje-color-info-9);\n  }\n}\n\n/*input[type="checkbox"]:checked + label {*/\n/*  .info > *::after,*/\n/*  .danger > *::after,*/\n/*  .complete > *::after,*/\n/*  .primary > *::after,*/\n/*  .success > *::after {*/\n/*    background: var(--wje-white-check-icon);*/\n/*  }*/\n/*}*/\n\n/*input[type="checkbox"]:indeterminate + label {*/\n/*  .info > *::after,*/\n/*  .danger > *::after,*/\n/*  .complete > *::after,*/\n/*  .primary > *::after,*/\n/*  .success > *::after {*/\n/*    background-color: var(--wje-color-contrast-0);*/\n/*  }*/\n/*}*/\n\n/* hide focus style if not from keyboard navigation */\n/*.js-focus-visible .native-checkbox input[type="checkbox"]:focus:not(.focus-visible) + label:before {*/\n/*  box-shadow: none;*/\n/*}*/\n\n/*input[type="checkbox"] {*/\n/*  accent-color: var(--wje-color-primary) !important;*/\n/*  font-size: 50px;*/\n/*}*/';
+const styles = '/*\r\n[ Checkbox ]\r\n*/\r\n\r\n:host {\r\n  display: block;\r\n  margin-top: var(--wje-checkbox-margin-top);\r\n  margin-bottom: var(--wje-checkbox-margin-bottom);\r\n  margin-inline: var(--wje-checkbox-margin-inline);\r\n  line-height: 100%;\r\n  padding-left: 0;\r\n\r\n  label {\r\n    display: flex;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    padding-left: calc(var(--wje-checkbox-size) + .5rem);\r\n    /*min-width: var(--wje-checkbox-size);*/\r\n    min-height: var(--wje-checkbox-size);\r\n    margin-bottom: 0;\r\n    &:before {\r\n      content: "";\r\n      position: absolute;\r\n      width: var(--wje-checkbox-size);\r\n      height: var(--wje-checkbox-size);\r\n      left: 0;\r\n      -webkit-box-sizing: inherit;\r\n      box-sizing: border-box;\r\n      background-color: var(--wje-color-contrast-0);\r\n      border-width: 1px;\r\n      border-style: solid;\r\n      border-color: var(--wje-color-contrast-3);\r\n    }\r\n  }\r\n}\r\n\r\n.native-checkbox {\r\n  label {\r\n    &:hover {\r\n      color: var(--wje-color-contrast-11);\r\n    }\r\n\r\n    &:before {\r\n      border-radius: var(--wje-checkbox-border-radius);\r\n    }\r\n  }\r\n\r\n  input[type="checkbox"] {\r\n    position: absolute;\r\n    margin: 0;\r\n    z-index: -1;\r\n    width: 16px;\r\n    height: 16px;\r\n    opacity: 0;\r\n    display: none;\r\n    & + label {\r\n      &::after {\r\n        content: "";\r\n        position: absolute;\r\n        left: 0;\r\n        border-right: 0 solid transparent;\r\n        border-bottom: 0 solid transparent;\r\n        width: var(--wje-checkbox-size);\r\n        height: var(--wje-checkbox-size);\r\n        overflow: hidden;\r\n      }\r\n    }\r\n  }\r\n\r\n  input[type="checkbox"]:checked + label::after {\r\n    content: "";\r\n    mask-image: var(--wje-checkbox-checkmark);\r\n    mask-size: var(--wje-checkbox-size);\r\n    background-color: var(--wje-color-primary-9);\r\n  }\r\n\r\n  /* Disabled */\r\n  input[type="checkbox"][disabled] {\r\n    & + label {\r\n      cursor: not-allowed !important;\r\n      color: var(--wje-color-contrast-8);\r\n      opacity: 0.58;\r\n\r\n      &:before {\r\n        background: var(--wje-color-contrast-2);\r\n      }\r\n      &:after {\r\n        background: transparent;\r\n      }\r\n    }\r\n  }\r\n\r\n  input[type="checkbox"]:checked[disabled] {\r\n    & + label {\r\n      cursor: not-allowed !important;\r\n      color: var(--wje-color-contrast-8);\r\n      opacity: 0.58;\r\n\r\n      &:before {\r\n        background: var(--wje-color-contrast-2);\r\n      }\r\n      &:after {\r\n        background: var(--wje-color-contrast-5);\r\n      }\r\n    }\r\n  }\r\n\r\n  /* Indeterminate */\r\n  input[type="checkbox"]:not(:checked):indeterminate {\r\n    & + label {\r\n      &:after {\r\n        content: "";\r\n        mask-image: var(--wje-checkbox-interminate);\r\n        mask-size: var(--wje-checkbox-size);\r\n        background-color: var(--wje-color-primary-9);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([variant=circle]) {\r\n  label {\r\n    &:after {\r\n      border-radius: 99px;\r\n    }\r\n\r\n    &:before {\r\n      border-radius: 99px;\r\n    }\r\n  }\r\n}\r\n\r\n:host([placement=end]) {\r\n  label {\r\n    padding-left: 0;\r\n    padding-right: 26px;\r\n\r\n    &:before {\r\n      right: 0;\r\n      left: auto;\r\n    }\r\n  }\r\n\r\n  input[type="checkbox"]:checked {\r\n    & + label {\r\n      position: relative;\r\n\r\n      &::after {\r\n        position: absolute;\r\n        right: 0;\r\n        left: auto;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n/*Colors*/\r\n\r\n:host([color=primary]) {\r\n  input[type="checkbox"]:checked + label::after,\r\n  input[type="checkbox"]:indeterminate + label:after {\r\n    background-color: var(--wje-color-contrast-0);\r\n  }\r\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\r\n    border-color: var(--wje-color-primary-9);\r\n    background-color: var(--wje-color-primary-9);\r\n  }\r\n}\r\n\r\n:host([color=complete]) {\r\n  input[type="checkbox"]:checked + label::after,\r\n  input[type="checkbox"]:indeterminate + label:after  {\r\n    background-color: var(--wje-color-contrast-0);\r\n  }\r\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\r\n    border-color: var(--wje-color-complete-9);\r\n    background-color: var(--wje-color-complete-9);\r\n  }\r\n}\r\n\r\n:host([color=success]) {\r\n  input[type="checkbox"]:checked + label::after,\r\n  input[type="checkbox"]:indeterminate + label:after  {\r\n    background-color: var(--wje-color-contrast-0);\r\n  }\r\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\r\n    border-color: var(--wje-color-success-9);\r\n    background-color: var(--wje-color-success-9);\r\n  }\r\n}\r\n\r\n:host([color=warning]) {\r\n  input[type="checkbox"]:checked + label::after,\r\n  input[type="checkbox"]:indeterminate + label:after  {\r\n    background-color: var(--wje-color-contrast-0);\r\n  }\r\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\r\n    border-color: var(--wje-color-warning-9);\r\n    background-color: var(--wje-color-warning-9);\r\n  }\r\n}\r\n\r\n:host([color=danger]) {\r\n  input[type="checkbox"]:checked + label::after,\r\n  input[type="checkbox"]:indeterminate + label:after  {\r\n    background-color: var(--wje-color-contrast-0);\r\n  }\r\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\r\n    border-color: var(--wje-color-danger-9);\r\n    background-color: var(--wje-color-danger-9);\r\n  }\r\n}\r\n\r\n:host([color=info]) {\r\n  input[type="checkbox"]:checked + label::after,\r\n  input[type="checkbox"]:indeterminate + label:after  {\r\n    background-color: var(--wje-color-contrast-0);\r\n  }\r\n  :is(input[type="checkbox"]:checked + label)::before, :is(input[type="checkbox"]:indeterminate + label)::before {\r\n    border-color: var(--wje-color-info-9);\r\n    background-color: var(--wje-color-info-9);\r\n  }\r\n}\r\n\r\n/*input[type="checkbox"]:checked + label {*/\r\n/*  .info > *::after,*/\r\n/*  .danger > *::after,*/\r\n/*  .complete > *::after,*/\r\n/*  .primary > *::after,*/\r\n/*  .success > *::after {*/\r\n/*    background: var(--wje-white-check-icon);*/\r\n/*  }*/\r\n/*}*/\r\n\r\n/*input[type="checkbox"]:indeterminate + label {*/\r\n/*  .info > *::after,*/\r\n/*  .danger > *::after,*/\r\n/*  .complete > *::after,*/\r\n/*  .primary > *::after,*/\r\n/*  .success > *::after {*/\r\n/*    background-color: var(--wje-color-contrast-0);*/\r\n/*  }*/\r\n/*}*/\r\n\r\n/* hide focus style if not from keyboard navigation */\r\n/*.js-focus-visible .native-checkbox input[type="checkbox"]:focus:not(.focus-visible) + label:before {*/\r\n/*  box-shadow: none;*/\r\n/*}*/\r\n\r\n/*input[type="checkbox"] {*/\r\n/*  accent-color: var(--wje-color-primary) !important;*/\r\n/*  font-size: 50px;*/\r\n/*}*/';
 class Checkbox extends WJElement {
   /**
    * Checkbox constructor.

package/dist/wje-chip.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-const styles = "/*\n[ WJ Chip ]\n*/\n\n.native-chip {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  letter-spacing: -0.006em;\n  margin: 0;\n  padding: .5rem .75rem;\n  text-align: center;\n  cursor: pointer;\n  white-space: nowrap;\n  text-shadow: none;\n  box-shadow: none;\n  border: 0 none;\n  line-height: 14px;\n  min-height: 28px;\n  height: 28px;\n  width: 100%;\n  max-width: fit-content;\n  min-width: 28px;\n  position: relative;\n  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  border-radius: var(--wje-border-radius-pill);\n  overflow: hidden;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n\n:host(.focus) {\n  box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n  border: 1px solid var(--wje-color-primary-11);\n  background-color: var(--wje-color-contrast-3);\n  color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n  outline: none !important;\n}\n\n.check {\n  display: none;\n}\n\n:host([active]) {\n  .check {\n    display: block;\n    margin-inline: 4px 0;\n  }\n}\n\n:host([disabled]) {\n  opacity: .5;\n  border: 0;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n  width: 22px;\n  height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n  margin-inline: -8px 8px;\n  margin-top: -4px;\n  margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n  margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n  margin: -4px -4px -4px 8px;\n}\n\nwje-button {\n  --wje-button-border-radius: 50%;\n  --wje-button-margin-inline: .25rem -.5rem;\n  --wje-padding-top: .15rem;\n  --wje-padding-start: .15rem;\n  --wje-padding-end: .15rem;\n  --wje-padding-bottom: .15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n  background-color: var(--wje-color-primary-1);\n  color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n  background-color: var(--wje-color-complete-1);\n  color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n  background-color: var(--wje-color-success-1);\n  color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n  background-color: var(--wje-color-warning-2);\n  color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n  background-color: var(--wje-color-danger-1);\n  color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n  background-color: var(--wje-color-info-1);\n  color: var(--wje-color-info-9);\n}\n\n.native-chip.wje-color-default {\n  background-color: var(--wje-color-contrast-3);\n  color: var(--wje-color-contrast-11);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n  .native-chip.wje-color-primary:hover {\n    background-color: var(--wje-color-primary-4);\n    color: var(--wje-color-primary-10);\n  }\n\n  .native-chip.wje-color-complete:hover {\n    background-color: var(--wje-color-complete-4);\n    color: var(--wje-color-complete-10);\n  }\n\n  .native-chip.wje-color-success:hover {\n    background-color: var(--wje-color-success-4);\n    color: var(--wje-color-success-10);\n  }\n\n  .native-chip.wje-color-warning:hover {\n    background-color: var(--wje-color-warning-4);\n    color: var(--wje-color-warning-11);\n  }\n\n  .native-chip.wje-color-danger:hover {\n    background-color: var(--wje-color-danger-4);\n    color: var(--wje-color-danger-10);\n  }\n\n  .native-chip.wje-color-info:hover {\n    background-color: var(--wje-color-info-4);\n    color: var(--wje-color-info-10);\n  }\n\n  .native-chip.wje-color-default:hover {\n    background-color: var(--wje-color-contrast-4);\n    color: var(--wje-color-contrast-11);\n  }\n}";
+const styles = "/*\r\n[ WJ Chip ]\r\n*/\r\n\r\n.native-chip {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 14px;\r\n  letter-spacing: -0.006em;\r\n  margin: 0;\r\n  padding: .5rem .75rem;\r\n  text-align: center;\r\n  cursor: pointer;\r\n  white-space: nowrap;\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  border: 0 none;\r\n  line-height: 14px;\r\n  min-height: 28px;\r\n  height: 28px;\r\n  width: 100%;\r\n  max-width: fit-content;\r\n  min-width: 28px;\r\n  position: relative;\r\n  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\r\n  border-radius: var(--wje-border-radius-pill);\r\n  overflow: hidden;\r\n  vertical-align: middle;\r\n  box-sizing: border-box;\r\n}\r\n\r\n:host(.focus) {\r\n  box-shadow: none;\r\n}\r\n\r\n:host(.wje-active) .native-chip {\r\n  border: 1px solid var(--wje-color-primary-11);\r\n  background-color: var(--wje-color-contrast-3);\r\n  color: var(--wje-color);\r\n}\r\n\r\n:host(:focus, :active:focus, .wje-active:focus) {\r\n  outline: none !important;\r\n}\r\n\r\n.check {\r\n  display: none;\r\n}\r\n\r\n:host([active]) {\r\n  .check {\r\n    display: block;\r\n    margin-inline: 4px 0;\r\n  }\r\n}\r\n\r\n:host([disabled]) {\r\n  opacity: .5;\r\n  border: 0;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n::slotted(wje-avatar) {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n::slotted(wje-avatar:first-child) {\r\n  margin-inline: -8px 8px;\r\n  margin-top: -4px;\r\n  margin-bottom: -4px;\r\n}\r\n\r\n::slotted(wje-icon:first-child) {\r\n  margin: -4px 8px -4px -4px;\r\n}\r\n\r\n::slotted(wje-icon:last-child) {\r\n  margin: -4px -4px -4px 8px;\r\n}\r\n\r\nwje-button {\r\n  --wje-button-border-radius: 50%;\r\n  --wje-button-margin-inline: .25rem -.5rem;\r\n  --wje-padding-top: .15rem;\r\n  --wje-padding-start: .15rem;\r\n  --wje-padding-end: .15rem;\r\n  --wje-padding-bottom: .15rem;\r\n}\r\n\r\n/*BG - TEXT*/\r\n.native-chip.wje-color-primary {\r\n  background-color: var(--wje-color-primary-1);\r\n  color: var(--wje-color-primary-9);\r\n}\r\n\r\n.native-chip.wje-color-complete {\r\n  background-color: var(--wje-color-complete-1);\r\n  color: var(--wje-color-complete-9);\r\n}\r\n\r\n.native-chip.wje-color-success {\r\n  background-color: var(--wje-color-success-1);\r\n  color: var(--wje-color-success-9);\r\n}\r\n\r\n.native-chip.wje-color-warning {\r\n  background-color: var(--wje-color-warning-2);\r\n  color: var(--wje-color-warning-11);\r\n}\r\n\r\n.native-chip.wje-color-danger {\r\n  background-color: var(--wje-color-danger-1);\r\n  color: var(--wje-color-danger-9);\r\n}\r\n\r\n.native-chip.wje-color-info {\r\n  background-color: var(--wje-color-info-1);\r\n  color: var(--wje-color-info-9);\r\n}\r\n\r\n.native-chip.wje-color-default {\r\n  background-color: var(--wje-color-contrast-3);\r\n  color: var(--wje-color-contrast-11);\r\n}\r\n\r\n/*HOVER*/\r\n@media (any-hover: hover) {\r\n  .native-chip.wje-color-primary:hover {\r\n    background-color: var(--wje-color-primary-4);\r\n    color: var(--wje-color-primary-10);\r\n  }\r\n\r\n  .native-chip.wje-color-complete:hover {\r\n    background-color: var(--wje-color-complete-4);\r\n    color: var(--wje-color-complete-10);\r\n  }\r\n\r\n  .native-chip.wje-color-success:hover {\r\n    background-color: var(--wje-color-success-4);\r\n    color: var(--wje-color-success-10);\r\n  }\r\n\r\n  .native-chip.wje-color-warning:hover {\r\n    background-color: var(--wje-color-warning-4);\r\n    color: var(--wje-color-warning-11);\r\n  }\r\n\r\n  .native-chip.wje-color-danger:hover {\r\n    background-color: var(--wje-color-danger-4);\r\n    color: var(--wje-color-danger-10);\r\n  }\r\n\r\n  .native-chip.wje-color-info:hover {\r\n    background-color: var(--wje-color-info-4);\r\n    color: var(--wje-color-info-10);\r\n  }\r\n\r\n  .native-chip.wje-color-default:hover {\r\n    background-color: var(--wje-color-contrast-4);\r\n    color: var(--wje-color-contrast-11);\r\n  }\r\n}";
 class Chip extends WJElement {
   constructor() {
     super();

package/dist/wje-color-picker.js

@@ -984,7 +984,7 @@ function validateWCAG2Parms(parms) {
     size
   };
 }
-const styles = '/*\n[ Wj Color Picker ]\n*/\n\n:host {\n  --wje-color-picker-value: #ff0000;\n  --wje-color-picker-size: 1rem;\n  --wje-color-picker-radius: 4px;\n}\n\n.anchor {\n  width: var(--wje-color-picker-size);\n  height: var(--wje-color-picker-size);\n  background: var(--wje-color-picker-value);\n}\n\n.picker {\n  width: 200px;\n  min-height: 90px;\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\n  border-radius: var(--wje-border-radius-small);\n  border-width: 1px;\n  border-style: var(--wje-border-style);\n  border-color: var(--wje-border-color);\n  background: var(--wje-background);\n}\n\n.color-area {\n  display: block;\n  position: relative;\n  height: 100px;\n  color: var(--wje-color-picker-area);\n  background-image: linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg, #fff, currentColor);\n  cursor: crosshair;\n  border-radius: var(--wje-color-picker-radius) var(--wje-color-picker-radius) 0 0;\n  border-bottom: 1px solid var(--wje-border-color);\n}\n\n.wrapper {\n  display: inline-table;\n  width: calc(100% - 2rem);\n  margin: 1rem;\n}\n\n.hue {\n  border-radius: .25rem;\n  background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);\n  width: 100%;\n  height: 8px;\n  margin: .75rem 0 1rem;\n}\n\n.hue::part(slider) {\n  --wje-slider-color: transparent;\n  --wje-slider-thumb-color: white;\n  --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n  --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n  --wje-slider-track-color: transparent;\n}\n\n.alpha-wrapper {\n  border-radius: .25rem;\n  width: 100%;\n  height: 8px;\n  margin: .75rem 0 1rem;\n  background-image: repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);\n  background-position: 0 0,4px 4px;\n  background-size: 8px 8px;\n}\n\n.alpha {\n  color: var(--wje-color-picker-value);\n  display: block;\n  height: 100%;\n  width: 100%;\n  border-radius: inherit;\n  background-image: linear-gradient(90deg,rgba(0,0,0,0),currentColor);\n}\n\n.alpha::part(slider) {\n  --wje-slider-color: transparent;\n  --wje-slider-thumb-color: white;\n  --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n  --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n  --wje-slider-track-color: transparent;\n  --wje-slider-track-height: 8px;\n}\n\n.input-wrapper {\n  display: grid;\n  align-items: center;\n  grid-template-columns: 1fr auto;\n}\n\n.color-preview {\n  width: 30px !important;\n  height: 30px !important;\n  border-radius: 50%;\n  position: relative;\n  margin-right: 1rem;\n  &:before, &:after {\n    content: "";\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    left: 0;\n    top: 0;\n    border: 1px solid #fff;\n    border-radius: 50%;\n  }\n  &:before {\n    background-image: repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);\n    background-position: 0 0,4px 4px;\n    background-size: 8px 8px;\n  }\n  &:after {\n    background: var(--wje-color-picker-value);\n  }\n}\n\nwje-input {\n  --wje-input-border-radius: 1rem;\n  --wje-input-margin-bottom: 0;\n}\n\nwje-input::part(input) {\n  text-align: center;\n}\n\n.swatches {\n  margin-top: 1rem;\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n\n.swatch {\n  background: var(--wje-color-picker-swatch);\n  position: relative;\n  width: 20px;\n  height: 20px;\n  margin: 0 4px 6px 4px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  color: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: pointer;\n}\n\n.marker {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  margin: -6px 0 0 -6px;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  background-color: var(--wje-color-picker-value);\n  cursor: pointer;\n}';
+const styles = '/*\r\n[ Wj Color Picker ]\r\n*/\r\n\r\n:host {\r\n  --wje-color-picker-value: #ff0000;\r\n  --wje-color-picker-size: 1rem;\r\n  --wje-color-picker-radius: 4px;\r\n}\r\n\r\n.anchor {\r\n  width: var(--wje-color-picker-size);\r\n  height: var(--wje-color-picker-size);\r\n  background: var(--wje-color-picker-value);\r\n}\r\n\r\n.picker {\r\n  width: 200px;\r\n  min-height: 90px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  border-radius: var(--wje-border-radius-small);\r\n  border-width: 1px;\r\n  border-style: var(--wje-border-style);\r\n  border-color: var(--wje-border-color);\r\n  background: var(--wje-background);\r\n}\r\n\r\n.color-area {\r\n  display: block;\r\n  position: relative;\r\n  height: 100px;\r\n  color: var(--wje-color-picker-area);\r\n  background-image: linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg, #fff, currentColor);\r\n  cursor: crosshair;\r\n  border-radius: var(--wje-color-picker-radius) var(--wje-color-picker-radius) 0 0;\r\n  border-bottom: 1px solid var(--wje-border-color);\r\n}\r\n\r\n.wrapper {\r\n  display: inline-table;\r\n  width: calc(100% - 2rem);\r\n  margin: 1rem;\r\n}\r\n\r\n.hue {\r\n  border-radius: .25rem;\r\n  background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);\r\n  width: 100%;\r\n  height: 8px;\r\n  margin: .75rem 0 1rem;\r\n}\r\n\r\n.hue::part(slider) {\r\n  --wje-slider-color: transparent;\r\n  --wje-slider-thumb-color: white;\r\n  --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\r\n  --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\r\n  --wje-slider-track-color: transparent;\r\n}\r\n\r\n.alpha-wrapper {\r\n  border-radius: .25rem;\r\n  width: 100%;\r\n  height: 8px;\r\n  margin: .75rem 0 1rem;\r\n  background-image: repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);\r\n  background-position: 0 0,4px 4px;\r\n  background-size: 8px 8px;\r\n}\r\n\r\n.alpha {\r\n  color: var(--wje-color-picker-value);\r\n  display: block;\r\n  height: 100%;\r\n  width: 100%;\r\n  border-radius: inherit;\r\n  background-image: linear-gradient(90deg,rgba(0,0,0,0),currentColor);\r\n}\r\n\r\n.alpha::part(slider) {\r\n  --wje-slider-color: transparent;\r\n  --wje-slider-thumb-color: white;\r\n  --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\r\n  --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\r\n  --wje-slider-track-color: transparent;\r\n  --wje-slider-track-height: 8px;\r\n}\r\n\r\n.input-wrapper {\r\n  display: grid;\r\n  align-items: center;\r\n  grid-template-columns: 1fr auto;\r\n}\r\n\r\n.color-preview {\r\n  width: 30px !important;\r\n  height: 30px !important;\r\n  border-radius: 50%;\r\n  position: relative;\r\n  margin-right: 1rem;\r\n  &:before, &:after {\r\n    content: "";\r\n    position: absolute;\r\n    height: 100%;\r\n    width: 100%;\r\n    left: 0;\r\n    top: 0;\r\n    border: 1px solid #fff;\r\n    border-radius: 50%;\r\n  }\r\n  &:before {\r\n    background-image: repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);\r\n    background-position: 0 0,4px 4px;\r\n    background-size: 8px 8px;\r\n  }\r\n  &:after {\r\n    background: var(--wje-color-picker-value);\r\n  }\r\n}\r\n\r\nwje-input {\r\n  --wje-input-border-radius: 1rem;\r\n  --wje-input-margin-bottom: 0;\r\n}\r\n\r\nwje-input::part(input) {\r\n  text-align: center;\r\n}\r\n\r\n.swatches {\r\n  margin-top: 1rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.swatch {\r\n  background: var(--wje-color-picker-swatch);\r\n  position: relative;\r\n  width: 20px;\r\n  height: 20px;\r\n  margin: 0 4px 6px 4px;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  color: inherit;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n\r\n.marker {\r\n  position: absolute;\r\n  width: 12px;\r\n  height: 12px;\r\n  margin: -6px 0 0 -6px;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: var(--wje-color-picker-value);\r\n  cursor: pointer;\r\n}';
 class ColorPicker extends WJElement {
   /**
    * ColorPicker constructor.

package/dist/wje-container.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Container ]\n*/\n\n:host {\n    --wje-container-indent: 0;\n    display: flex;\n    flex-direction: row;\n    flex: 1;\n    flex-basis: auto;\n    box-sizing: border-box;\n    min-width: 0;\n}\n\n:host([vertical]) {\n    flex-direction: column;\n}\n\n@media (min-width: 768px) {\n    :host([indent]) {\n        margin-left: var(--wje-container-indent);\n    }\n}";
+const styles = "/*\r\n[ WJ Container ]\r\n*/\r\n\r\n:host {\r\n    --wje-container-indent: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex: 1;\r\n    flex-basis: auto;\r\n    box-sizing: border-box;\r\n    min-width: 0;\r\n}\r\n\r\n:host([vertical]) {\r\n    flex-direction: column;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n    :host([indent]) {\r\n        margin-left: var(--wje-container-indent);\r\n    }\r\n}";
 class Container extends WJElement {
   /**
    * Container constructor.

package/dist/wje-copy-button.js

@@ -44,7 +44,7 @@ function copyText(text) {
   body.removeChild(node);
   return Promise.resolve();
 }
-const styles = "/*\n[ Wj Copy Button ]\n*/\n\n:host {\n  cursor: pointer;\n  padding: .5rem;\n}";
+const styles = "/*\r\n[ Wj Copy Button ]\r\n*/\r\n\r\n:host {\r\n  cursor: pointer;\r\n  padding: .5rem;\r\n}";
 class CopyButton extends WJElement {
   /**
    * Constructor for the CopyButton class.