wj-elements 0.1.0 → 0.1.1

package/dist/wje-menu-item.js

@@ -1,34 +1,34 @@
 var x = Object.defineProperty;
-var A = (r, a, e) => a in r ? x(r, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[a] = e;
-var m = (r, a, e) => (A(r, typeof a != "symbol" ? a + "" : a, e), e);
-import k, { WjElementUtils as S, event as h } from "./wje-element.js";
-import { b as L } from "./router-links-FtZbFUto.js";
-const E = ':host{--wje-menu-item-color: var(--wje-color);--wje-menu-item-background: transparent;--wje-menu-item-color-hover: var(--wje-color-contrast-8);--wje-menu-item-background-hover: var(--wje-border-color);--wje-menu-item-color-focus: var(--wje-color-contrast-8);--wje-menu-item-background-focus: var(--wje-border-color);--wje-menu-item-color-active: var(--wje-color-contrast-8);--wje-menu-item-background-active: var(--wje-border-color);--wje-menu-item-padding-top: .5rem;--wje-menu-item-padding-bottom: .5rem;--wje-menu-item-line-height: 1.8rem;--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;--wje-menu-submenu-offset: 0;--wje-menu-item-icon-visibility: hidden;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;//background: yellow;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0;width:auto;display:contents}:host(.collapse) ::slotted([slot="end"]){display:none}:host(.collapse) .label,:host(.collapse) .check-icon,:host(.collapse) .submenu-icon{display:none}.submenu-icon{--wje-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wje-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wje-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;right:10px;position:relative}:host(:focus-visible){outline:none}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wje-menu-variant-nav) ::slotted([slot="submenu"]){--wje-menu-border-width: 0 !important;--wje-menu-margin-inline: 2rem 0 !important}:host ::slotted([slot="start"]){width:1.5rem}:host(.wje-menu-variant-context){display:block}:host(.active){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host(.open){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}';
-class j extends k {
+var A = (o, a, e) => a in o ? x(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
+var c = (o, a, e) => (A(o, typeof a != "symbol" ? a + "" : a, e), e);
+import k, { WjElementUtils as L, event as l } from "./wje-element.js";
+import { b as E } from "./router-links-FtZbFUto.js";
+const S = ':host{--wje-menu-item-color: var(--wje-color);--wje-menu-item-background: transparent;--wje-menu-item-color-hover: var(--wje-color-contrast-8);--wje-menu-item-background-hover: var(--wje-border-color);--wje-menu-item-color-focus: var(--wje-color-contrast-8);--wje-menu-item-background-focus: var(--wje-border-color);--wje-menu-item-color-active: var(--wje-color-contrast-8);--wje-menu-item-background-active: var(--wje-border-color);--wje-menu-item-padding-top: .5rem;--wje-menu-item-padding-bottom: .5rem;--wje-menu-item-line-height: 1.8rem;--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;--wje-menu-submenu-offset: 0;--wje-menu-item-icon-visibility: hidden;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;//background: yellow;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0;width:auto;display:contents}:host(.collapse) ::slotted([slot="end"]){display:none}:host(.collapse) .label,:host(.collapse) .check-icon,:host(.collapse) .submenu-icon{display:none}.submenu-icon{--wje-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wje-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wje-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;right:10px;position:relative}:host(:focus-visible){outline:none}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wje-menu-variant-nav) ::slotted([slot="submenu"]){--wje-menu-border-width: 0 !important;--wje-menu-margin-inline: 2rem 0 !important}:host ::slotted([slot="start"]){width:1.5rem}:host(.wje-menu-variant-context){display:block}:host(.active){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host(.open){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}';
+class g extends k {
   /**
    * Constructor for MenuItem class.
    * @constructor
    */
   constructor() {
     super();
-    m(this, "className", "MenuItem");
+    c(this, "className", "MenuItem");
     /**
      * Dispatches a mousemove event.
      */
-    m(this, "dispatchMove", (e) => {
+    c(this, "dispatchMove", (e) => {
       this.style.setProperty("--wje-menu-item-safe-triangle-cursor-x", `${e.clientX}px`), this.style.setProperty("--wje-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
     });
     /**
      * Dispatches a reposition event.
      */
-    m(this, "dispatchReposition", (e) => {
+    c(this, "dispatchReposition", (e) => {
       if (this.submenu.assignedNodes().length === 0)
         return;
       let i = this.submenu.assignedNodes()[0];
-      const { left: l, top: s, width: t, height: o } = i.getBoundingClientRect();
-      this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${l}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${s}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${l}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${s + o}px`);
+      const { left: m, top: s, width: t, height: r } = i.getBoundingClientRect();
+      this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${m}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${s}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${m}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${s + r}px`);
     });
-    L(this, { selector: !1 }), this.hasSubmenu = S.hasSlot(this, "submenu"), this._collapsible = !1;
+    E(this, { selector: !1 }), this.hasSubmenu = L.hasSlot(this, "submenu"), this._collapsible = !1;
   }
   /**
    * Getter for placement attribute.
@@ -66,7 +66,7 @@ class j extends k {
    * @returns {string} The styles imported from styles.css.
    */
   static get cssStyleSheet() {
-    return E;
+    return S;
   }
   /**
    * Getter for observedAttributes.
@@ -84,7 +84,7 @@ class j extends k {
   /**
    * Removes the active attribute from the menu before drawing the MenuItem.
    */
-  beforeDraw(e, i, l) {
+  beforeDraw(e, i, m) {
     var s;
     (s = this.querySelector("wje-menu")) == null || s.removeAttribute("active");
   }
@@ -96,16 +96,16 @@ class j extends k {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment} The fragment to be appended to the MenuItem.
    */
-  draw(e, i, l) {
-    var w, f, g;
+  draw(e, i, m) {
+    var w, f, j;
     let s = document.createDocumentFragment();
-    this.setAttribute("tabindex", "0"), console.log("DRAW", this.variant, this.collapse), this.classList.forEach((n) => {
+    this.setAttribute("tabindex", "0"), this.classList.forEach((n) => {
       n.startsWith("wje-menu-variant-") && this.classList.remove(n);
     }), this.classList.remove("collapse"), this.classList.add("wje-menu-variant-" + this.variant.toLowerCase()), this.collapse ? (f = this.parentElement) != null && f.hasAttribute("collapse") && this.classList.add("collapse") : (w = this.querySelector("wje-menu")) == null || w.setAttribute("variant", this.variant.toLowerCase());
     let t = document.createElement("div");
     t.setAttribute("part", "native"), t.setAttribute("id", "anchor"), t.classList.add("native-menu-item");
-    let o = document.createElement("span");
-    o.classList.add("check-icon"), o.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? o.classList.add("checked") : o.classList.remove("checked");
+    let r = document.createElement("span");
+    r.classList.add("check-icon"), r.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? r.classList.add("checked") : r.classList.remove("checked");
     let d = document.createElement("slot");
     d.name = "start";
     let p = document.createElement("slot");
@@ -114,8 +114,8 @@ class j extends k {
     b.name = "end";
     let u = document.createElement("slot");
     u.setAttribute("part", "submenu"), u.name = "submenu";
-    let y = this.collapse ? "collapse" : "expand", c = document.createElement("span");
-    c.classList.add("submenu-icon", y), c.innerHTML = this.collapse ? '<wje-icon name="chevron-down"></wje-icon>' : '<wje-icon name="chevron-right"></wje-icon>', this.hasSubmenu ? t.classList.add("has-submenu") : t.classList.remove("has-submenu"), t.appendChild(o), t.appendChild(d), t.appendChild(p), t.appendChild(b), t.appendChild(c);
+    let y = this.collapse ? "collapse" : "expand", h = document.createElement("span");
+    h.classList.add("submenu-icon", y), h.innerHTML = this.collapse ? '<wje-icon name="chevron-down"></wje-icon>' : '<wje-icon name="chevron-right"></wje-icon>', this.hasSubmenu ? t.classList.add("has-submenu") : t.classList.remove("has-submenu"), t.appendChild(r), t.appendChild(d), t.appendChild(p), t.appendChild(b), t.appendChild(h);
     let v = !1;
     if (
       /*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
@@ -125,26 +125,28 @@ class j extends k {
       let n = document.createElement("wje-popup");
       n.setAttribute("anchor", "anchor"), n.setAttribute("placement", this.placement), n.setAttribute("offset", this.offset), n.appendChild(t), n.appendChild(u), this.popup = n, s.appendChild(n), v = !0;
     }
-    return (g = this.parentElement) != null && g.hasAttribute("collapse") && !this.hasSubmenu ? s.appendChild(this.collapseItem(t)) : v || s.appendChild(t), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && s.appendChild(u), this.native = t, this.submenu = u, s;
+    return (j = this.parentElement) != null && j.hasAttribute("collapse") && !this.hasSubmenu ? s.appendChild(this.collapseItem(t)) : v || s.appendChild(t), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && s.appendChild(u), this.native = t, this.submenu = u, s;
   }
   /**
    * Adds event listeners after drawing the MenuItem.
    */
   afterDraw() {
-    this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition), h.addListener(this, "mouseover", null, (e) => {
+    this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition), l.addListener(this, "mouseover", null, (e) => {
       if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
         if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
           return;
         this.submenuActivated(e), e.stopPropagation(), this.showSubmenu(), this.focus();
       }
-    }), h.addListener(this, "focusout", null, (e) => {
+    }), l.addListener(this, "focusout", null, (e) => {
       if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
-        if (console.log("SOM TU:"), e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
+        if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
           return;
         this.submenuActivated(e), this.hideSubmenu();
       }
-    }), h.addListener(this, "click", null, (e) => {
-      !this.collapse && this.variant === "NAV" && this.hasSubmenu && (this.submenuActivated(e), this.hideSubmenu(), e.stopPropagation());
+    }), l.addListener(this, "click", null, (e) => {
+      !this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuActivated(e), this.hideSubmenu(), e.stopPropagation()) : (l.dispatchCustomEvent(this, "wje-menu-item:click"), l.dispatchCustomEvent(this, this.dialog, {
+        bubbles: !0
+      }));
     });
   }
   /**
@@ -160,13 +162,13 @@ class j extends k {
    * Shows the submenu of the MenuItem.
    */
   showSubmenu() {
-    console.log("SHOW SUBMENU", this.hasSubmenu), this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.classList.add("expanded-submenu"), this.native.classList.add("expanded-submenu"));
+    this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.classList.add("expanded-submenu"), this.native.classList.add("expanded-submenu"));
   }
   /**
    * Hides the submenu of the MenuItem.
    */
   hideSubmenu() {
-    console.log("HIDE SUBMENU", this), this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.classList.remove("expanded-submenu"), this.native.classList.remove("expanded-submenu"));
+    this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.classList.remove("expanded-submenu"), this.native.classList.remove("expanded-submenu"));
   }
   /**
    * Activates or deactivates the submenu of the MenuItem.
@@ -184,7 +186,7 @@ class j extends k {
     this.context.innerHTML = "";
   }
 }
-j.define("wje-menu-item", j);
+g.define("wje-menu-item", g);
 export {
-  j as default
+  g as default
 };

package/dist/wje-menu.js

@@ -1,6 +1,6 @@
-var d = Object.defineProperty;
-var s = (n, e, t) => e in n ? d(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var o = (n, e, t) => (s(n, typeof e != "symbol" ? e + "" : e, t), t);
+var s = Object.defineProperty;
+var d = (n, t, e) => t in n ? s(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (d(n, typeof t != "symbol" ? t + "" : t, e), e);
 import l from "./wje-element.js";
 const u = ":host{--wje-menu-background: var(--wje-background);--wje-menu-border-width: 1px;--wje-menu-border-style: solid;--wje-menu-border-color: var(--wje-border-color);--wje-menu-border-radius: var(--wje-border-radius-small);--wje-menu-padding-top: .5rem;--wje-menu-padding-bottom: .5rem;--wje-menu-padding-inline: 0;--wje-menu-margin-top: ;--wje-menu-margin-bottom: 0;--wje-menu-margin-inline: 0;--wje-menu-collapse-width: 65px;display:none;background:var(--wje-menu-background);position:relative;border-width:var(--wje-menu-border-width);border-style:var(--wje-menu-border-style);border-color:var(--wje-menu-border-color);z-index:var(--wje-menu-z-index, 8);border-radius:var(--wje-menu-border-radius);padding-top:var(--wje-menu-padding-top);padding-bottom:var(--wje-menu-padding-bottom);padding-inline:var(--wje-menu-padding-inline);margin-top:var(--wje-menu-margin-top);margin-bottom:var(--wje-menu-margin-bottom);margin-inline:var(--wje-menu-margin-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wje-button){margin:0}:host(.wje-menu-collapse){width:var(--wje-menu-collapse-width)}:host([variant=context]){display:block!important;margin-left:var(--wje-menu-submenu-offset)}:host([variant=megamenu]) .native-menu{flex-direction:row;align-items:end;flex-wrap:nowrap}:host([variant=megamenu]) .native-menu .check-icon{display:none}:host([active]){display:flex!important}";
 class i extends l {
@@ -45,7 +45,7 @@ class i extends l {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(t, c, w) {
+  draw(e, c, w) {
     let a = document.createDocumentFragment();
     this.classList.remove("wje-menu-collapse"), this.hasAttribute("collapse") && this.classList.add("wje-menu-collapse");
     let r = document.createElement("div");
@@ -57,8 +57,8 @@ class i extends l {
    * Refreshes the component after drawing.
    */
   afterDraw() {
-    Array.from(this.children).forEach((t) => {
-      t.refresh();
+    Array.from(this.children).forEach((e) => {
+      e.tagName.includes("-") && e.refresh();
     });
   }
   /**

package/dist/wje-option.js

@@ -1,5 +1,99 @@
-import { O as o } from "./option.element-CpeafIM-.js";
-o.define("wje-option", o);
+var p = Object.defineProperty;
+var m = (n, t, e) => t in n ? p(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (m(n, typeof t != "symbol" ? t + "" : t, e), e);
+import u, { event as h } from "./wje-element.js";
+import g from "./wje-icon.js";
+const b = ':host{--wje-option-padding-top: .5rem;--wje-option-padding-bottom: .5rem;--wje-option-highlighted: var(--wje-color-contrast-3);display:block}:host wje-icon{visibility:hidden;margin-inline:.5rem}:host([selected]) wje-icon{visibility:visible}.native-option{display:flex;align-items:center;padding-top:var(--wje-option-padding-top);padding-bottom:var(--wje-option-padding-bottom)}.native-option:hover{background-color:var(--wje-option-highlighted)}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline:auto .5rem}';
+class d extends u {
+  /**
+   * Creates an instance of Option.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Dependencies of the Option component.
+     */
+    o(this, "depandencies", {
+      "wje-icon": g
+    });
+    o(this, "className", "Option");
+  }
+  /**
+   * Sets the selected attribute of the option.
+   *
+   * @param {boolean} value - The value to set.
+   */
+  set selected(e) {
+    return e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  /**
+   * Sets the value attribute of the option.
+   *
+   * @param {string} value - The value to set.
+   */
+  set value(e) {
+    this.setAttribute("value", e);
+  }
+  /**
+   * Sets the text content of the option.
+   *
+   * @param {string} value - The text to set.
+   */
+  set text(e) {
+    this.innerText = e;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return b;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, v, w) {
+    let s = document.createDocumentFragment(), i = document.createElement("div");
+    i.classList.add("native-option"), i.setAttribute("part", "native");
+    let a = document.createElement("wje-icon");
+    a.setAttribute("name", "check");
+    let r = document.createElement("slot");
+    r.setAttribute("name", "start");
+    let c = document.createElement("slot"), l = document.createElement("slot");
+    return l.setAttribute("name", "end"), i.appendChild(a), i.appendChild(r), i.appendChild(c), i.appendChild(l), s.appendChild(i), s;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw() {
+    h.addListener(this, "click", "wje:option-change");
+  }
+}
+d.define("wje-option", d);
 export {
-  o as default
+  d as default
 };

package/dist/wje-options.js

@@ -2,7 +2,7 @@ var p = Object.defineProperty;
 var c = (o, e, t) => e in o ? p(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
 var a = (o, e, t) => (c(o, typeof e != "symbol" ? e + "" : e, t), t);
 import d, { event as u } from "./wje-element.js";
-import { O as h } from "./option.element-CpeafIM-.js";
+import h from "./wje-option.js";
 class r extends d {
   /**
    * Creates an instance of Options.

package/dist/wje-popup.js

@@ -1,4 +1,4 @@
-import { P as p } from "./popup.element-BXak-Fgc.js";
+import { P as p } from "./popup.element-Dj9j__Dh.js";
 p.define("wje-popup", p);
 export {
   p as default

package/dist/wje-progress-bar.js

@@ -2,7 +2,7 @@ var A = Object.defineProperty;
 var j = (i, o, e) => o in i ? A(i, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[o] = e;
 var g = (i, o, e) => (j(i, typeof o != "symbol" ? o + "" : o, e), e);
 import k from "./wje-element.js";
-const f = ':host(.wje-color-primary) #bar{--wje-progress-bar-color: var(--wje-color-primary)}:host(.wje-color-complete) #bar{--wje-progress-bar-color: var(--wje-color-complete)}:host(.wje-color-success) #bar{--wje-progress-bar-color: var(--wje-color-success)}:host(.wje-color-warning) #bar{--wje-progress-bar-color: var(--wje-color-warning)}:host(.wje-color-danger) #bar{--wje-progress-bar-color: var(--wje-color-danger)}:host(.wje-color-dark) #bar{--wje-progress-bar-color: var(--wje-color-contrast-0)}:host(.wje-color-light) #bar{--wje-progress-bar-color: var(--wje-color-contrast-11)}:host{--wje-progress-bar-color: var(--wje-color-contrast-6);--wje-progress-bar-text-size: .75rem;--wje-progress-bar-text-color: var(--wje-color)}:host .progress{position:relative;display:flex;align-items:center}:host .slot-wrapper{display:flex;position:absolute;top:0;align-items:center;width:100%;height:100%;justify-content:center}:host #bar{stroke:var(--wje-progress-bar-color)}:host text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;dominant-baseline:middle;font-size:var(--wje-progress-bar-text-size);fill:var(--wje-progress-bar-text-color)}:host(.wje-color) #bar{stroke:var(--wje-progress-bar-color)}::slotted([slot="start"]){margin-inline:0 1rem}::slotted([slot="end"]){margin-inline:1rem 0}';
+const f = ':host(.wje-color-primary) #bar{--wje-progress-bar-color: var(--wje-color-primary)}:host(.wje-color-complete) #bar{--wje-progress-bar-color: var(--wje-color-complete)}:host(.wje-color-success) #bar{--wje-progress-bar-color: var(--wje-color-success)}:host(.wje-color-warning) #bar{--wje-progress-bar-color: var(--wje-color-warning)}:host(.wje-color-danger) #bar{--wje-progress-bar-color: var(--wje-color-danger)}:host(.wje-color-dark) #bar{--wje-progress-bar-color: var(--wje-color-contrast-0)}:host(.wje-color-light) #bar{--wje-progress-bar-color: var(--wje-color-contrast-11)}:host{--wje-progress-bar-color: var(--wje-color-contrast-6);--wje-progress-bar-text-size: .75rem;--wje-progress-bar-text-color: var(--wje-color);--wje-progress-bar-stroke: var(--wje-color-contrast-3);stroke:var(--wje-progress-bar-stroke)}:host .progress{position:relative;display:flex;align-items:center}:host .slot-wrapper{display:flex;position:absolute;top:0;align-items:center;width:100%;height:100%;justify-content:center}:host #bar{stroke:var(--wje-progress-bar-color)}:host text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;dominant-baseline:middle;font-size:var(--wje-progress-bar-text-size);fill:var(--wje-progress-bar-text-color);stroke:var(--wje-progress-bar-text-color)}:host(.wje-color) #bar{stroke:var(--wje-progress-bar-color)}::slotted([slot="start"]){margin-inline:0 1rem}::slotted([slot="end"]){margin-inline:1rem 0}';
 class w extends k {
   /**
    * Creates an instance of ProgressBar.
@@ -100,10 +100,10 @@ class w extends k {
     a.classList.add("progress");
     let m = document.createElement("slot"), d = document.createElement("div");
     d.classList.add("slot-wrapper");
-    let b = document.createElement("slot");
-    b.setAttribute("name", "start");
     let p = document.createElement("slot");
-    p.setAttribute("name", "end");
+    p.setAttribute("name", "start");
+    let b = document.createElement("slot");
+    b.setAttribute("name", "end");
     let s = document.createElementNS("http://www.w3.org/2000/svg", "svg"), r, t;
     if ((this == null ? void 0 : this.type) === "circle") {
       s.setAttribute("width", this.diameter), s.setAttribute("height", this.diameter), s.setAttribute("viewBox", `0 0 ${this.diameter} ${this.diameter}`), s.setAttribute("style", "transform: rotate(-90deg)"), r = document.createElementNS("http://www.w3.org/2000/svg", "circle"), r.setAttribute("r", this.radius), r.setAttribute("cx", c), r.setAttribute("cy", c), r.setAttribute("fill", "transparent"), t = document.createElementNS("http://www.w3.org/2000/svg", "circle"), t.setAttribute("r", this.radius), t.setAttribute("cx", c), t.setAttribute("cy", c), t.setAttribute("fill", "transparent"), t.setAttribute("stroke-dasharray", "0"), t.setAttribute("stroke-dashoffset", "0");
@@ -111,7 +111,7 @@ class w extends k {
       n.setAttribute("x", "50%"), n.setAttribute("y", "50%"), n.innerHTML = this.progress + "%", s.appendChild(n);
     } else
       s.setAttribute("width", "100%"), s.setAttribute("height", this.stroke), s.setAttribute("preserveAspectRatio", "none"), r = document.createElementNS("http://www.w3.org/2000/svg", "line"), r.setAttribute("x1", 0), r.setAttribute("y1", this.stroke / 2), r.setAttribute("x2", "100%"), r.setAttribute("y2", this.stroke / 2), t = document.createElementNS("http://www.w3.org/2000/svg", "line"), t.setAttribute("x1", 0), t.setAttribute("y1", this.stroke / 2), t.setAttribute("x2", this.progress + "%"), t.setAttribute("y2", this.stroke / 2);
-    return r.setAttribute("stroke", "#e0e0e0"), r.setAttribute("stroke-linecap", this.linecap), r.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("stroke-linecap", this.linecap), t.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("id", "bar"), s.appendChild(r), s.appendChild(t), d.appendChild(m), a.appendChild(b), a.appendChild(d), a.appendChild(s), a.appendChild(p), u.appendChild(a), this.background = r, this.bar = t, u;
+    return r.setAttribute("stroke-linecap", this.linecap), r.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("stroke-linecap", this.linecap), t.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("id", "bar"), s.appendChild(r), s.appendChild(t), d.appendChild(m), a.appendChild(p), a.appendChild(d), a.appendChild(s), a.appendChild(b), u.appendChild(a), this.background = r, this.bar = t, u;
   }
   /**
    * Adds event listeners after the component is drawn.

package/dist/wje-radio-group.js

@@ -57,7 +57,7 @@ class l extends h {
    * Handles the selection of radio buttons.
    */
   afterDraw() {
-    this.value && this.setRadioToChekced(this.getRadioByValue(this.value)), this.addEventListener("wje:radio:input", (e) => {
+    this.value && this.setRadioToChekced(this.getRadioByValue(this.value)), this.addEventListener("wje-radio:input", (e) => {
       this.removeCheck(), this.setRadioToChekced(e.detail.context);
     });
   }

package/dist/wje-radio.js

@@ -34,7 +34,7 @@ class c extends p {
     return o.htmlFor = "radio", o.innerHTML = "<slot></slot>", r.appendChild(this.input), r.appendChild(o), d.appendChild(r), d;
   }
   afterDraw() {
-    this.hasAttribute("disabled") || (n.addListener(this, "click", "wje:radio:change"), n.addListener(this, "click", "wje:radio:input"));
+    this.hasAttribute("disabled") || (n.addListener(this, "click", "wje-radio:change"), n.addListener(this, "click", "wje-radio:input"));
   }
   disconnectedCallback() {
     n.removeElement(this);

package/dist/wje-relative-time.js

@@ -2,7 +2,7 @@ var h = Object.defineProperty;
 var v = (n, i, e) => i in n ? h(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
 var d = (n, i, e) => (v(n, typeof i != "symbol" ? i + "" : i, e), e);
 import f from "./wje-element.js";
-import { L as S } from "./localize-7fxVJArK.js";
+import { L as p } from "./localize-7fxVJArK.js";
 class l extends f {
   /**
    * Creates an instance of RelativeTime.
@@ -12,7 +12,7 @@ class l extends f {
   constructor() {
     super();
     d(this, "className", "RelativeTime");
-    this.localizer = new S(this);
+    this.localizer = new p(this);
   }
   /**
    * Gets the ISO date of the relative time component.
@@ -23,15 +23,6 @@ class l extends f {
     let e = /* @__PURE__ */ new Date(), t = this.getAttribute("date");
     return this.hasAttribute("date") && (this.isISODate(t) ? t = t : t = +t * 1e3, e = new Date(t)), e.toISOString();
   }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
   /**
    * Returns the list of attributes to observe for changes.
    *
@@ -75,8 +66,8 @@ class l extends f {
       86400 * 30,
       86400 * 365,
       1 / 0
-    ], c = ["second", "minute", "hour", "day", "week", "month", "year"], s = o.findIndex((g) => g > Math.abs(a)), m = s ? o[s - 1] : 1;
-    return this.localizer.relativeTime(Math.floor(a / m), c[s], { numeric: "auto" });
+    ], m = ["second", "minute", "hour", "day", "week", "month", "year"], s = o.findIndex((g) => g > Math.abs(a)), c = s ? o[s - 1] : 1;
+    return this.localizer.relativeTime(Math.floor(a / c), m[s], { numeric: "auto" });
   }
   /**
    * Checks if the given string is an ISO date.

package/dist/wje-select.js

@@ -4,11 +4,10 @@ var u = (n, a, e) => (A(n, typeof a != "symbol" ? a + "" : a, e), e);
 import E from "./wje-element.js";
 import x from "./wje-button.js";
 import "./wje-popup.js";
-import "./wje-icon.js";
-import y from "./wje-label.js";
-import C from "./wje-chip.js";
-import { P as L } from "./popup.element-BXak-Fgc.js";
-import { I as O } from "./icon.element-DOiXP3pi.js";
+import y from "./wje-icon.js";
+import C from "./wje-label.js";
+import L from "./wje-chip.js";
+import { P as O } from "./popup.element-Dj9j__Dh.js";
 const k = ":host{--wje-select-border-width: 1px;--wje-select-border-style: solid;--wje-select-border-color: var(--wje-border-color);--wje-select-options-border-width: 1px;--wje-select-options-border-style: var(--wje-border-style);--wje-select-options-border-color: var(--wje-border-color);--wje-select-background: var(--wje-background);--wje-select-line-height: 20px;--wje-select-color: var(--wje-color);--wje-select-border-radius: var(--wje-border-radius-medium);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius);padding-inline:.5rem;padding-top:.25rem;padding-bottom:.25rem}.native-select.default .input-wrapper{padding:0;min-height:25px;margin-top:-4px}.native-select.default.focused wje-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wje-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wje-select-line-height)}.native-select.default wje-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .wrapper{border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius)}.native-select.standard .input-wrapper{background:transparent;width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wje-select-background);min-height:28px;color:var(--wje-select-color);line-height:var(--wje-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px;font-weight:400;vertical-align:middle}input{border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0}::placeholder{opacity:1}:host [active] .wrapper{border-radius:var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.option-wrapper{border-width:var(--wje-select-options-border-width);border-style:var(--wje-select-options-border-style);border-color:var(--wje-select-options-border-color);border-radius:0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);margin-top:-1px;background:var(--wje-select-background);overflow:auto}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wje-chip{--wje-chip-margin: 0 .25rem 0 0}wje-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}";
 class v extends E {
   /**
@@ -20,10 +19,10 @@ class v extends E {
     super();
     u(this, "depandencies", {
       "wje-button": x,
-      "wje-popup": L,
-      "wje-icon": O,
-      "wje-label": y,
-      "wje-chip": C
+      "wje-popup": O,
+      "wje-icon": y,
+      "wje-label": C,
+      "wje-chip": L
     });
     u(this, "className", "Select");
     /**
@@ -150,7 +149,7 @@ class v extends E {
       this.labelElement.classList.add("fade"), this.native.classList.add("focused");
     }), this.input.addEventListener("blur", (i) => {
       this.native.classList.remove("focused"), i.target.value || this.labelElement.classList.remove("fade");
-    }), this.addEventListener("wje:option-change", this.optionChange), this.clear.addEventListener("wje:button-click", (i) => {
+    }), this.addEventListener("wje:option-change", this.optionChange), this.clear.addEventListener("wje-button:click", (i) => {
       this.getAllOptions().forEach((s) => {
         s.selected = !1, s.removeAttribute("selected");
       }), this.selections(), i.stopPropagation();