wj-elements 0.1.129 → 0.1.130

package/dist/wje-accordion-item.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 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 = "/*\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: 0.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: 0.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 0.75rem 0.75rem 0.75rem;\n}\n\n:host(.expanded) #content {\n    /*display: block;*/\n    /*padding: 0 .75rem .75rem .75rem;*/\n    max-height: 100vh;\n}\n";
 class AccordionItem extends WJElement {
   /**
    * Constructor for the AccordionItem class.
@@ -14,10 +14,16 @@ class AccordionItem extends WJElement {
      * @type {string}
      */
     __publicField(this, "className", "AccordionItem");
+    /**
+     * Method to handle the attribute changes.
+     */
     __publicField(this, "collapse", () => {
       this.classList.remove("expanded");
       this.classList.add("collapsed");
     });
+    /**
+     * Method to handle the attribute changes.
+     */
     __publicField(this, "expand", () => {
       this.classList.remove("collapsed");
       this.classList.add("expanded");
@@ -25,14 +31,14 @@ class AccordionItem extends WJElement {
   }
   /**
    * Getter for the CSS stylesheet.
-   * @return {Object} The styles for the Accordion Item element.
+   * @returns {object} The styles for the Accordion Item element.
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
    * Getter for the observed attributes.
-   * @return {Array} An array containing the name of the observed attribute.
+   * @returns {Array} An array containing the name of the observed attribute.
    */
   static get observedAttributes() {
     return [];
@@ -44,11 +50,8 @@ class AccordionItem extends WJElement {
     this.isShadowRoot = "open";
   }
   /**
-   * Method to draw the Accordion Item element.
-   * @param {Object} context - The context in which the element is drawn.
-   * @param {Object} store - The store containing the state of the element.
-   * @param {Object} params - The parameters for drawing the element.
-   * @return {Object} The document fragment containing the drawn element.
+   * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.
+   * @returns {object} The document fragment containing the drawn element.
    */
   draw() {
     let fragment = document.createDocumentFragment();
@@ -89,8 +92,7 @@ class AccordionItem extends WJElement {
    * Method to execute after the Accordion Item element is drawn.
    */
   afterDraw() {
-    if (!this.classList.contains("expanded"))
-      this.classList.add("collapsed");
+    if (!this.classList.contains("expanded")) this.classList.add("collapsed");
     this.headline.addEventListener("click", () => {
       if (this.classList.contains("collapsed")) {
         event.dispatchCustomEvent(this, "wje-accordion-item:open");

package/dist/wje-accordion.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Accordion ]\n*/\n\n:host {\n  display: block;\n  width: 100%;\n}";
+const styles = "/*\n[ WJ Accordion ]\n*/\n\n:host {\n    display: block;\n    width: 100%;\n}\n";
 class Accordion extends WJElement {
   /**
    * Constructor for the Accordion class.
@@ -15,22 +15,50 @@ class Accordion extends WJElement {
      */
     __publicField(this, "className", "Accordion");
   }
+  /**
+   * Sets the `multiple` attribute on the element.
+   * If `true`, the `multiple` attribute is added.
+   * If `false`, the `multiple` attribute is removed.
+   * @param {boolean} value A boolean value indicating whether the element should support multiple selections.
+   */
   set multiple(value) {
-    this.setAttribute("multiple", "");
+    if (value) {
+      this.setAttribute("multiple", "");
+    } else {
+      this.removeAttribute("multiple");
+    }
   }
+  /**
+   * Determines whether the element has the `multiple` attribute.
+   * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.
+   */
   get multiple() {
     return this.hasAttribute("multiple");
   }
+  /**
+   * Sets the value of the `index` attribute.
+   * @param {number|string} value The value to set for the `index` attribute.
+   */
+  set index(value) {
+    this.setAttribute("index", value);
+  }
+  /**
+   * Retrieves the value of the `index` attribute as a number.
+   * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.
+   */
+  get index() {
+    return +this.getAttribute("index") || 0;
+  }
   /**
    * Getter for the CSS stylesheet.
-   * @return {Object} The styles for the Accordion element.
+   * @returns {object} The styles for the Accordion element.
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
    * Getter for the observed attributes.
-   * @return {Array} An array containing the name of the observed attribute.
+   * @returns {Array} An array containing the name of the observed attribute.
    */
   static get observedAttributes() {
     return [];
@@ -41,39 +69,48 @@ class Accordion extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  /**
+   * Method to run before the element is drawn.
+   */
   beforeDraw() {
     this.getAccordions().forEach((accordion, index) => {
-      if (this.hasAttribute("index") && +this.getAttribute("index") === index) {
+      if (this.index && +this.index === index) {
         accordion.classList.add("expanded");
       }
     });
   }
   /**
    * Method to draw the Accordion element.
-   * @param {Object} context - The context in which the element is drawn.
-   * @param {Object} store - The store containing the state of the element.
-   * @param {Object} params - The parameters for drawing the element.
-   * @return {Object} The document fragment containing the drawn element.
+   * @returns {object} The document fragment containing the drawn element.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let slot = document.createElement("slot");
     fragment.appendChild(slot);
     this.slotEl = slot;
     return fragment;
   }
+  /**
+   * Method to run after the element is drawn.
+   */
   afterDraw() {
     this.addEventListener("wje-accordion-item:open", (e) => {
-      if (!this.multiple)
-        this.collapseAll(e.detail.context);
+      if (!this.multiple) this.collapseAll(e.detail.context);
     });
   }
+  /**
+   * Method to run after the element is drawn.
+   * @param exception
+   */
   collapseAll(exception) {
     this.getAccordions().forEach((accordion) => {
-      if (accordion !== exception)
-        accordion.collapse();
+      if (accordion !== exception) accordion.collapse();
     });
   }
+  /**
+   * Method to get the accordions.
+   * @returns {Array} An array containing the accordions.
+   */
   getAccordions() {
     return Array.from(this.querySelectorAll(":scope > wje-accordion-item"));
   }

package/dist/wje-animation.js

@@ -1,9 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-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}\n\n.wje-toast-stack {\n  position: fixed;\n  top: 0;\n  margin: 0 .5rem;\n  width: 300px;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: auto;\n  z-index: 9999;\n}';
+import WJElement from "./wje-element.js";
 const animations = `@charset "UTF-8";/*!
  * animate.css - https://animate.style/
  * Version - 4.1.1
@@ -4077,6 +4076,7 @@ const animations = `@charset "UTF-8";/*!
   animation-name: slideOutUp;
 }
 `;
+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: 0.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: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n    text-shadow: none !important;\n    color: var(--wje-color-primary-11);\n    transition:\n        color 0.1s linear 0s,\n        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 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: 0.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:\n        'kern' 1,\n        'sups' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n}\n\n.ff-sub {\n    font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        '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: 0.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:\n        'calt' 1,\n        'tnum' 1,\n        'frac' 1,\n        'case' 1,\n        '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:\n        0 2px 0 1px #c7c7c7,\n        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(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\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.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(\n        to top,\n        transparent 0%,\n        transparent calc(50% - 1px),\n        var(--wje-border-color) calc(50% - 1px),\n        var(--wje-border-color) calc(50% + 1px),\n        transparent calc(50% + 1px),\n        transparent 100%\n    );\n}\n.text-separator::before {\n    background: #fff;\n    content: attr(data-text);\n    padding: 0 1rem;\n    text-transform: uppercase;\n}\n\n.wje-toast-stack {\n    position: fixed;\n    top: 0;\n    margin: 0 0.5rem;\n    width: 300px;\n    max-width: 100%;\n    max-height: 100%;\n    overflow: auto;\n    z-index: 9999;\n}\n";
 class Animation extends WJElement {
   /**
    * Constructor for the Animation class.
@@ -4218,28 +4218,28 @@ class Animation extends WJElement {
   }
   /**
    * Setter for the animations property.
-   * @param {Array} value - The new value for the animations property.
+   * @param {Array} value The new value for the animations property.
    */
   set animations(value) {
     this._animations = value;
   }
   /**
    * Getter for the animations' property.
-   * @return {Array} The current value of the animations' property.
+   * @returns {Array} The current value of the animations' property.
    */
   get animations() {
     return this._animations;
   }
   /**
    * Getter for the CSS stylesheet.
-   * @return {Object} The styles for the Animation element.
+   * @returns {object} The styles for the Animation element.
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
    * Getter for the observed attributes.
-   * @return {Array} An array containing the name of the observed attribute.
+   * @returns {Array} An array containing the name of the observed attribute.
    */
   static get observedAttributes() {
     return ["name"];
@@ -4252,10 +4252,7 @@ class Animation extends WJElement {
   }
   /**
    * Method to draw the Animation element.
-   * @param {Object} context - The context in which the element is drawn.
-   * @param {Object} store - The store containing the state of the element.
-   * @param {Object} params - The parameters for drawing the element.
-   * @return {Object} The document fragment containing the drawn element.
+   * @returns {object} The document fragment containing the drawn element.
    */
   draw() {
     let fragment = document.createDocumentFragment();
@@ -4284,12 +4281,11 @@ class Animation extends WJElement {
       direction: this.direction,
       easing: this.easing
     });
-    if (this.animation)
-      this.animation.play();
+    if (this.animation) this.animation.play();
   }
   /**
    * Method to fetch and parse the animations array from a CSS file.
-   * @return {Array} The animations array.
+   * @returns {Array} An array of animation definitions parsed from the CSS file.
    */
   async getAnimationsArray() {
     return await fetchAndParseCSS(animations);

package/dist/wje-aside.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 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 = "/*\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";
 class Aside extends WJElement {
   /**
    * Constructor for the Aside class.
@@ -17,14 +17,14 @@ class Aside extends WJElement {
   }
   /**
    * Getter for the CSS stylesheet.
-   * @return {Object} The styles for the Aside element.
+   * @returns {object} The styles for the Aside element.
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
    * Getter for the observed attributes.
-   * @return {Array} An empty array as there are no observed attributes.
+   * @returns {Array} An empty array as there are no observed attributes.
    */
   static get observedAttributes() {
     return [];
@@ -37,17 +37,12 @@ class Aside extends WJElement {
   }
   /**
    * Method to draw the Aside element.
-   * @param {Object} context - The context in which the element is drawn.
-   * @param {Object} store - The store containing the state of the element.
-   * @param {Object} params - The parameters for drawing the element.
-   * @return {Object} The document fragment containing the drawn element.
+   * @returns {object} The document fragment containing the drawn element.
    */
   draw() {
     let fragment = document.createDocumentFragment();
-    if (this.width)
-      this.style.setProperty("--wje-aside-width", this.width);
-    if (this.top && this.hasAttribute("fixed"))
-      this.style.setProperty("--wje-aside-top", this.top);
+    if (this.width) this.style.setProperty("--wje-aside-width", this.width);
+    if (this.top && this.hasAttribute("fixed")) this.style.setProperty("--wje-aside-top", this.top);
     let element = document.createElement("slot");
     fragment.appendChild(element);
     return fragment;

package/dist/wje-avatar.js

@@ -19,36 +19,33 @@ 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 = "/*\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}\n";
 class Avatar extends WJElement {
   /**
-   * Avatar class constructor
+   * Avatar class constructor.
    */
   constructor() {
     super();
     /**
-     * Class name
+     * Class name for the Avatar element.
      */
     __publicField(this, "className", "Avatar");
   }
   /**
-   * Getter for cssStyleSheet
+   * Getter for cssStyleSheet.
    * @returns {string} styles
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
-   * Method to setup attributes
+   * Method to setup attributes.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   /**
-   * Method to draw the avatar
-   * @param {object} context - The context
-   * @param {object} store - The store
-   * @param {object} params - The parameters
+   * Method to draw the avatar element and return a document fragment.
    * @returns {object} fragment - The document fragment
    */
   draw() {
@@ -79,7 +76,7 @@ class Avatar extends WJElement {
     return fragment;
   }
   /**
-   * Method to check if the avatar is an image
+   * Method to check if the avatar is an image.
    * @returns {boolean} - True if the avatar is an image, false otherwise
    */
   isImage() {

package/dist/wje-badge.js

@@ -2,57 +2,62 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 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 = "/*\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}\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}\n";
 class Badge extends WJElement {
   /**
-   * Badge constructor
-   * @constructor
+   * Creates an instance of Badge.
+   * Represents a custom Badge element.
+   * @class
    */
   constructor() {
     super();
     /**
-     * Class name
-     * @type {string}
+     * The class name for the Badge element.
+     * @type {string} The class name for the Badge element.
      */
     __publicField(this, "className", "Badge");
   }
   /**
-   * Get CSS stylesheet
+   * Retrieves the CSS stylesheet for the Badge element.
    * @static
-   * @returns {Object} styles - The CSS styles
+   * @returns {CSSStyleSheet} The CSS styles associated with the Badge.
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
-   * Getter for the observed attributes.
-   * @return {Array} An array containing the name of the observed attribute.
+   * Specifies the attributes to observe for changes.
+   * @static
+   * @returns {Array<string>} An array containing the names of attributes to observe.
+   * @example
+   * static get observedAttributes() {
+   *   return ['color'];
+   * }
    */
   static get observedAttributes() {
     return ["color"];
   }
   /**
-   * Setup attributes
+   * Configures initial attributes for the Badge element.
+   * @returns {void} Nothing is returned.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} fragment - The document fragment
+   * Creates the DOM structure for the Badge element.
+   * @returns {DocumentFragment} A document fragment containing the Badge's structure.
    */
   draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.classList.add("native-badge");
-    if (this.hasAttribute("color"))
-      native.classList.add("wje-color-" + this.color, "wje-color");
-    else
+    if (this.hasAttribute("color")) {
+      native.classList.add(`wje-color-${this.color}`, "wje-color");
+    } else {
       native.classList.add("wje-color-default", "wje-color");
+    }
     let slot = document.createElement("slot");
     native.appendChild(slot);
     fragment.appendChild(native);