wj-elements 0.0.2 → 0.0.4

package/dist/wj-container.js

@@ -1,19 +1,19 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var r = Object.defineProperty;
+var a = (e, t, n) => t in e ? r(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var s = (e, t, n) => (a(e, typeof t != "symbol" ? t + "" : t, n), n);
+import c from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Container ]\n*/\n:host {\n  --wj-container-indent: 0;\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  flex-basis: auto;\n  box-sizing: border-box;\n  min-width: 0;\n}\n:host([vertical]) {\n  flex-direction: column;\n}\n@media (min-width: 768px) {\n  :host([indent]) {\n    margin-left: var(--wj-container-indent);\n  }\n}";
-class Container extends WJElement {
+const d = `/*!
+* direction.scss
+*/:host{--wj-container-indent: 0;display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}:host([vertical]){flex-direction:column}@media (min-width: 768px){:host([indent]){margin-left:var(--wj-container-indent)}}
+`;
+class l extends c {
   constructor() {
     super();
-    __publicField(this, "className", "Container");
+    s(this, "className", "Container");
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   static get observedAttributes() {
     return [];
@@ -21,16 +21,14 @@ class Container extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    if (this.indent)
-      this.style.setProperty("--wj-container-indent", this.indent);
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(n, m, u) {
+    let i = document.createDocumentFragment();
+    this.indent && this.style.setProperty("--wj-container-indent", this.indent);
+    let o = document.createElement("slot");
+    return i.appendChild(o), i;
   }
 }
-customElements.get("wj-container") || window.customElements.define("wj-container", Container);
+customElements.get("wj-container") || window.customElements.define("wj-container", l);
 export {
-  Container
+  l as Container
 };

package/dist/wj-copy-button.js

@@ -1,95 +1,71 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement, { event } from "./wj-element.js";
-import { Input } from "./wj-input.js";
+var d = Object.defineProperty;
+var p = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var i = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
+import h, { event as s } from "./wj-element.js";
+import { Input as m } from "./wj-input.js";
 import "./wj-store.js";
-function createNode(text) {
-  const node = document.createElement("pre");
-  node.style.width = "1px";
-  node.style.height = "1px";
-  node.style.position = "fixed";
-  node.style.top = "5px";
-  node.textContent = text;
-  return node;
+function f(o) {
+  const e = document.createElement("pre");
+  return e.style.width = "1px", e.style.height = "1px", e.style.position = "fixed", e.style.top = "5px", e.textContent = o, e;
 }
-function copyNode(node) {
-  if ("clipboard" in navigator) {
-    return navigator.clipboard.writeText(node.textContent || "");
-  }
-  const selection = getSelection();
-  if (selection == null) {
+function l(o) {
+  if ("clipboard" in navigator)
+    return navigator.clipboard.writeText(o.textContent || "");
+  const e = getSelection();
+  if (e == null)
     return Promise.reject(new Error());
-  }
-  selection.removeAllRanges();
-  const range = document.createRange();
-  range.selectNodeContents(node);
-  selection.addRange(range);
-  selection.removeAllRanges();
-  return Promise.resolve();
+  e.removeAllRanges();
+  const t = document.createRange();
+  return t.selectNodeContents(o), e.addRange(t), e.removeAllRanges(), Promise.resolve();
 }
-function copyText(text) {
-  if ("clipboard" in navigator) {
-    return navigator.clipboard.writeText(text);
-  }
-  const body = document.body;
-  if (!body) {
+function u(o) {
+  if ("clipboard" in navigator)
+    return navigator.clipboard.writeText(o);
+  const e = document.body;
+  if (!e)
     return Promise.reject(new Error());
-  }
-  const node = createNode(text);
-  body.appendChild(node);
-  copyNode(node);
-  body.removeChild(node);
-  return Promise.resolve();
+  const t = f(o);
+  return e.appendChild(t), l(t), e.removeChild(t), Promise.resolve();
 }
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Copy Button ]\n*/\n:host {\n  cursor: pointer;\n  padding: 0.5rem;\n}";
-class CopyButton extends WJElement {
+const b = `/*!
+* direction.scss
+*/:host{cursor:pointer;padding:.5rem}
+`;
+class y extends h {
   constructor() {
     super();
-    __publicField(this, "className", "CopyButton");
-    __publicField(this, "clicked", (e) => {
-      const button = e.currentTarget;
-      if (button instanceof HTMLElement) {
-        this.copy(button);
-      }
+    i(this, "className", "CopyButton");
+    i(this, "clicked", (t) => {
+      const n = t.currentTarget;
+      n instanceof HTMLElement && this.copy(n);
     });
-    __publicField(this, "keydown", (e) => {
-      if (e.key === " " || e.key === "Enter") {
-        const button = e.currentTarget;
-        if (button instanceof HTMLElement) {
-          this.copy(button);
-        }
+    i(this, "keydown", (t) => {
+      if (t.key === " " || t.key === "Enter") {
+        const n = t.currentTarget;
+        n instanceof HTMLElement && this.copy(n);
       }
     });
-    __publicField(this, "focused", (e) => {
-      e.currentTarget.addEventListener("keydown", this.keydown);
+    i(this, "focused", (t) => {
+      t.currentTarget.addEventListener("keydown", this.keydown);
     });
-    __publicField(this, "blurred", (e) => {
-      e.currentTarget.removeEventListener("keydown", this.keydown);
+    i(this, "blurred", (t) => {
+      t.currentTarget.removeEventListener("keydown", this.keydown);
     });
-    __publicField(this, "copied", (e) => {
-      this.icon.setAttribute("color", "success");
-      this.icon.setAttribute("name", "check");
-      this.tooltip.setAttribute("content", this.labelSuccess || "Copied");
-      setTimeout(() => {
-        this.icon.removeAttribute("color");
-        this.icon.setAttribute("name", "clipboard");
-        this.tooltip.setAttribute("content", this.label || "Copy");
+    i(this, "copied", (t) => {
+      this.icon.setAttribute("color", "success"), this.icon.setAttribute("name", "check"), this.tooltip.setAttribute("content", this.labelSuccess || "Copied"), setTimeout(() => {
+        this.icon.removeAttribute("color"), this.icon.setAttribute("name", "clipboard"), this.tooltip.setAttribute("content", this.label || "Copy");
       }, this.timeout);
     });
     this.timeout = 1e3;
   }
-  set value(value) {
-    this.setAttribute("value", value);
+  set value(t) {
+    this.setAttribute("value", t);
   }
   get value() {
     return this.getAttribute("value") || "";
   }
   static get cssStyleSheet() {
-    return styles;
+    return b;
   }
   static get observedAttributes() {
     return [];
@@ -98,55 +74,33 @@ class CopyButton extends WJElement {
     this.isShadowRoot = "open";
   }
   draw() {
-    let fragment = document.createDocumentFragment();
-    let tooltip = document.createElement("wj-tooltip");
-    tooltip.setAttribute("offset", "5");
-    tooltip.setAttribute("content", this.label || "Copy");
-    let icon = document.createElement("wj-icon");
-    icon.setAttribute("name", "clipboard");
-    tooltip.appendChild(icon);
-    fragment.appendChild(tooltip);
-    this.tooltip = tooltip;
-    this.icon = icon;
-    return fragment;
+    let t = document.createDocumentFragment(), n = document.createElement("wj-tooltip");
+    n.setAttribute("offset", "5"), n.setAttribute("content", this.label || "Copy");
+    let r = document.createElement("wj-icon");
+    return r.setAttribute("name", "clipboard"), n.appendChild(r), t.appendChild(n), this.tooltip = n, this.icon = r, t;
   }
   afterDraw() {
-    event.addListener(this, "click", null, this.clicked);
-    event.addListener(this, "focus", null, this.focused);
-    event.addListener(this, "blur", null, this.blurred);
-    event.addListener(this, "wj:copy-button", null, this.copied);
+    s.addListener(this, "click", null, this.clicked), s.addListener(this, "focus", null, this.focused), s.addListener(this, "blur", null, this.blurred), s.addListener(this, "wj:copy-button", null, this.copied);
   }
-  async copy(button) {
-    const id = this.getAttribute("for");
-    const text = this.getAttribute("value");
-    if (button.getAttribute("aria-disabled") === "true") {
-      return;
-    }
-    if (text) {
-      await copyText(text);
-      event.dispatchCustomEvent(this, "wj:copy-button");
-    } else if (id) {
-      const root = "getRootNode" in Element.prototype ? button.getRootNode() : button.ownerDocument;
-      if (!(root instanceof Document || "ShadowRoot" in window && root instanceof ShadowRoot))
-        return;
-      const node = root.getElementById(id);
-      if (node) {
-        await this.copyTarget(node);
-        event.dispatchCustomEvent(this, "wj:copy-button");
+  async copy(t) {
+    const n = this.getAttribute("for"), r = this.getAttribute("value");
+    if (t.getAttribute("aria-disabled") !== "true") {
+      if (r)
+        await u(r), s.dispatchCustomEvent(this, "wj:copy-button");
+      else if (n) {
+        const c = "getRootNode" in Element.prototype ? t.getRootNode() : t.ownerDocument;
+        if (!(c instanceof Document || "ShadowRoot" in window && c instanceof ShadowRoot))
+          return;
+        const a = c.getElementById(n);
+        a && (await this.copyTarget(a), s.dispatchCustomEvent(this, "wj:copy-button"));
       }
     }
   }
-  copyTarget(content) {
-    if (content instanceof HTMLInputElement || content instanceof HTMLTextAreaElement || content instanceof Input) {
-      return copyText(content.value);
-    } else if (content instanceof HTMLAnchorElement && content.hasAttribute("href")) {
-      return copyText(content.href);
-    } else {
-      return copyNode(content);
-    }
+  copyTarget(t) {
+    return t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof m ? u(t.value) : t instanceof HTMLAnchorElement && t.hasAttribute("href") ? u(t.href) : l(t);
   }
 }
-customElements.get("wj-copy-button") || window.customElements.define("wj-copy-button", CopyButton);
+customElements.get("wj-copy-button") || window.customElements.define("wj-copy-button", y);
 export {
-  CopyButton
+  y as CopyButton
 };

package/dist/wj-dialog.js

@@ -1,89 +1,65 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement, { WjElementUtils } from "./wj-element.js";
+var j = Object.defineProperty;
+var b = (e, i, t) => i in e ? j(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t;
+var m = (e, i, t) => (b(e, typeof i != "symbol" ? i + "" : i, t), t);
+import u, { WjElementUtils as x } from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-dialog-width: 600px;\n  --wj-dialog-height: 600px;\n  --wj-dialog-padding: 1rem;\n  --wj-dialog-border-radius: 8px;\n  --wj-dialog-border-width: 1px;\n  --wj-dialog-border-style: solid;\n  --wj-dialog-border-color: rgba(33, 33, 33, 0.17);\n  --wj-dialog-margin-top: auto;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: auto;\n}\n:host .close {\n  margin-left: auto;\n}\n:host .modal-content {\n  border-radius: 3px;\n  box-shadow: none;\n}\n:host .dialog-header {\n  position: relative;\n  border-bottom: 0;\n  padding-inline: var(--wj-dialog-padding);\n  padding-top: var(--wj-dialog-padding);\n  display: flex;\n  align-items: center;\n}\n:host .dialog-header span {\n  -webkit-transition: opacity 0.3s ease;\n  transition: opacity 0.3s ease;\n  font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n  font-size: 10.5px;\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n}\n:host .dialog-content {\n  box-shadow: none;\n  padding-inline: var(--wj-dialog-padding);\n  white-space: normal;\n  z-index: 1;\n}\n:host .dialog-footer {\n  display: flex;\n  justify-content: end;\n  border-top: none;\n  box-shadow: none;\n  margin-top: 0;\n  padding-inline: var(--wj-dialog-padding);\n  padding-top: 0;\n  padding-bottom: var(--wj-dialog-padding);\n}\ndialog::backdrop {\n  --wj-backdrop: rgb(0, 0, 0);\n  --wj-backdrop-opacity: .3;\n  opacity: var(--wj-backdrop-opacity);\n  background-color: var(--wj-backdrop);\n}\n:host(.separator) .dialog-header:after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  left: var(--wj-dialog-padding);\n  right: var(--wj-dialog-padding);\n  position: absolute;\n  bottom: 0;\n}\n:host dialog {\n  box-sizing: border-box;\n  transition: all 0.2s !important;\n  width: var(--wj-dialog-width);\n  height: var(--wj-dialog-height);\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n  border-radius: var(--wj-dialog-border-radius);\n  border-width: var(--wj-dialog-border-width);\n  border-style: var(--wj-dialog-border-style);\n  border-color: var(--wj-dialog-border-color);\n  margin-top: var(--wj-dialog-margin-top);\n  margin-bottom: var(--wj-dialog-margin-bottom);\n  margin-inline: var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);\n  padding: 0;\n}\n:host(.stick-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 0 0 8px 8px;\n  --wj-dialog-border-width: 0 1px 1px 1px;\n  --wj-dialog-margin-top: 0;\n}\n:host(.slide-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 8px;\n  --wj-dialog-border-width: 1px;\n}\n:host(.fill-in) {\n  --wj-dialog-width: 100%;\n  --wj-dialog-height: 100%;\n  --wj-dialog-border-radius: 0 0 0 0 !important;\n  --wj-dialog-border-width: 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.fill-in) dialog {\n  min-width: var(--wj-dialog-width);\n  min-height: var(--wj-dialog-height);\n}\n:host(.slide-left) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 1px 0 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-left) dialog {\n  min-height: var(--wj-dialog-height);\n}\n:host(.slide-right) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 0 0 1px;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-right) dialog {\n  min-height: var(--wj-dialog-height);\n}\n:host(.small) {\n  --wj-dialog-width: 300px !important;\n}\n:host(.medium) {\n  --wj-dialog-width: 500px !important;\n}\n:host(.large) {\n  --wj-dialog-width: 600px !important;\n}\n:host(.ex-large) {\n  --wj-dialog-width: 900px !important;\n}';
-class Dialog extends WJElement {
+const f = `/*!
+* direction.scss
+*/:host{--wj-dialog-width: 600px;--wj-dialog-height: 600px;--wj-dialog-padding: 1rem;--wj-dialog-border-radius: 8px;--wj-dialog-border-width: 1px;--wj-dialog-border-style: solid;--wj-dialog-border-color: rgba(33, 33, 33, .17);--wj-dialog-margin-top: auto;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: auto;--wj-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(--wj-dialog-padding);padding-top:var(--wj-dialog-padding);display:flex;align-items:center}:host .dialog-header span{-webkit-transition:opacity .3s ease;transition:opacity .3s ease;font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;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(--wj-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(--wj-dialog-padding);padding-top:0;padding-bottom:var(--wj-dialog-padding)}dialog::backdrop{--wj-backdrop: rgb(0, 0, 0);--wj-backdrop-opacity: .3;opacity:var(--wj-backdrop-opacity);background-color:var(--wj-backdrop)}:host(.separator) .dialog-header:after{content:"";height:1px;background:rgba(0,0,0,.08);left:var(--wj-dialog-padding);right:var(--wj-dialog-padding);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wj-dialog-width);height:var(--wj-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wj-dialog-border-radius);border-width:var(--wj-dialog-border-width);border-style:var(--wj-dialog-border-style);border-color:var(--wj-dialog-border-color);margin-top:var(--wj-dialog-margin-top);margin-bottom:var(--wj-dialog-margin-bottom);margin-inline:var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);padding:0}:host(.stick-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 0 0 8px 8px;--wj-dialog-border-width: 0 1px 1px 1px;--wj-dialog-margin-top: 0}:host(.slide-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 8px;--wj-dialog-border-width: 1px}:host(.fill-in){--wj-dialog-width: 100%;--wj-dialog-height: 100%;--wj-dialog-border-radius: 0 0 0 0 !important;--wj-dialog-border-width: 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0}:host(.fill-in) dialog{min-width:var(--wj-dialog-width);min-height:var(--wj-dialog-height)}:host(.slide-left){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 1px 0 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: auto;--wj-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wj-dialog-height)}:host(.slide-right){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 0 0 1px;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wj-dialog-height)}:host(.small){--wj-dialog-width: 300px !important}:host(.medium){--wj-dialog-width: 500px !important}:host(.large){--wj-dialog-width: 600px !important}:host(.ex-large){--wj-dialog-width: 900px !important}
+`;
+class v extends u {
   constructor() {
     super();
-    __publicField(this, "className", "Dialog");
+    m(this, "className", "Dialog");
   }
-  set placement(value) {
-    this.setAttribute("placement", value);
+  set placement(t) {
+    this.setAttribute("placement", t);
   }
   get placement() {
     return this.getAttribute("placement") || "slide-up";
   }
   static get cssStyleSheet() {
-    return styles;
+    return f;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    this.isShadowRoot = "open";
-    WjElementUtils.setAttributesToElement(this, {
-      "test": "test"
+    this.isShadowRoot = "open", x.setAttributesToElement(this, {
+      test: "test"
     });
   }
-  beforeDraw(context, store, params) {
+  beforeDraw(t, s, r) {
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    this.classList.add("modal", "fade", this.placement, params.size);
-    let slot = document.createElement("slot");
-    let dialog = document.createElement("dialog");
-    dialog.classList.add("modal-dialog");
-    let icon = document.createElement("wj-icon");
-    icon.setAttribute("name", "x");
-    icon.setAttribute("slot", "icon-only");
-    let close = document.createElement("wj-button");
-    close.setAttribute("fill", "link");
-    close.setAttribute("size", "small");
-    close.classList.add("close");
-    close.addEventListener("click", () => {
-      dialog.close();
-    });
-    close.appendChild(icon);
-    let header = document.createElement("div");
-    header.setAttribute("part", "header");
-    header.classList.add("dialog-header");
-    header.innerHTML = `<span>${this.title}</span>`;
-    header.appendChild(close);
-    let slotHeader = document.createElement("slot");
-    slotHeader.setAttribute("name", "header");
-    header.appendChild(slotHeader);
-    let body = document.createElement("div");
-    body.setAttribute("part", "body");
-    body.classList.add("dialog-content");
-    body.appendChild(slot);
-    let footer = document.createElement("div");
-    footer.setAttribute("part", "footer");
-    footer.classList.add("dialog-footer");
-    footer.innerHTML = "";
-    let slotFooter = document.createElement("slot");
-    slotFooter.setAttribute("name", "footer");
-    footer.appendChild(slotFooter);
-    dialog.appendChild(header);
-    dialog.appendChild(body);
-    dialog.appendChild(footer);
-    fragment.appendChild(dialog);
-    this.dialog = dialog;
-    return fragment;
+  draw(t, s, r) {
+    let p = document.createDocumentFragment();
+    this.classList.add("modal", "fade", this.placement, r.size);
+    let c = document.createElement("slot"), o = document.createElement("dialog");
+    o.classList.add("modal-dialog");
+    let g = document.createElement("wj-icon");
+    g.setAttribute("name", "x"), g.setAttribute("slot", "icon-only");
+    let a = document.createElement("wj-button");
+    a.setAttribute("fill", "link"), a.setAttribute("size", "small"), a.classList.add("close"), a.addEventListener("click", () => {
+      o.close();
+    }), a.appendChild(g);
+    let d = document.createElement("div");
+    d.setAttribute("part", "header"), d.classList.add("dialog-header"), d.innerHTML = `<span>${this.title}</span>`, d.appendChild(a);
+    let w = document.createElement("slot");
+    w.setAttribute("name", "header"), d.appendChild(w);
+    let n = document.createElement("div");
+    n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(c);
+    let l = document.createElement("div");
+    l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
+    let h = document.createElement("slot");
+    return h.setAttribute("name", "footer"), l.appendChild(h), o.appendChild(d), o.appendChild(n), o.appendChild(l), p.appendChild(o), this.dialog = o, p;
   }
-  afterDraw(context, store, params) {
-    if (params.trigger) {
-      document.addEventListener(params.trigger, () => {
-        this.dialog.showModal();
-      });
-    }
+  afterDraw(t, s, r) {
+    r.trigger && document.addEventListener(r.trigger, () => {
+      this.dialog.showModal();
+    });
   }
 }
-customElements.get("wj-dialog") || window.customElements.define("wj-dialog", Dialog);
+customElements.get("wj-dialog") || window.customElements.define("wj-dialog", v);
 export {
-  Dialog
+  v as Dialog
 };

package/dist/wj-divider.js

@@ -1,19 +1,19 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var n = Object.defineProperty;
+var a = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => (a(r, typeof e != "symbol" ? e + "" : e, t), t);
+import c from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Divider ]\n*/\n:host {\n  --wj-border-size: 1px;\n  --wj-divider-border-color: var(--wj-border-color);\n  --wj-divider-border-width: var(--wj-border-size, 1px);\n  --wj-divider-spacing: 0;\n}\n:host(:not([vertical])) {\n  display: block;\n  border-top: solid var(--wj-divider-border-width) var(--wj-divider-border-color);\n  margin: var(--wj-divider-spacing) 0;\n}\n:host([vertical]) {\n  display: inline-block;\n  height: 100%;\n  border-left: solid var(--wj-divider-border-width) var(--wj-divider-border-color);\n  margin: 0 var(--wj-divider-spacing);\n}";
-class Divider extends WJElement {
+const l = `/*!
+* direction.scss
+*/:host{--wj-border-size: 1px;--wj-divider-border-color: var(--wj-border-color);--wj-divider-border-width: var(--wj-border-size, 1px);--wj-divider-spacing: 0}:host(:not([vertical])){display:block;border-top:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:var(--wj-divider-spacing) 0}:host([vertical]){display:inline-block;height:100%;border-left:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:0 var(--wj-divider-spacing)}
+`;
+class v extends c {
   constructor() {
     super();
-    __publicField(this, "className", "Divider");
+    o(this, "className", "Divider");
   }
   static get cssStyleSheet() {
-    return styles;
+    return l;
   }
   static get observedAttributes() {
     return [];
@@ -21,16 +21,12 @@ class Divider extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    let slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    return fragment;
+  draw(t, w, m) {
+    let i = document.createDocumentFragment(), d = document.createElement("div"), s = document.createElement("slot");
+    return d.appendChild(s), i.appendChild(d), i;
   }
 }
-customElements.get("wj-divider") || window.customElements.define("wj-divider", Divider);
+customElements.get("wj-divider") || window.customElements.define("wj-divider", v);
 export {
-  Divider
+  v as Divider
 };

package/dist/wj-dropdown.js

@@ -1,25 +1,25 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var a = Object.defineProperty;
+var c = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var o = (s, t, e) => (c(s, typeof t != "symbol" ? t + "" : t, e), e);
+import l from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Dropdown ]\n*/";
-class Dropdown extends WJElement {
+const d = `/*!
+* direction.scss
+*/
+`;
+class p extends l {
   constructor() {
     super();
-    __publicField(this, "className", "Dropdown");
+    o(this, "className", "Dropdown");
   }
-  set trigger(value) {
-    this.setAttribute("trigger", value);
+  set trigger(e) {
+    this.setAttribute("trigger", e);
   }
   get trigger() {
     return this.getAttribute("trigger") || "click";
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   static get observedAttributes() {
     return ["active"];
@@ -27,26 +27,17 @@ class Dropdown extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
+  draw(e, u, m) {
+    let i = document.createDocumentFragment();
     this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-dropdown");
-    let popup = document.createElement("wj-popup");
-    popup.setAttribute("placement", this.placement);
-    popup.setAttribute("offset", this.offset);
-    popup.setAttribute("manual", "");
-    popup.innerHTML = `<slot name="trigger" slot="anchor"></slot>
-            <slot></slot>`;
-    if (this.trigger === "click")
-      popup.setAttribute("manual", "");
-    native.appendChild(popup);
-    fragment.appendChild(native);
-    return fragment;
+    let n = document.createElement("div");
+    n.setAttribute("part", "native"), n.classList.add("native-dropdown");
+    let r = document.createElement("wj-popup");
+    return r.setAttribute("placement", this.placement), r.setAttribute("offset", this.offset), r.setAttribute("manual", ""), r.innerHTML = `<slot name="trigger" slot="anchor"></slot>
+            <slot></slot>`, this.trigger === "click" && r.setAttribute("manual", ""), n.appendChild(r), i.appendChild(n), i;
   }
 }
-customElements.get("wj-dropdown") || window.customElements.define("wj-dropdown", Dropdown);
+customElements.get("wj-dropdown") || window.customElements.define("wj-dropdown", p);
 export {
-  Dropdown
+  p as Dropdown
 };