wj-elements 0.1.0 → 0.1.1

package/dist/wje-button.js

@@ -2,9 +2,8 @@ var b = Object.defineProperty;
 var j = (t, r, o) => r in t ? b(t, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[r] = o;
 var s = (t, r, o) => (j(t, typeof r != "symbol" ? r + "" : r, o), o);
 import h, { WjElementUtils as g, event as i } from "./wje-element.js";
-import "./wje-icon.js";
-import { I as p } from "./icon.element-DOiXP3pi.js";
-const u = (t) => t === "false" || t === "null" || t === "NaN" || t === "undefined" || t === "0" ? !1 : !!t, v = ':host(.wje-button-solid.wje-color-primary){--wje-button-background-color: var(--wje-color-primary-10);--wje-button-border-color: var(--wje-color-primary-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-primary){--wje-button-border-color: var(--wje-color-primary-6);--wje-button-color: var(--wje-color-primary-6)}:host(.wje-button-solid.wje-color-complete){--wje-button-background-color: var(--wje-color-complete-10);--wje-button-border-color: var(--wje-color-complete-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-complete){--wje-button-border-color: var(--wje-color-complete-6);--wje-button-color: var(--wje-color-complete-6)}:host(.wje-button-solid.wje-color-success){--wje-button-background-color: var(--wje-color-success-10);--wje-button-border-color: var(--wje-color-success-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-success){--wje-button-border-color: var(--wje-color-success-6);--wje-button-color: var(--wje-color-success-6)}:host(.wje-button-solid.wje-color-warning){--wje-button-background-color: var(--wje-color-warning-10);--wje-button-border-color: var(--wje-color-warning-11);--wje-button-color: var(--wje-color-black)}:host(.wje-button-outline.wje-color-warning){--wje-button-border-color: var(--wje-color-warning-6);--wje-button-color: var(--wje-color-warning-6)}:host(.wje-button-solid.wje-color-danger){--wje-button-background-color: var(--wje-color-danger-10);--wje-button-border-color: var(--wje-color-danger-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-danger){--wje-button-border-color: var(--wje-color-danger-6);--wje-button-color: var(--wje-color-danger-6)}:host(.wje-button-solid.wje-color-neutral){--wje-button-background-color: var(--wje-color-contrast-10);--wje-button-border-color: var(--wje-color-contrast-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-neutral){--wje-button-border-color: var(--wje-color-contrast-6);--wje-button-color: var(--wje-color-contrast-6)}:host(.wje-button-solid.wje-color-default){--wje-button-background-color: transparent;--wje-button-border-color: var(--wje-color-contrast-4);--wje-button-color: var(--wje-color-contrast-11)}:host(.wje-button-outline.wje-color-default){--wje-button-border-color: var(--wje-color-contrast-4);--wje-button-color: var(--wje-color-contrast-11)}:host{--wje-button-border-radius: var(--wje-border-radius-medium);--wje-button-border-width: 1px;--wje-button-border-style: solid;--wje-button-border-color: var(--wje-color-contrast-1);--wje-button-margin-inline: 0;--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.button-native{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;overflow:hidden;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);outline:none;background-color:var(--wje-button-background-color);color:var(--wje-button-color);line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end)}@media (any-hover: hover){:host(.wje-button-solid.wje-color-primary:hover){--wje-button-background-color: var(--wje-color-primary-9);--wje-button-border-color: var(--wje-color-primary-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-primary:hover){--wje-button-background-color: var(--wje-color-primary-1);--wje-button-border-color: var(--wje-color-primary-11);--wje-button-color: var(--wje-color-primary-11)}:host(.wje-button-solid.wje-color-complete:hover){--wje-button-background-color: var(--wje-color-complete-9);--wje-button-border-color: var(--wje-color-complete-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-complete:hover){--wje-button-background-color: var(--wje-color-complete-1);--wje-button-border-color: var(--wje-color-complete-11);--wje-button-color: var(--wje-color-complete-11)}:host(.wje-button-solid.wje-color-success:hover){--wje-button-background-color: var(--wje-color-success-9);--wje-button-border-color: var(--wje-color-success-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-success:hover){--wje-button-background-color: var(--wje-color-success-1);--wje-button-border-color: var(--wje-color-success-11);--wje-button-color: var(--wje-color-success-11)}:host(.wje-button-solid.wje-color-warning:hover){--wje-button-background-color: var(--wje-color-warning-9);--wje-button-border-color: var(--wje-color-warning-10);--wje-button-color: var(--wje-color-black)}:host(.wje-button-outline.wje-color-warning:hover){--wje-button-background-color: var(--wje-color-warning-1);--wje-button-border-color: var(--wje-color-warning-11);--wje-button-color: var(--wje-color-warning-11)}:host(.wje-button-solid.wje-color-danger:hover){--wje-button-background-color: var(--wje-color-danger-9);--wje-button-border-color: var(--wje-color-danger-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-danger:hover){--wje-button-background-color: var(--wje-color-danger-1);--wje-button-border-color: var(--wje-color-danger-11);--wje-button-color: var(--wje-color-danger-11)}:host(.wje-button-solid.wje-color-neutral:hover){--wje-button-background-color: var(--wje-color-contrast-9);--wje-button-border-color: var(--wje-color-contrast-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-neutral:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-11);--wje-button-color: var(--wje-color-contrast-11)}:host(.wje-button-solid.wje-color-default:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-2);--wje-button-color: var(--wje-color-contrast-9)}:host(.wje-button-outline.wje-color-default:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-2);--wje-button-color: var(--wje-color-contrast-9)}:host(.wje-button-link:hover){--wje-button-background-color: var(--wje-color-contrast-1) !important;--wje-button-border-color: transparent !important;color:var(--wje-color-contrast-9)!important}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.button-solid.wje-color){background-color:var(--wje-button-background-color);color:var(--wje-button-color)}:host(.wje-button-link){--wje-button-border-width: 1px;--wje-button-border-color: transparent;--wje-button-background-color: transparent !important}:host(.wje-button-disabled){cursor:default;opacity:.5;pointer-events:none}:host(.wje-button-round){--wje-button-border-radius: var(--wje-border-radius-pill)}:host(.wje-button-circle){--wje-button-border-radius: var(--wje-border-radius-circle);aspect-ratio:1/1}:host(.wje-button-large){--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host(.wje-button-small){--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 -.3rem}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wje-button-group-first:not(.wje-button-group-last)) .button-native{border-start-end-radius:0;border-end-end-radius:0}:host(.wje-button-group-inner) .button-native{border-radius:0}:host(.wje-button-group-last:not(.wje-button-group-first)) .button-native{border-start-start-radius:0;border-end-start-radius:0}:host(.wje-button-group-button:not(.wje-button-group-first)){margin-inline-start:calc(-1 * var(--wje-button-border-width))!important}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
+import v from "./wje-icon.js";
+const w = (t) => t === "false" || t === "null" || t === "NaN" || t === "undefined" || t === "0" ? !1 : !!t, p = ':host(.wje-button-solid.wje-color-primary){--wje-button-background-color: var(--wje-color-primary-10);--wje-button-border-color: var(--wje-color-primary-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-primary){--wje-button-border-color: var(--wje-color-primary-6);--wje-button-color: var(--wje-color-primary-6)}:host(.wje-button-solid.wje-color-complete){--wje-button-background-color: var(--wje-color-complete-10);--wje-button-border-color: var(--wje-color-complete-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-complete){--wje-button-border-color: var(--wje-color-complete-6);--wje-button-color: var(--wje-color-complete-6)}:host(.wje-button-solid.wje-color-success){--wje-button-background-color: var(--wje-color-success-10);--wje-button-border-color: var(--wje-color-success-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-success){--wje-button-border-color: var(--wje-color-success-6);--wje-button-color: var(--wje-color-success-6)}:host(.wje-button-solid.wje-color-warning){--wje-button-background-color: var(--wje-color-warning-10);--wje-button-border-color: var(--wje-color-warning-11);--wje-button-color: var(--wje-color-black)}:host(.wje-button-outline.wje-color-warning){--wje-button-border-color: var(--wje-color-warning-6);--wje-button-color: var(--wje-color-warning-6)}:host(.wje-button-solid.wje-color-danger){--wje-button-background-color: var(--wje-color-danger-10);--wje-button-border-color: var(--wje-color-danger-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-danger){--wje-button-border-color: var(--wje-color-danger-6);--wje-button-color: var(--wje-color-danger-6)}:host(.wje-button-solid.wje-color-neutral){--wje-button-background-color: var(--wje-color-contrast-10);--wje-button-border-color: var(--wje-color-contrast-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-neutral){--wje-button-border-color: var(--wje-color-contrast-6);--wje-button-color: var(--wje-color-contrast-6)}:host(.wje-button-solid.wje-color-default){--wje-button-background-color: transparent;--wje-button-border-color: var(--wje-color-contrast-4);--wje-button-color: var(--wje-color-contrast-11)}:host(.wje-button-outline.wje-color-default){--wje-button-border-color: var(--wje-color-contrast-4);--wje-button-color: var(--wje-color-contrast-11)}:host{--wje-button-border-radius: var(--wje-border-radius-medium);--wje-button-border-width: 1px;--wje-button-border-style: solid;--wje-button-border-color: var(--wje-color-contrast-1);--wje-button-margin-inline: 0;--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.button-native{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;overflow:hidden;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);outline:none;background-color:var(--wje-button-background-color);color:var(--wje-button-color);line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end)}@media (any-hover: hover){:host(.wje-button-solid.wje-color-primary:hover){--wje-button-background-color: var(--wje-color-primary-9);--wje-button-border-color: var(--wje-color-primary-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-primary:hover){--wje-button-background-color: var(--wje-color-primary-1);--wje-button-border-color: var(--wje-color-primary-11);--wje-button-color: var(--wje-color-primary-11)}:host(.wje-button-solid.wje-color-complete:hover){--wje-button-background-color: var(--wje-color-complete-9);--wje-button-border-color: var(--wje-color-complete-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-complete:hover){--wje-button-background-color: var(--wje-color-complete-1);--wje-button-border-color: var(--wje-color-complete-11);--wje-button-color: var(--wje-color-complete-11)}:host(.wje-button-solid.wje-color-success:hover){--wje-button-background-color: var(--wje-color-success-9);--wje-button-border-color: var(--wje-color-success-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-success:hover){--wje-button-background-color: var(--wje-color-success-1);--wje-button-border-color: var(--wje-color-success-11);--wje-button-color: var(--wje-color-success-11)}:host(.wje-button-solid.wje-color-warning:hover){--wje-button-background-color: var(--wje-color-warning-9);--wje-button-border-color: var(--wje-color-warning-10);--wje-button-color: var(--wje-color-black)}:host(.wje-button-outline.wje-color-warning:hover){--wje-button-background-color: var(--wje-color-warning-1);--wje-button-border-color: var(--wje-color-warning-11);--wje-button-color: var(--wje-color-warning-11)}:host(.wje-button-solid.wje-color-danger:hover){--wje-button-background-color: var(--wje-color-danger-9);--wje-button-border-color: var(--wje-color-danger-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-danger:hover){--wje-button-background-color: var(--wje-color-danger-1);--wje-button-border-color: var(--wje-color-danger-11);--wje-button-color: var(--wje-color-danger-11)}:host(.wje-button-solid.wje-color-neutral:hover){--wje-button-background-color: var(--wje-color-contrast-9);--wje-button-border-color: var(--wje-color-contrast-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-neutral:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-11);--wje-button-color: var(--wje-color-contrast-11)}:host(.wje-button-solid.wje-color-default:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-2);--wje-button-color: var(--wje-color-contrast-9)}:host(.wje-button-outline.wje-color-default:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-2);--wje-button-color: var(--wje-color-contrast-9)}:host(.wje-button-link:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: transparent;color:var(--wje-color-contrast-9)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.button-solid.wje-color){background-color:var(--wje-button-background-color);color:var(--wje-button-color)}:host(.wje-button-link){--wje-button-border-width: 1px;--wje-button-border-color: transparent;--wje-button-background-color: transparent}:host(.wje-button-disabled){cursor:default;opacity:.5;pointer-events:none}:host(.wje-button-round){--wje-button-border-radius: var(--wje-border-radius-pill)}:host(.wje-button-circle){--wje-button-border-radius: var(--wje-border-radius-circle);aspect-ratio:1/1}:host(.wje-button-large){--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host(.wje-button-small){--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 -.3rem}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wje-button-group-first:not(.wje-button-group-last)) .button-native{border-start-end-radius:0;border-end-end-radius:0}:host(.wje-button-group-inner) .button-native{border-radius:0}:host(.wje-button-group-last:not(.wje-button-group-first)) .button-native{border-start-start-radius:0;border-end-start-radius:0}:host(.wje-button-group-button:not(.wje-button-group-first)){margin-inline-start:calc(-1 * var(--wje-button-border-width))!important}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
 class d extends h {
   /**
    * Button constructor
@@ -17,7 +16,7 @@ class d extends h {
      * @type {Object}
      */
     s(this, "depandencies", {
-      "wje-icon": p
+      "wje-icon": v
     });
     /**
      * Class name
@@ -29,21 +28,16 @@ class d extends h {
      * @param {Event} e - The event
      */
     s(this, "eventDialogOpen", (o) => {
-      document.dispatchEvent(
-        new CustomEvent(
-          this.dialog,
-          {
-            bubbles: !0
-          }
-        )
-      );
+      i.dispatchCustomEvent(this, this.dialog, {
+        bubbles: !0
+      });
     });
     /**
      * Toggle states method
      */
     s(this, "toggleStates", () => {
-      this.slotToggle.assignedNodes().filter((l) => l.nodeType === Node.ELEMENT_NODE).forEach((l) => {
-        l.classList.contains("show") ? l.classList.remove("show") : l.classList.add("show");
+      this.slotToggle.assignedNodes().filter((a) => a.nodeType === Node.ELEMENT_NODE).forEach((a) => {
+        a.classList.contains("show") ? a.classList.remove("show") : a.classList.add("show");
       });
     });
   }
@@ -66,7 +60,7 @@ class d extends h {
    * @param {boolean} value - The value to set
    */
   set disabled(o) {
-    this.setAttribute("disabled", "");
+    o ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   /**
    * Get disabled state
@@ -108,14 +102,14 @@ class d extends h {
    * @param {boolean} value - The value to set
    */
   set stopPropagation(o) {
-    this.setAttribute("stop-propagation", u(o));
+    this.setAttribute("stop-propagation", w(o));
   }
   /**
    * Get stop propagation
    * @returns {boolean} stopPropagation - The stop propagation
    */
   get stopPropagation() {
-    return u(this.getAttribute("stop-propagation"));
+    return w(this.getAttribute("stop-propagation"));
   }
   /**
    * Get CSS stylesheet
@@ -123,7 +117,7 @@ class d extends h {
    * @returns {Object} styles - The CSS styles
    */
   static get cssStyleSheet() {
-    return v;
+    return p;
   }
   /**
    * Get observed attributes
@@ -131,7 +125,7 @@ class d extends h {
    * @returns {Array<string>} observedAttributes - The observed attributes
    */
   static get observedAttributes() {
-    return [];
+    return ["disabled"];
   }
   /**
    * Setup attributes
@@ -146,30 +140,29 @@ class d extends h {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(o, l, m) {
-    let w = document.createDocumentFragment();
-    if (this.disabled && this.classList.add("wje-button-disabled"), this.variant && this.classList.add("wje-button-" + this.variant), this.hasAttribute("round") && this.classList.add("wje-button-round"), this.hasAttribute("circle") && this.classList.add("wje-button-circle"), this.outline && this.classList.add("wje-outline"), this.fill && this.classList.add("wje-button-" + this.fill), this.size && this.classList.add("wje-button-" + this.size), this.hasAttribute("color") ? this.classList.add("wje-color-" + this.color, "wje-color") : this.classList.add("wje-color-default", "wje-color"), this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
-      let a = document.createElement("wje-icon");
-      a.style.setProperty("--wje-icon-size", "14px"), a.setAttribute("slot", "caret"), a.setAttribute("name", "chevron-down"), this.appendChild(a);
+  draw(o, a, m) {
+    let u = document.createDocumentFragment();
+    if (this.classList.remove("wje-button-disabled"), this.disabled && this.classList.add("wje-button-disabled"), this.variant && this.classList.add("wje-button-" + this.variant), this.hasAttribute("round") && this.classList.add("wje-button-round"), this.hasAttribute("circle") && this.classList.add("wje-button-circle"), this.outline && this.classList.add("wje-outline"), this.fill && this.classList.add("wje-button-" + this.fill), this.size && this.classList.add("wje-button-" + this.size), this.hasAttribute("color") ? this.classList.add("wje-color-" + this.color, "wje-color") : this.classList.add("wje-color-default", "wje-color"), this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
+      let l = document.createElement("wje-icon");
+      l.style.setProperty("--wje-icon-size", "14px"), l.setAttribute("slot", "caret"), l.setAttribute("name", "chevron-down"), this.appendChild(l);
     }
     if (this.active) {
       this.classList.add("wje-active");
-      let a = document.createElement("wje-icon");
-      a.setAttribute("name", "check"), this.appendChild(a);
+      let l = document.createElement("wje-icon");
+      l.setAttribute("name", "check"), this.appendChild(l);
     }
-    this.disabled && this.classList.add("wje-disabled");
     let c = document.createElement(this.hasAttribute("href") ? "a" : "button");
     c.classList.add("button-native"), c.setAttribute("part", "native");
     let n = document.createElement("span");
     n.classList.add("button-inner");
     let e = document.createElement("slot");
-    return e.setAttribute("name", "icon-only"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "start"), n.appendChild(e), e = document.createElement("slot"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "end"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "caret"), n.appendChild(e), this.hasToggle = g.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), n.appendChild(this.slotToggle)), c.appendChild(n), w.appendChild(c), w;
+    return e.setAttribute("name", "icon-only"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "start"), n.appendChild(e), e = document.createElement("slot"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "end"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "caret"), n.appendChild(e), this.hasToggle = g.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), n.appendChild(this.slotToggle)), c.appendChild(n), u.appendChild(c), u;
   }
   /**
    * After draw method
    */
   afterDraw() {
-    this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), i.addListener(this, "click", "wje:button-click", null, { stopPropagation: this.stopPropagation }), i.addListener(this, "click", null, this.eventDialogOpen), this.hasToggle && i.addListener(this, "click", "wje-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation });
+    this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), this.hasAttribute("dialog") ? i.addListener(this, "click", null, this.eventDialogOpen) : i.addListener(this, "click", "wje-button:click", null), this.hasToggle && i.addListener(this, "click", "wje-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation });
   }
   /**
    * Before disconnect method

package/dist/wje-carousel.js

@@ -1,8 +1,8 @@
-var p = Object.defineProperty;
-var v = (o, a, e) => a in o ? p(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
-var u = (o, a, e) => (v(o, typeof a != "symbol" ? a + "" : a, e), e);
+var v = Object.defineProperty;
+var p = (o, a, e) => a in o ? v(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
+var u = (o, a, e) => (p(o, typeof a != "symbol" ? a + "" : a, e), e);
 import m from "./wje-element.js";
-const b = ":host{--wje-scroll-hint: 0px;--wje-carousel-width: 100%;--wje-carousel-height: auto}.native-carousel{position:relative;width:var(--wje-carousel-width, 100%);height:var(--wje-carousel-height, 300px);scroll-behavior:smooth}.carousel-slides{display:flex;transition:transform .5s ease;align-items:center;justify-items:center;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:var(--wje-aspect-ratio, 4/3);scroll-snap-type:x mandatory;scroll-padding-inline:0;overflow-y:hidden;padding-inline:var(--wje-spacing-inline, 0);gap:.5rem}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wje-carousel-item){flex:0 0 var(--wje-carousel-size, 100%);height:100%}wje-button{position:absolute;top:50%;border:none;cursor:pointer;z-index:2}.prev{left:-1rem;transform:translate(-100%,-50%)}.next{right:-1rem;transform:translate(100%,-50%)}.pagination{position:relative;bottom:-.5rem;left:50%;transform:translate(-50%,100%);display:flex;z-index:2;justify-content:center}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wje-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wje-color)}.thumbnails{display:flex;justify-content:center;align-items:center;overflow-x:auto;gap:.5rem;padding:0 .5rem;margin-top:.5rem;margin-bottom:.5rem;box-sizing:border-box;overflow-y:hidden}.thumbnails wje-thumbnail{--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wje-color-primary-11)}";
+const b = ":host{--wje-scroll-hint: 0px;--wje-carousel-width: 100%;--wje-carousel-height: auto;--wje-carousel-size: 100% }.native-carousel{position:relative;width:var(--wje-carousel-width, 100%);height:var(--wje-carousel-height, 300px);scroll-behavior:smooth}.carousel-slides{display:flex;transition:transform .5s ease;align-items:center;justify-items:center;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:var(--wje-aspect-ratio, 4 / 3);scroll-snap-type:x mandatory;scroll-padding-inline:0;overflow-y:hidden;padding-inline:var(--wje-spacing-inline, 0);gap:.5rem}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wje-carousel-item){flex:0 0 var(--wje-carousel-size);height:100%}wje-button{position:absolute;top:50%;border:none;cursor:pointer;z-index:2}.prev{left:-1rem;transform:translate(-100%,-50%)}.next{right:-1rem;transform:translate(100%,-50%)}.pagination{position:relative;bottom:-.5rem;left:50%;transform:translate(-50%,100%);display:flex;z-index:2;justify-content:center}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wje-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wje-color)}.thumbnails{display:flex;justify-content:center;align-items:center;overflow-x:auto;gap:.5rem;padding:0 .5rem;margin-top:.5rem;margin-bottom:.5rem;box-sizing:border-box;overflow-y:hidden}.thumbnails wje-thumbnail{--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wje-color-primary-11)}";
 class f extends m {
   constructor() {
     super();
@@ -48,7 +48,7 @@ class f extends m {
     let s = document.createElement("div");
     s.classList.add("carousel-slides");
     let l = document.createElement("slot");
-    return s.appendChild(l), t.appendChild(s), this.navigation && (t.appendChild(this.createPreviousButton()), t.appendChild(this.createNextButton())), this.pagination && t.appendChild(this.createPagination()), this.thumbnails && t.appendChild(this.createThumbnails()), r.appendChild(t), this.slides = s, r;
+    return s.appendChild(l), t.appendChild(s), this.navigation && (this.prevButton = this.createPreviousButton(), this.nextButton = this.createNextButton(), t.appendChild(this.prevButton), t.appendChild(this.nextButton)), this.pagination && t.appendChild(this.createPagination()), this.thumbnails && t.appendChild(this.createThumbnails()), r.appendChild(t), this.slides = s, r;
   }
   afterDraw() {
     this.setIntersectionObserver(), this.getSlidesWithClones().forEach((i, n) => {
@@ -56,7 +56,6 @@ class f extends m {
     }), this.slidePerPage = this.getAttribute("slide-per-page") || 1;
     let e = 100 / +this.slidePerPage;
     this.style.setProperty("--wje-carousel-size", e + "%"), this.goToSlide(this.activeSlide, "auto"), this.slides.addEventListener("scrollend", (i) => {
-      console.log("scrollend", this.entriesMap);
       const n = this.getSlides(), t = [...this.entriesMap.values()].find((s) => s.isIntersecting);
       if (t != null && t.target.classList.contains("clone")) {
         const s = +t.target.getAttribute("clone-index");
@@ -93,7 +92,7 @@ class f extends m {
       left: d.left - h.left + this.slides.scrollLeft,
       top: d.top - h.top + this.slides.scrollTop,
       behavior: i === "smooth" ? "smooth" : "auto"
-    });
+    }), this.navigation && !this.loop && (this.nextButton.removeAttribute("disabled"), this.prevButton.removeAttribute("disabled"), this.activeSlide === r.length - 1 && this.nextButton.setAttribute("disabled", ""), this.activeSlide === 0 && this.prevButton.setAttribute("disabled", ""));
   }
   cloneFirstAndLastItems() {
     const e = this.getSlides();
@@ -125,13 +124,13 @@ class f extends m {
   }
   createNextButton() {
     const e = document.createElement("wje-button");
-    return e.classList.add("next"), e.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+    return e.classList.add("next"), e.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
       this.nextSlide();
     }), e;
   }
   createPreviousButton() {
     const e = document.createElement("wje-button");
-    return e.classList.add("prev"), e.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+    return e.classList.add("prev"), e.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
       this.previousSlide();
     }), e;
   }

package/dist/wje-checkbox.js

@@ -1,46 +1,104 @@
-var b = Object.defineProperty;
-var h = (c, t, e) => t in c ? b(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var i = (c, t, e) => (h(c, typeof t != "symbol" ? t + "" : t, e), e);
-import l, { event as a } from "./wje-element.js";
-const s = ':host{--wje-grey-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-white-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-checkbox-margin-top: 0;--wje-checkbox-margin-bottom: .5rem;--wje-checkbox-margin-inline: 0;--wje-checkbox-width: 16px;--wje-checkbox-height: 16px;display:block;margin-top:var(--wje-checkbox-margin-top);margin-bottom:var(--wje-checkbox-margin-bottom);margin-inline:var(--wje-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;min-width:var(--wje-checkbox-width);min-height:var(--wje-checkbox-height);margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wje-color-contrast-lowest);border:1px solid var(--wje-border-color)}.native-checkbox label{transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox label:hover{color:var(--wje-color-contrast-higher)}.native-checkbox label:before{border-radius:3px;transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox input[type=checkbox]{position:absolute;margin:0;z-index:-1;width:16px;height:16px;opacity:0;display:none}.native-checkbox input[type=checkbox]+label:after{content:"";position:absolute;left:0;border-right:0 solid transparent;border-bottom:0 solid transparent;width:16px;height:16px;overflow:hidden}.native-checkbox.checkbox-circle label:after{border-radius:99px}.native-checkbox.checkbox-circle label:before{border-radius:99px}.native-checkbox input[type=checkbox]:checked+label:after{content:"";background:var(--wje-grey-check-icon);background-size:160px 16px;background-repeat:no-repeat;animation-name:checkbox-check;animation-duration:.32s;animation-timing-function:steps(9);animation-fill-mode:forwards;animation-iteration-count:1}.native-checkbox input[type=checkbox]:hover:active:not(:checked)+label:before{background-color:#00000014}.native-checkbox input[type=checkbox]:focus+label{color:var(--wje-color-contrast-higher)}.native-checkbox input[type=checkbox]:focus+label:before{outline:none!important;box-shadow:#78c8fe 0 0}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-high);opacity:.58}.native-checkbox input[type=checkbox][disabled]+label:before{cursor:not-allowed!important;background:#ececec}.native-checkbox input[type=checkbox]:indeterminate+label:after{background:none;background-color:var(--wje-color-contrast-high);width:10px;height:2px;top:6px;margin:3px;border-radius:2px}.native-checkbox.right label{padding-left:0;padding-right:26px}.native-checkbox.right label:before{right:0;left:auto}.native-checkbox.right input[type=checkbox]:checked+label{position:relative}.native-checkbox.right input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}.success input[type=checkbox]:checked+label:before,.success input[type=checkbox]:indeterminate+label:before{border-color:var(--wje-color-success);background-color:var(--wje-color-success)}.primary input[type=checkbox]:checked+label:before,.primary input[type=checkbox]:indeterminate+label:before{border-color:var(--wje-color-primary);background-color:var(--wje-color-primary)}.complete input[type=checkbox]:checked+label:before,.complete input[type=checkbox]:indeterminate+label:before{border-color:var(--wje-color-complete);background-color:var(--wje-color-complete)}.warning input[type=checkbox]:checked+label:before,.warning input[type=checkbox]:indeterminate+label:before{border-color:var(--wje-color-warning);background-color:var(--wje-color-warning)}.danger input[type=checkbox]:checked+label:before,.danger input[type=checkbox]:indeterminate+label:before{border-color:var(--wje-color-danger);background-color:var(--wje-color-danger)}.info input[type=checkbox]:checked+label:before,.info input[type=checkbox]:indeterminate+label:before{border-color:var(--wje-color-info);background-color:var(--wje-color-info)}.info input[type=checkbox]:checked+label:after,.danger input[type=checkbox]:checked+label:after,.complete input[type=checkbox]:checked+label:after,.primary input[type=checkbox]:checked+label:after,.success input[type=checkbox]:checked+label:after{background:var(--wje-white-check-icon)}.info input[type=checkbox]:indeterminate+label:after,.danger input[type=checkbox]:indeterminate+label:after,.complete input[type=checkbox]:indeterminate+label:after,.primary input[type=checkbox]:indeterminate+label:after,.success input[type=checkbox]:indeterminate+label:after{background-color:var(--wje-color-contrast-lowest)}@keyframes shrink-bounce{0%{transform:scale(1)}33%{transform:scale(.85)}to{transform:scale(1)}}@keyframes checkbox-check{0%{background-position:0}to{background-position:-144px}}.js-focus-visible .native-checkbox input[type=checkbox]:focus:not(.focus-visible)+label:before{box-shadow:none}input[type=checkbox]{accent-color:var(--wje-color-primary)!important;font-size:50px}';
-class d extends l {
+var s = Object.defineProperty;
+var h = (c, t, e) => t in c ? s(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var l = (c, t, e) => (h(c, typeof t != "symbol" ? t + "" : t, e), e);
+import b, { event as a } from "./wje-element.js";
+const d = ':host{--wje-grey-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-white-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-checkbox-margin-top: 0;--wje-checkbox-margin-bottom: .5rem;--wje-checkbox-margin-inline: 0;--wje-checkbox-width: 16px;--wje-checkbox-height: 16px;display:block;margin-top:var(--wje-checkbox-margin-top);margin-bottom:var(--wje-checkbox-margin-bottom);margin-inline:var(--wje-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;min-width:var(--wje-checkbox-width);min-height:var(--wje-checkbox-height);margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wje-color-contrast-lowest);border:1px solid var(--wje-border-color)}.native-checkbox label{transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox label:hover{color:var(--wje-color-contrast-highest)}.native-checkbox label:before{border-radius:3px;transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox input[type=checkbox]{position:absolute;margin:0;z-index:-1;width:16px;height:16px;opacity:0;display:none}.native-checkbox input[type=checkbox]+label:after{content:"";position:absolute;left:0;border-right:0 solid transparent;border-bottom:0 solid transparent;width:16px;height:16px;overflow:hidden}.native-checkbox.checkbox-circle label:after{border-radius:99px}.native-checkbox.checkbox-circle label:before{border-radius:99px}.native-checkbox input[type=checkbox]:checked+label:after{content:"";background:var(--wje-grey-check-icon);background-size:160px 16px;background-repeat:no-repeat;animation-name:checkbox-check;animation-duration:.32s;animation-timing-function:steps(9);animation-fill-mode:forwards;animation-iteration-count:1}.native-checkbox input[type=checkbox]:hover:active:not(:checked)+label:before{background-color:#00000014}.native-checkbox input[type=checkbox]:focus+label{color:var(--wje-color-contrast-highest)}.native-checkbox input[type=checkbox]:focus+label:before{outline:none!important;box-shadow:#78c8fe 0 0}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-high);opacity:.58}.native-checkbox input[type=checkbox][disabled]+label:before{cursor:not-allowed!important;background:#ececec}.native-checkbox input[type=checkbox]:indeterminate+label:after{background:none;background-color:var(--wje-color-contrast-high);width:10px;height:2px;top:6px;margin:3px;border-radius:2px}.native-checkbox.right label{padding-left:0;padding-right:26px}.native-checkbox.right label:before{right:0;left:auto}.native-checkbox.right input[type=checkbox]:checked+label{position:relative}.native-checkbox.right input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}.success :is(input[type=checkbox]:checked+label):before,.success :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-success);background-color:var(--wje-color-success)}.primary :is(input[type=checkbox]:checked+label):before,.primary :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-primary);background-color:var(--wje-color-primary)}.complete :is(input[type=checkbox]:checked+label):before,.complete :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-complete);background-color:var(--wje-color-complete)}.warning :is(input[type=checkbox]:checked+label):before,.warning :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-warning);background-color:var(--wje-color-warning)}.danger :is(input[type=checkbox]:checked+label):before,.danger :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-danger);background-color:var(--wje-color-danger)}.info :is(input[type=checkbox]:checked+label):before,.info :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-info);background-color:var(--wje-color-info)}.info :is(input[type=checkbox]:checked+label):after,.danger :is(input[type=checkbox]:checked+label):after,.complete :is(input[type=checkbox]:checked+label):after,.primary :is(input[type=checkbox]:checked+label):after,.success :is(input[type=checkbox]:checked+label):after{background:var(--wje-white-check-icon)}.info :is(input[type=checkbox]:indeterminate+label):after,.danger :is(input[type=checkbox]:indeterminate+label):after,.complete :is(input[type=checkbox]:indeterminate+label):after,.primary :is(input[type=checkbox]:indeterminate+label):after,.success :is(input[type=checkbox]:indeterminate+label):after{background-color:var(--wje-color-contrast-lowest)}@keyframes shrink-bounce{0%{transform:scale(1)}33%{transform:scale(.85)}to{transform:scale(1)}}@keyframes checkbox-check{0%{background-position:0}to{background-position:-144px}}.js-focus-visible .native-checkbox input[type=checkbox]:focus:not(.focus-visible)+label:before{box-shadow:none}input[type=checkbox]{accent-color:var(--wje-color-primary)!important;font-size:50px}';
+class p extends b {
+  /**
+   * Checkbox constructor.
+   */
   constructor() {
     super();
-    i(this, "className", "Checkbox");
-    i(this, "inputEvent", (e) => {
-      this.checked = e.target.checked;
-    });
-    this._checked = !1;
+    /**
+     * The class name.
+     */
+    l(this, "className", "Checkbox");
   }
+  /**
+   * @summary Set checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  /**
+   * @summary Get disabled attribute
+   * @returns {boolean} true if the toggle is disabled, false otherwise
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+  * @summary Set checked attribute
+  * @returns {boolean} true if the toggle is checked, false otherwise
+  */
   set checked(e) {
-    this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+    e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
   }
+  /**
+   * @summary Get checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
   get checked() {
-    return this._checked;
+    return this.hasAttribute("checked");
   }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {string} The CSS stylesheet.
+   */
   static get cssStyleSheet() {
-    return s;
+    return d;
   }
   static get observedAttributes() {
-    return ["checked"];
+    return ["checked", "disabled"];
   }
+  /**
+   * Sets up the attributes for the checkbox.
+   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, p, k) {
-    let n = document.createDocumentFragment(), o = document.createElement("div");
-    o.classList.add("native-checkbox"), this.variant === "circle" && o.classList.add("checkbox-circle"), this.color && o.classList.add(this.color), this.input = document.createElement("input"), this.input.type = "checkbox", this.input.id = "checkbox", this.input.name = this.name = "checkbox", this.input.checked = this.hasAttribute("checked"), this.input.disabled = this.hasAttribute("disabled"), this.input.indeterminate = this.hasAttribute("indeterminate");
+  /**
+   * Draws the checkbox.
+   * @param {object} context - The context.
+   * @param {object} store - The store.
+   * @param {object} params - The parameters.
+   * @returns {DocumentFragment} The created fragment.
+   */
+  draw(e, k, u) {
+    let n = document.createDocumentFragment(), i = document.createElement("div");
+    i.classList.add("native-checkbox"), this.variant === "circle" && i.classList.add("checkbox-circle"), this.color && i.classList.add(this.color);
+    let o = document.createElement("input");
+    o.type = "checkbox", o.id = "checkbox", o.name = this.name = "checkbox", o.checked = this.hasAttribute("checked"), o.disabled = this.hasAttribute("disabled"), o.indeterminate = this.hasAttribute("indeterminate");
     let r = document.createElement("label");
-    return r.htmlFor = "checkbox", r.innerHTML = "<slot></slot>", o.appendChild(this.input), o.appendChild(r), n.appendChild(o), n;
+    return r.htmlFor = "checkbox", r.innerHTML = "<slot></slot>", i.appendChild(o), i.appendChild(r), this.input = o, n.appendChild(i), n;
   }
+  /**
+   * Adds an event listener after drawing the checkbox.
+   */
   afterDraw() {
-    a.addListener(this, "click", "wje:checkbox:change"), a.addListener(this, "click", "wje:checkbox:input");
+    this.disabled || (this.input.addEventListener("input", (e) => {
+      this.checked = e.target.checked, a.dispatchCustomEvent(this, "wje-toggle:input");
+    }), this.input.addEventListener("change", (e) => {
+      this.checked = e.target.checked, a.dispatchCustomEvent(this, "wje-toggle:change");
+    }));
   }
+  /**
+   * Handles the input event.
+   * @param {Event} e - The event.
+   */
+  // inputEvent = (e) => {
+  //     this.checked = this.input.checked;
+  //     event.dispatchCustomEvent(this, "wje-checkbox:change");
+  // }
+  /**
+   * Removes the event listener when the checkbox is disconnected.
+   */
   disconnectedCallback() {
-    a.removeElement(this);
+    a.removeElement(this.input);
   }
 }
-l.define("wje-checkbox", d);
+b.define("wje-checkbox", p);
 export {
-  d as default
+  p as default
 };

package/dist/wje-dialog.js

@@ -1,13 +1,23 @@
 var u = Object.defineProperty;
 var f = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var p = (o, t, e) => (f(o, typeof t != "symbol" ? t + "" : t, e), e);
-import v, { event as h } from "./wje-element.js";
+var s = (o, t, e) => (f(o, typeof t != "symbol" ? t + "" : t, e), e);
+import v, { event as p } from "./wje-element.js";
 import "./wje-icon.js";
-const x = ':host{--wje-dialog-width: 600px;--wje-dialog-height: 600px;--wje-dialog-border-radius: var(--wje-border-radius-large);--wje-dialog-border-width: var(--wje-border-width);--wje-dialog-border-style: var(--wje-border-style);--wje-dialog-border-color: var(--wje-border-color);--wje-dialog-margin-top: auto;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: auto}:host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wje-dialog-padding, 1rem);padding-top:var(--wje-dialog-padding, 1rem);padding-bottom:var(--wje-dialog-padding, 0);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wje-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wje-dialog-padding, 1rem);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wje-dialog-padding-inline, 1rem);padding-top:var(--wje-dialog-padding-top, 1rem);padding-bottom:var(--wje-dialog-padding-bottom, 1rem)}dialog::backdrop{opacity:var(--wje-backdrop-opacity);background-color:var(--wje-backdrop)}:host(.separator) .dialog-header:after{content:"";height:1px;background:#00000014;left:var(--wje-dialog-padding, 1rem);right:var(--wje-dialog-padding, 1rem);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wje-dialog-width);height:var(--wje-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wje-dialog-border-radius);border-width:var(--wje-dialog-border-width);border-style:var(--wje-dialog-border-style);border-color:var(--wje-dialog-border-color);margin-top:var(--wje-dialog-margin-top);margin-bottom:var(--wje-dialog-margin-bottom);margin-inline:var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);padding:0}:host(.stick-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 0 0 8px 8px;--wje-dialog-border-width: 0 1px 1px 1px;--wje-dialog-margin-top: 0;--wje-dialog-translate-from: translateY(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 8px;--wje-dialog-border-width: 1px;--wje-dialog-opacity-from: 0;--wje-dialog-translate-from: scale(.9);--wje-dialog-translate-to: scale(1)}:host(.fill-in){--wje-dialog-width: 100%;--wje-dialog-height: 100%;--wje-dialog-border-radius: 0 0 0 0 !important;--wje-dialog-border-width: 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0;--wje-dialog-translate-from: scale(.95);--wje-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wje-dialog-width);min-height:var(--wje-dialog-height)}:host(.slide-left){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 1px 0 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-right){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 0 0 1px;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(110%);--wje-dialog-template-to: translateX(0)}:host(.small){--wje-dialog-width: 300px !important}:host(.medium){--wje-dialog-width: 500px !important}:host(.large){--wje-dialog-width: 600px !important}:host(.ex-large){--wje-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wje-dialog-opacity-from, 1);transform:var(--wje-dialog-translate-from)}to{opacity:1;transform:var(--wje-dialog-translate-to)}}';
-class j extends v {
+const x = ':host{--wje-dialog-width: 600px;--wje-dialog-height: 600px;--wje-dialog-border-radius: var(--wje-border-radius-large);--wje-dialog-border-width: var(--wje-border-width);--wje-dialog-border-style: var(--wje-border-style);--wje-dialog-border-color: var(--wje-border-color);--wje-dialog-margin-top: auto;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: auto;--wje-dialog-padding: 1rem;--wje-dialog-padding-inline: 1rem;--wje-dialog-padding-top: 1rem;--wje-dialog-padding-bottom: 1rem}:host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wje-dialog-padding);padding-top:var(--wje-dialog-padding);padding-bottom:var(--wje-dialog-padding);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wje-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wje-dialog-padding);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wje-dialog-padding-inline);padding-top:var(--wje-dialog-padding-top);padding-bottom:var(--wje-dialog-padding-bottom)}dialog::backdrop{opacity:var(--wje-backdrop-opacity);background-color:var(--wje-backdrop)}dialog:focus-visible{outline:none}:host(.separator) .dialog-header:after{content:"";height:1px;background:#00000014;left:var(--wje-dialog-padding);right:var(--wje-dialog-padding);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wje-dialog-width);height:var(--wje-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wje-dialog-border-radius);border-width:var(--wje-dialog-border-width);border-style:var(--wje-dialog-border-style);border-color:var(--wje-dialog-border-color);margin-top:var(--wje-dialog-margin-top);margin-bottom:var(--wje-dialog-margin-bottom);margin-inline:var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);padding:0}:host(.stick-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 0 0 8px 8px;--wje-dialog-border-width: 0 1px 1px 1px;--wje-dialog-margin-top: 0;--wje-dialog-translate-from: translateY(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 8px;--wje-dialog-border-width: 1px;--wje-dialog-opacity-from: 0;--wje-dialog-translate-from: scale(.9);--wje-dialog-translate-to: scale(1)}:host(.fill-in){--wje-dialog-width: 100%;--wje-dialog-height: 100%;--wje-dialog-border-radius: 0 0 0 0 !important;--wje-dialog-border-width: 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0;--wje-dialog-translate-from: scale(.95);--wje-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wje-dialog-width);min-height:var(--wje-dialog-height)}:host(.slide-left){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 1px 0 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-right){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 0 0 1px;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(110%);--wje-dialog-template-to: translateX(0)}:host(.small){--wje-dialog-width: 300px !important}:host(.medium){--wje-dialog-width: 500px !important}:host(.large){--wje-dialog-width: 600px !important}:host(.ex-large){--wje-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wje-dialog-opacity-from, 1);transform:var(--wje-dialog-translate-from)}to{opacity:1;transform:var(--wje-dialog-translate-to)}}';
+class c extends v {
   constructor() {
     super();
-    p(this, "className", "Dialog");
+    s(this, "className", "Dialog");
+    s(this, "onOpen", (e) => {
+      Promise.resolve(this.beforeOpen(this)).then((g) => {
+        this.dialog.showModal(), this.dialog.open && Promise.resolve(this.afterOpen(this));
+      });
+    });
+    s(this, "onClose", (e) => {
+      Promise.resolve(this.beforeClose(this)).then((g) => {
+        this.dialog.close(), this.dialog.open && Promise.resolve(this.afterClose(this));
+      });
+    });
   }
   set placement(e) {
     this.setAttribute("placement", e);
@@ -15,6 +25,12 @@ class j extends v {
   get placement() {
     return this.getAttribute("placement") || "slide-up";
   }
+  set async(e) {
+    this.setAttribute("async", "");
+  }
+  get async() {
+    return this.hasAttribute("async");
+  }
   static get cssStyleSheet() {
     return x;
   }
@@ -24,35 +40,47 @@ class j extends v {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, c, l) {
-    let s = document.createDocumentFragment();
-    this.classList.add("modal", "fade", this.placement, l.size);
+  draw(e, g, r) {
+    let w = document.createDocumentFragment();
+    this.classList.add("fade", this.placement, r.size);
     let b = document.createElement("slot"), a = document.createElement("dialog");
     a.classList.add("modal-dialog");
-    let g = document.createElement("wje-icon");
-    g.setAttribute("name", "x"), g.setAttribute("slot", "icon-only");
+    let h = document.createElement("wje-icon");
+    h.setAttribute("name", "x"), h.setAttribute("slot", "icon-only");
     let i = document.createElement("wje-button");
     i.setAttribute("fill", "link"), i.setAttribute("size", "small"), i.classList.add("close"), i.addEventListener("click", () => {
-      a.close();
-    }), i.appendChild(g);
+      this.close();
+    }), i.appendChild(h);
     let d = document.createElement("div");
-    d.setAttribute("part", "header"), d.classList.add("dialog-header"), d.innerHTML = `<span>${this.title}</span>`, d.appendChild(i);
-    let w = document.createElement("slot");
-    w.setAttribute("name", "header"), d.appendChild(w);
+    d.setAttribute("part", "header"), d.classList.add("dialog-header"), this.hasAttribute("headline") && (d.innerHTML = `<span>${this.headline}</span>`), d.appendChild(i);
+    let m = document.createElement("slot");
+    m.setAttribute("name", "header"), d.appendChild(m);
     let n = document.createElement("div");
     n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(b);
-    let r = document.createElement("div");
-    r.setAttribute("part", "footer"), r.classList.add("dialog-footer"), r.innerHTML = "";
-    let m = document.createElement("slot");
-    return m.setAttribute("name", "footer"), r.appendChild(m), a.appendChild(d), a.appendChild(n), a.appendChild(r), s.appendChild(a), this.dialog = a, s;
+    let l = document.createElement("div");
+    l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
+    let j = document.createElement("slot");
+    return j.setAttribute("name", "footer"), l.appendChild(j), a.appendChild(d), a.appendChild(n), a.appendChild(l), w.appendChild(a), this.dialog = a, w;
   }
-  afterDraw(e, c, l) {
-    l.trigger && document.addEventListener(l.trigger, () => {
-      h.dispatchCustomEvent(this.dialog, "wje-dialog:click"), this.dialog.showModal(), this.dialog.open && h.dispatchCustomEvent(this.dialog, "wje-dialog:open");
-    });
+  close() {
+    this.onClose();
+  }
+  afterDraw(e, g, r) {
+    this.button = document.querySelector(`[dialog=${r.trigger}]`), r.trigger && p.addListener(this.button, r.trigger, null, this.onOpen);
+  }
+  beforeOpen() {
+  }
+  afterOpen() {
+  }
+  beforeClose() {
+  }
+  afterClose() {
+  }
+  disconnectedCallback() {
+    p.removeElement(this.button), p.removeElement(this.dialog);
   }
 }
-j.define("wje-dialog", j);
+c.define("wje-dialog", c);
 export {
-  j as default
+  c as default
 };

package/dist/wje-dropdown.js

@@ -1,26 +1,34 @@
-var c = Object.defineProperty;
-var u = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var s = (i, t, e) => (u(i, typeof t != "symbol" ? t + "" : t, e), e);
-import h, { event as p } from "./wje-element.js";
-import { P as m } from "./popup.element-BXak-Fgc.js";
-class l extends h {
+var d = Object.defineProperty;
+var u = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var i = (r, t, e) => (u(r, typeof t != "symbol" ? t + "" : t, e), e);
+import m, { event as a } from "./wje-element.js";
+import { P as w } from "./popup.element-Dj9j__Dh.js";
+class h extends m {
   constructor() {
     super();
-    s(this, "depandencies", {
-      "wje-popup": m
+    i(this, "depandencies", {
+      "wje-popup": w
     });
-    s(this, "className", "Dropdown");
+    i(this, "className", "Dropdown");
     /**
-     * @summary Show tooltip
+     * @summary Open the popup
+     * @param e
      */
-    s(this, "onShow", () => {
-      this.popup.show();
+    i(this, "onOpen", async (e) => {
+      this.classList.add("active"), Promise.resolve(this.beforeShow(this)).then((l) => {
+        if (!this.classList.contains("active"))
+          throw new Error("beforeShow method returned false or not string");
+        this.popup.show(), Promise.resolve(this.afterShow(this));
+      }).catch((l) => {
+        this.classList.remove("active"), this.popup.hide();
+      });
     });
-    /**
-     * @summary Hide tooltip
+    /*
+      * @summary Close the popup
+      * @param e
      */
-    s(this, "onHide", () => {
-      this.popup.hide();
+    i(this, "onClose", async (e) => {
+      this.classList.remove("active"), this.popup.hide();
     });
   }
   set trigger(e) {
@@ -35,21 +43,26 @@ class l extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, g, w) {
-    let a = document.createDocumentFragment();
+  draw(e, l, f) {
+    let c = document.createDocumentFragment();
     this.classList.add("wje-placement", "wje-" + this.placement || "wje-start");
     let o = document.createElement("div");
     o.setAttribute("part", "native"), o.classList.add("native-dropdown");
     let n = document.createElement("slot");
     n.setAttribute("name", "trigger"), n.setAttribute("slot", "anchor");
-    let d = document.createElement("slot"), r = document.createElement("wje-popup");
-    return r.setAttribute("placement", this.placement), r.setAttribute("offset", this.offset), r.appendChild(n), r.appendChild(d), this.trigger === "click" && r.setAttribute("manual", ""), o.appendChild(r), a.appendChild(o), this.popup = r, this.anchorSlot = n, a;
+    let p = document.createElement("slot"), s = document.createElement("wje-popup");
+    return s.setAttribute("placement", this.placement), s.setAttribute("offset", this.offset), s.appendChild(n), s.appendChild(p), s.setAttribute("manual", ""), o.appendChild(s), c.appendChild(o), this.popup = s, this.anchorSlot = n, c;
   }
   afterDraw() {
-    this.trigger != "click" && (p.addListener(this.anchorSlot, "mouseenter", null, this.onShow), p.addListener(this.anchorSlot, "mouseleave", null, this.onHide));
+    this.trigger != "click" ? (a.addListener(this, "mouseenter", null, this.onOpen), a.addListener(this, "mouseleave", null, this.onClose)) : a.addListener(this.anchorSlot, "click", null, this.onOpen), this.hasAttribute("collapsible") && a.addListener(Array.from(this.querySelectorAll("wje-menu-item")), "click", "wje-menu-item:click", this.onClose);
+  }
+  beforeShow() {
+    return this.content;
+  }
+  afterShow() {
   }
 }
-l.define("wje-dropdown", l);
+h.define("wje-dropdown", h);
 export {
-  l as default
+  h as default
 };