wj-elements 0.0.4 → 0.0.6

package/dist/wj-card-content.js

@@ -1,16 +1,14 @@
-var a = Object.defineProperty;
-var d = (e, t, n) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var s = (e, t, n) => (d(e, typeof t != "symbol" ? t + "" : t, n), n);
+var s = Object.defineProperty;
+var d = (e, t, o) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var r = (e, t, o) => (d(e, typeof t != "symbol" ? t + "" : t, o), o);
 import i from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
-* direction.scss
-*/:host{--wj-card-padding: 0 1rem 1rem;display:block;padding:var(--wj-card-padding)}:host.no-padding .row{margin-left:0;margin-right:0}:host.no-bottom-padding{padding-bottom:0}:host.no-top-padding{padding-top:0}:host .title{margin-top:0}:host.scrollable{margin-bottom:20px}:host h3{line-height:34px;font-size:26px}
+const m = `:host{--wj-card-padding: 0 1rem 1rem;display:block;padding:var(--wj-card-padding)}:host.no-padding .row{margin-left:0;margin-right:0}:host.no-bottom-padding{padding-bottom:0}:host.no-top-padding{padding-top:0}:host .title{margin-top:0}:host.scrollable{margin-bottom:20px}:host h3{line-height:34px;font-size:26px}
 `;
-class c extends i {
+class p extends i {
   constructor() {
     super();
-    s(this, "className", "CardContent");
+    r(this, "className", "CardContent");
   }
   static get cssStyleSheet() {
     return m;
@@ -18,12 +16,12 @@ class c extends i {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(n, p, l) {
-    let o = document.createDocumentFragment(), r = document.createElement("slot");
-    return o.appendChild(r), o;
+  draw(o, c, l) {
+    let n = document.createDocumentFragment(), a = document.createElement("slot");
+    return n.appendChild(a), n;
   }
 }
-customElements.get("wj-card-content") || window.customElements.define("wj-card-content", c);
+customElements.get("wj-card-content") || window.customElements.define("wj-card-content", p);
 export {
-  c as CardContent
+  p as CardContent
 };

package/dist/wj-card-controls.js

@@ -1,16 +1,14 @@
 var a = Object.defineProperty;
 var i = (e, t, o) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var n = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
+var s = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
 import l from "./wj-element.js";
 import "./wj-store.js";
-const c = `/*!
-* direction.scss
-*/:host{--wj-color: #212529;--wj-card-subtitle-font-size: 28px;--wj-card-subtitle-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;font-family:var(--wj-card-subtitle-font-family);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-size:10.5px;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40);-webkit-transition:opacity .3s ease;transition:opacity .3s ease;position:absolute;right:1rem;top:.5rem}
+const c = `:host{--wj-card-subtitle-font-size: 28px;--wj-card-subtitle-font-family: var(--wj-font-family-secondary);font-family:var(--wj-card-subtitle-font-family);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-size:10.5px;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40);transition:opacity .3s ease;position:absolute;right:1rem;top:.5rem}
 `;
 class m extends l {
   constructor() {
     super();
-    n(this, "className", "CardControls");
+    s(this, "className", "CardControls");
   }
   static get cssStyleSheet() {
     return c;
@@ -18,9 +16,9 @@ class m extends l {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(o, p, d) {
-    let s = document.createDocumentFragment(), r = document.createElement("slot");
-    return s.appendChild(r), s;
+  draw(o, d, p) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
   }
 }
 customElements.get("wj-card-controls") || window.customElements.define("wj-card-controls", m);

package/dist/wj-card-header.js

@@ -1,26 +1,24 @@
-var n = Object.defineProperty;
-var d = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var o = (t, e, r) => (d(t, typeof e != "symbol" ? e + "" : e, r), r);
-import c from "./wj-element.js";
+var d = Object.defineProperty;
+var n = (t, e, r) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var s = (t, e, r) => (n(t, typeof e != "symbol" ? e + "" : e, r), r);
+import i from "./wj-element.js";
 import "./wj-store.js";
-const i = `/*!
-* direction.scss
-*/:host{background:transparent;border-radius:0;border-bottom:0;padding:1rem 1rem .5rem;position:relative;display:flex;flex-direction:column;color:var(--wj-color-contrast)}:host(.wj-separator):after{content:"";height:1px;background:rgba(0,0,0,.08);margin-top:.5rem}
+const c = `:host{--wj-card-header-padding: 1rem 1rem .5rem;background:transparent;border-radius:0;border-bottom:0;padding:var(--wj-card-header-padding);position:relative;display:flex;flex-direction:column}:host(.wj-separator):after{content:"";height:1px;background:rgba(0,0,0,.08);margin-top:.5rem}
 `;
-class m extends c {
+class m extends i {
   constructor() {
     super();
-    o(this, "className", "CardHeader");
+    s(this, "className", "CardHeader");
   }
   static get cssStyleSheet() {
-    return i;
+    return c;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(r, l, p) {
-    let a = document.createDocumentFragment(), s = document.createElement("slot");
-    return this.hasAttribute("separator") && this.classList.add("wj-separator"), a.appendChild(s), a;
+  draw(r, p, l) {
+    let a = document.createDocumentFragment(), o = document.createElement("slot");
+    return this.hasAttribute("separator") && this.classList.add("wj-separator"), a.appendChild(o), a;
   }
 }
 customElements.get("wj-card-header") || window.customElements.define("wj-card-header", m);

package/dist/wj-card-subtitle.js

@@ -1,19 +1,17 @@
 var l = Object.defineProperty;
-var c = (s, t, e) => t in s ? l(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var n = (s, t, e) => (c(s, typeof t != "symbol" ? t + "" : t, e), e);
-import m from "./wj-element.js";
+var c = (r, t, e) => t in r ? l(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var s = (r, t, e) => (c(r, typeof t != "symbol" ? t + "" : t, e), e);
+import d from "./wj-element.js";
 import "./wj-store.js";
-const d = `/*!
-* direction.scss
-*/:host{--wj-card-subtitle-font-size: 10.5px;--wj-card-subtitle-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif}:host{-webkit-transition:opacity .3s ease;transition:opacity .3s ease;font-family:var(--wj-card-subtitle-font-family);font-size:var(--wj-card-subtitle-font-size);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)}
+const m = `:host{--wj-card-subtitle-font-size: 10.5px;--wj-card-subtitle-font-family: var(--wj-font-family-secondary);--wj-card-subtitle-padding: 0;transition:opacity .3s ease;font-family:var(--wj-card-subtitle-font-family);font-size:var(--wj-card-subtitle-font-size);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:var(--wj-card-subtitle-padding);line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}
 `;
-class u extends m {
+class u extends d {
   constructor() {
     super();
-    n(this, "className", "CardTitle");
+    s(this, "className", "CardTitle");
   }
   static get cssStyleSheet() {
-    return d;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -21,9 +19,9 @@ class u extends m {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(e, r, i) {
+  beforeDraw(e, i, n) {
   }
-  draw(e, r, i) {
+  draw(e, i, n) {
     let a = document.createDocumentFragment(), o = document.createElement("slot");
     return a.appendChild(o), a;
   }

package/dist/wj-card-title.js

@@ -1,19 +1,17 @@
-var s = Object.defineProperty;
-var l = (e, t, i) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
-var a = (e, t, i) => (l(e, typeof t != "symbol" ? t + "" : t, i), i);
-import o from "./wj-element.js";
+var l = Object.defineProperty;
+var s = (e, t, i) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var a = (e, t, i) => (s(e, typeof t != "symbol" ? t + "" : t, i), i);
+import d from "./wj-element.js";
 import "./wj-store.js";
-const d = `/*!
-* direction.scss
-*/:host{--wj-card-title-font-size: 24px;--wj-card-title-font-weight: 500;--wj-card-title-margin: 0;--wj-card-title-padding: 0;--wj-card-title-line-height: 1.2}:host{font-size:var(--wj-card-title-font-size);font-weight:var(--wj-card-title-font-weight);margin:var(--wj-card-title-margin);padding:var(--wj-card-title-padding);line-height:var(--wj-card-title-line-height);display:block;position:relative}
+const o = `:host{--wj-card-title-font-size: 24px;--wj-card-title-font-weight: 500;--wj-card-title-margin: 0;--wj-card-title-padding: 0;--wj-card-title-line-height: 1.2;font-size:var(--wj-card-title-font-size);font-weight:var(--wj-card-title-font-weight);margin:var(--wj-card-title-margin);padding:var(--wj-card-title-padding);line-height:var(--wj-card-title-line-height);display:block;position:relative}
 `;
-class c extends o {
+class c extends d {
   constructor() {
     super();
     a(this, "className", "CardTitle");
   }
   static get cssStyleSheet() {
-    return d;
+    return o;
   }
   static get observedAttributes() {
     return [];

package/dist/wj-card.js

@@ -1,29 +1,27 @@
-var c = Object.defineProperty;
-var d = (r, o, t) => o in r ? c(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var n = (r, o, t) => (d(r, typeof o != "symbol" ? o + "" : o, t), t);
-import i from "./wj-element.js";
+var n = Object.defineProperty;
+var l = (r, o, a) => o in r ? n(r, o, { enumerable: !0, configurable: !0, writable: !0, value: a }) : r[o] = a;
+var e = (r, o, a) => (l(r, typeof o != "symbol" ? o + "" : o, a), a);
+import d from "./wj-element.js";
 import "./wj-store.js";
-const l = `/*!
-* direction.scss
-*/:host{--wj-card-margin-top: 0;--wj-card-margin-bottom: 1rem;--wj-card-margin-inline: 0;--wj-card-border-color: transparent;--wj-color-base: #fff;--wj-color-contrast: #4b4b4b}:host(.wj-color-primary){--wj-color-base: #7252D3 !important;--wj-color-contrast: #fff !important}:host(.wj-color-complete){--wj-color-base: #0072EC !important;--wj-color-contrast: #fff !important}:host(.wj-color-success){--wj-color-base: #19AD79 !important;--wj-color-contrast: #fff !important}:host(.wj-color-warning){--wj-color-base: #FFd945 !important;--wj-color-contrast: #4b4b4b !important}:host(.wj-color-danger){--wj-color-base: #D83C31 !important;--wj-color-contrast: #fff !important}:host(.wj-color-info){--wj-color-base: #3B4752 !important;--wj-color-contrast: #fff !important}:host(.wj-color-menu){--wj-color-base: #2b303b !important;--wj-color-contrast: #fff !important}:host{background-color:var(--wj-color-base, red);color:var(--wj-color-contrast);-webkit-transition:all .2s ease;transition:all .2s ease;margin-top:var(--wj-card-margin-top);margin-bottom:var(--wj-card-margin-bottom);margin-inline:var(--wj-card-margin-inline);box-shadow:#0000001f 0 4px 16px;border-color:var(--wj-border-color);border-style:var(--wj-border-style);border-width:var(--wj-border-size);border-radius:var(--wj-border-radius);font-family:var(--wj-font-family);font-size:var(--wj-font-size);line-height:var(--wj-line-height);position:relative;width:100%;word-wrap:normal;display:flex;flex-direction:column;contain:content;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host.card-collapsed .card-header .card-controls .card-icon-collapse:before{content:""}:host.card-maximized .card-header .card-controls .card-icon-maximize:before{content:""}:host.card-bordered{border:1px solid rgba(224,224,224,.7)}:host.card-borderless{border:none;box-shadow:none}:host.card-condensed .card-header{padding:9px 13px 0;min-height:32px}:host.card-condensed .card-header .card-title{opacity:.4}:host.card-condensed .card-body{padding:13px}:host.card-hover .card-header .card-title{opacity:.4}:host.card-hover:hover .card-header .card-title{opacity:1}:host.card-transparent{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}:host.card-transparent .card-body{background:transparent}:host.full-height{height:100%}:host.full-height .card-body{height:auto;width:100%;height:100%}:host.card-featured{-webkit-box-shadow:-1px 1px 3px 0px rgba(121,129,135,.14);box-shadow:-1px 1px 3px #79818724;width:calc(100% - 50px);float:right}:host.card-featured .card-title h4{font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;text-transform:uppercase;color:inherit}:host.card-featured .card-body h3{line-height:34px;font-size:26px}:host.card-featured .footer .username{line-height:8px;padding-top:10px;font-size:16px}:host.card-featured .footer .buttons li{display:inline;list-style:none;font-weight:700;margin-left:20px}:host.card-featured .footer .buttons li:first-child{margin-left:0}:host.card-featured .footer .buttons .heart{color:#d83c31}:host.card-featured .footer .buttons .comment{color:#4b4b4b}:host.card-featured .ribbon{width:38px;height:38px;margin-left:-39px;float:left;-webkit-box-shadow:inset -3px 0px 3px 0px rgba(0,0,0,.14);box-shadow:inset -3px 0 3px #00000024}:host.card-featured .ribbon.green{background:#0072EC}:host.card-featured .ribbon.blue{background:#19AD79}:host.hover-fill:hover{background:#f4f4f4}:host.hover-stroke:hover{border:1px solid #e0e0e0}:host(.wj-color){background-color:var(--wj-color-base, red);color:var(--wj-color-contrast)}
+const i = `:host{--wj-card-margin-top: 0;--wj-card-margin-bottom: 1rem;--wj-card-margin-inline: 0;--wj-card-border-color: transparent}:host(.wj-color-primary){--wj-card-background: var(--wj-color-primary)}:host(.wj-color-complete){--wj-card-background: var(--wj-color-complete)}:host(.wj-color-success){--wj-card-background: var(--wj-color-success)}:host(.wj-color-warning){--wj-card-background: var(--wj-color-warning)}:host(.wj-color-danger){--wj-card-background: var(--wj-color-danger)}:host(.wj-color-info){--wj-card-background: var(--wj-color-info)}:host(.wj-color-menu){--wj-card-background: var(--wj-color-menu)}:host(.wj-color-primary){--wj-card-color: var(--wj-color-white)}:host(.wj-color-complete){--wj-card-color: var(--wj-color-white)}:host(.wj-color-success){--wj-card-color: var(--wj-color-white)}:host(.wj-color-warning){--wj-card-color: var(--wj-color)}:host(.wj-color-danger){--wj-card-color: var(--wj-color-white)}:host(.wj-color-info){--wj-card-color: var(--wj-color-white)}:host(.wj-color-menu){--wj-card-color: var(--wj-color-white) !important}:host{background-color:var(--wj-card-background);color:var(--wj-card-color)!important;margin-top:var(--wj-card-margin-top);margin-bottom:var(--wj-card-margin-bottom);margin-inline:var(--wj-card-margin-inline);box-shadow:var(--wj-box-shadow-large);border-color:var(--wj-border-color);border-style:var(--wj-border-style);border-width:var(--wj-border-size);border-radius:var(--wj-border-radius-medium);font-family:var(--wj-font-family);font-size:var(--wj-font-size);line-height:var(--wj-line-height);position:relative;width:100%;word-wrap:normal;display:flex;flex-direction:column;contain:content;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host(.wj-color){background-color:var(--wj-card-background, #fff);color:var(--wj-card-color)}
 `;
-class h extends i {
+class s extends d {
   constructor() {
     super();
-    n(this, "className", "Card");
+    e(this, "className", "Card");
   }
   static get cssStyleSheet() {
-    return l;
+    return i;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, b, e) {
-    let a = document.createDocumentFragment(), s = document.createElement("slot");
-    return e.color && this.classList.add("wj-color-" + e.color, "wj-color"), a.appendChild(s), a;
+  draw(a, j, c) {
+    let t = document.createDocumentFragment(), w = document.createElement("slot");
+    return c.color && this.classList.add("wj-color-" + c.color, "wj-color"), t.appendChild(w), t;
   }
 }
-customElements.get("wj-card") || window.customElements.define("wj-card", h);
+customElements.get("wj-card") || window.customElements.define("wj-card", s);
 export {
-  h as Card
+  s as Card
 };

package/dist/wj-carousel-item.js

@@ -0,0 +1,32 @@
+var n = Object.defineProperty;
+var l = (e, t, s) => t in e ? n(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var r = (e, t, s) => (l(e, typeof t != "symbol" ? t + "" : t, s), s);
+import c from "./wj-element.js";
+import "./wj-store.js";
+const m = `:host{--aspect-ratio: inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;width:var(--wj-carousel-size, 100%);max-height:100%;aspect-ratio:var(--aspect-ratio);scroll-snap-align:center;scroll-snap-stop:always}.native-carousel-item{width:100%;height:100%;display:flex}::slotted(wj-img){width:100%!important;height:100%!important;object-fit:contain;display:flex}
+`;
+class d extends c {
+  constructor() {
+    super();
+    r(this, "className", "CarouselItem");
+  }
+  static get cssStyleSheet() {
+    return m;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(s, u, p) {
+    let i = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("native-carousel-item"), a.setAttribute("part", "native");
+    let o = document.createElement("slot");
+    return a.appendChild(o), i.appendChild(a), i;
+  }
+}
+customElements.get("wj-carousel-item") || window.customElements.define("wj-carousel-item", d);
+export {
+  d as CarouselItem
+};

package/dist/wj-carousel.js

@@ -0,0 +1,178 @@
+var g = Object.defineProperty;
+var p = (o, a, e) => a in o ? g(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 v from "./wj-element.js";
+import "./wj-store.js";
+const b = `/*!
+* direction.scss
+*/:host{--wj-scroll-hint: 0px;--wj-carousel-width: 100%;--wj-carousel-height: auto}.native-carousel{position:relative;width:var(--wj-carousel-width, 100%);height:var(--wj-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(--wj-aspect-ratio, 4/3);scroll-snap-type:x mandatory;scroll-padding-inline:0;overflow-y:hidden;padding-inline:var(--wj-spacing-inline, 0);gap:.5rem}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wj-carousel-item){flex:0 0 var(--wj-carousel-size, 100%);height:100%}wj-button{position:absolute;top:50%;border:none;cursor:pointer;z-index:2}.prev{left:-1rem;transform:translate(-100%,-50%)}.next{right:-.5rem;transform:translate(100%,-50%)}.pagination{position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%,100%);display:flex;z-index:2}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wj-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wj-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 wj-thumbnail{--wj-thumbnail-width: 48px;--wj-thumbnail-height: 48px;--wj-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wj-color-primary-11)}
+`;
+class f extends v {
+  constructor() {
+    super();
+    u(this, "className", "Carousel");
+    this.activeSlide = 0, this.slidePerPage = 1;
+  }
+  set activeSlide(e) {
+    this.setAttribute("active-slide", e);
+  }
+  get activeSlide() {
+    return +this.getAttribute("active-slide") || 0;
+  }
+  get pagination() {
+    return this.hasAttribute("pagination");
+  }
+  get navigation() {
+    return this.hasAttribute("navigation");
+  }
+  get thumbnails() {
+    return this.hasAttribute("thumbnails");
+  }
+  get loop() {
+    return this.hasAttribute("loop");
+  }
+  static get cssStyleSheet() {
+    return b;
+  }
+  static get observedAttributes() {
+    return ["active-slide"];
+  }
+  attributeChangedCallback(e, i, n) {
+    e === "active-slide" && (this.pagination && this.changePagination(), this.thumbnails && this.changeThumbnails());
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, i, n) {
+    let r = document.createDocumentFragment(), t = document.createElement("div");
+    t.classList.add("native-carousel");
+    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, this.cloneFirstAndLastItems(), r;
+  }
+  setIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver((e) => {
+      e.forEach((i) => {
+        this.entriesMap.set(i.target, i);
+      });
+    }, {
+      root: this.context.querySelector(".carousel-slides"),
+      threshold: 0.5
+    }), this.entriesMap = /* @__PURE__ */ new Map(), this.records = this.intersectionObserver.takeRecords(), this.records.forEach((e) => {
+      this.entriesMap.set(e.target, e);
+    });
+  }
+  afterDraw() {
+    this.setIntersectionObserver(), this.getSlidesWithClones().forEach((i, n) => {
+      this.intersectionObserver.observe(i);
+    }), this.slidePerPage = this.getAttribute("slide-per-page") || 1;
+    let e = 100 / +this.slidePerPage;
+    this.style.setProperty("--wj-carousel-size", e + "%"), this.goToSlide(this.activeSlide, "auto"), this.slides.addEventListener("scrollend", (i) => {
+      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");
+        this.activeSlide = s, this.goToSlide(+s, "auto");
+      } else if (t) {
+        let s = n.indexOf(t.target);
+        this.activeSlide = s;
+      }
+    });
+  }
+  goToSlide(e, i = "smooth", n = !0) {
+    const r = this.getSlides(), t = this.getSlidesWithClones();
+    t.forEach((m, S) => {
+      m.classList.remove("active");
+    });
+    let s = this.loop ? (e + r.length) % r.length : Math.min(Math.max(e, 0), r.length - 1);
+    this.activeSlide = s;
+    const l = Math.min(Math.max(e + (this.loop ? this.slidePerPage : 0), 0), t.length - 1), c = this.getSlidesWithClones()[l];
+    c.classList.add("active");
+    let d = c.getBoundingClientRect(), h = this.slides.getBoundingClientRect();
+    this.slides.scrollTo({
+      left: d.left - h.left + this.slides.scrollLeft,
+      top: d.top - h.top + this.slides.scrollTop,
+      behavior: i === "smooth" ? "smooth" : "auto"
+    });
+  }
+  cloneFirstAndLastItems() {
+    const e = this.getSlides();
+    if (e.length && this.loop) {
+      const i = e[0].cloneNode(!0);
+      i.classList.add("clone"), i.setAttribute("clone-index", 0), this.appendChild(i);
+      const n = e[e.length - 1].cloneNode(!0);
+      n.classList.add("clone"), n.setAttribute("clone-index", e.length - 1), this.insertBefore(n, this.firstChild);
+    }
+  }
+  removeActiveSlide() {
+    this.getSlidesWithClones().forEach((e, i) => {
+      e.classList.remove("active");
+    }), this.pagination && this.context.querySelectorAll(".pagination-item").forEach((e) => {
+      e.classList.remove("active");
+    }), this.thumbnails && this.context.querySelectorAll("wj-thumbnail").forEach((e) => {
+      e.classList.remove("active");
+    });
+  }
+  changePagination() {
+    this.pagination && (this.removeActiveSlide(), this.context.querySelectorAll(".pagination-item").forEach((e, i) => {
+      i === this.activeSlide && e.classList.add("active");
+    }));
+  }
+  changeThumbnails() {
+    this.thumbnails && (this.removeActiveSlide(), this.context.querySelectorAll("wj-thumbnail").forEach((e, i) => {
+      i === this.activeSlide && e.classList.add("active");
+    }));
+  }
+  createNextButton() {
+    const e = document.createElement("wj-button");
+    return e.classList.add("next"), e.innerHTML = '<wj-icon name="chevron-right" size="large"></wj-icon', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+      this.nextSlide();
+    }), e;
+  }
+  createPreviousButton() {
+    const e = document.createElement("wj-button");
+    return e.classList.add("prev"), e.innerHTML = '<wj-icon name="chevron-left" size="large"></wj-icon', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+      this.previousSlide();
+    }), e;
+  }
+  createPagination() {
+    const e = document.createElement("div");
+    return e.classList.add("pagination"), this.getSlides().forEach((n, r) => {
+      const t = document.createElement("div");
+      t.classList.add("pagination-item"), t.addEventListener("click", (s) => {
+        this.removeActiveSlide(), s.target.classList.add("active"), this.goToSlide(r);
+      }), e.appendChild(t);
+    }), e;
+  }
+  createThumbnails() {
+    const e = document.createElement("div");
+    return e.classList.add("thumbnails"), this.getSlides().forEach((n, r) => {
+      const t = document.createElement("wj-thumbnail");
+      t.innerHTML = `<img src="${n.querySelector("wj-img").getAttribute("src")}"></img>`, t.addEventListener("click", (s) => {
+        this.removeActiveSlide(), s.target.closest("wj-thumbnail").classList.add("active"), this.goToSlide(r);
+      }), e.appendChild(t);
+    }), e;
+  }
+  nextSlide() {
+    this.goToSlide(this.activeSlide + this.slidePerPage);
+  }
+  previousSlide() {
+    this.goToSlide(this.activeSlide - this.slidePerPage);
+  }
+  getSlides() {
+    return Array.from(this.querySelectorAll("wj-carousel-item:not(.clone)"));
+  }
+  getSlidesWithClones() {
+    return Array.from(this.querySelectorAll("wj-carousel-item"));
+  }
+  canGoNext() {
+    return this.querySelector(".native-carousel").scrollLeft < this.querySelector(".native-carousel").scrollWidth;
+  }
+  canGoPrevious() {
+    return this.querySelector(".native-carousel").scrollLeft > 0;
+  }
+}
+customElements.get("wj-carousel") || window.customElements.define("wj-carousel", f);
+export {
+  f as Carousel
+};

package/dist/wj-checkbox.js

@@ -1,17 +1,17 @@
-var b = Object.defineProperty;
-var l = (c, t, e) => t in c ? b(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var n = (c, t, e) => (l(c, typeof t != "symbol" ? t + "" : t, e), e);
-import h, { event as r } from "./wj-element.js";
+var l = Object.defineProperty;
+var b = (c, t, e) => t in c ? l(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var i = (c, t, e) => (b(c, typeof t != "symbol" ? t + "" : t, e), e);
+import h, { event as n } from "./wj-element.js";
 import "./wj-store.js";
 const s = `/*!
 * direction.scss
-*/:host{--wj-checkbox-margin-top: 0;--wj-checkbox-margin-bottom: .5rem;--wj-checkbox-margin-inline: 0;--wj-checkbox-width: 16px;--wj-checkbox-height: 16px;display:block;margin-top:var(--wj-checkbox-margin-top);margin-bottom:var(--wj-checkbox-margin-bottom);margin-inline:var(--wj-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;min-width:var(--wj-checkbox-width);min-height:var(--wj-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:#fff;border:1px solid #c9c9c9}.native-checkbox label{transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox label:hover{color:#212121}.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:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;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:#212121}.native-checkbox input[type=checkbox]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:#4b4b4b;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:#4b4b4b;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:#19ad79;background-color:#19ad79}.primary input[type=checkbox]:checked+label:before,.primary input[type=checkbox]:indeterminate+label:before{border-color:#7252d3;background-color:#7252d3}.complete input[type=checkbox]:checked+label:before,.complete input[type=checkbox]:indeterminate+label:before{border-color:#0072ec;background-color:#0072ec}.warning input[type=checkbox]:checked+label:before,.warning input[type=checkbox]:indeterminate+label:before{border-color:#ffd945;background-color:#ffd945}.danger input[type=checkbox]:checked+label:before,.danger input[type=checkbox]:indeterminate+label:before{border-color:#d83c31;background-color:#d83c31}.info input[type=checkbox]:checked+label:before,.info input[type=checkbox]:indeterminate+label:before{border-color:#3b4752;background-color:#3b4752}.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:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center}.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:#fff}@keyframes shrink-bounce{0%{transform:scale(1)}33%{transform:scale(.85)}to{transform:scale(1)}}@keyframes checkbox-check{0%{background-position:0px}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:#7252D3!important;font-size:50px}
+*/:host{--wj-grey-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wj-white-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wj-checkbox-margin-top: 0;--wj-checkbox-margin-bottom: .5rem;--wj-checkbox-margin-inline: 0;--wj-checkbox-width: 16px;--wj-checkbox-height: 16px;display:block;margin-top:var(--wj-checkbox-margin-top);margin-bottom:var(--wj-checkbox-margin-bottom);margin-inline:var(--wj-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;min-width:var(--wj-checkbox-width);min-height:var(--wj-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(--wj-color-contrast-lowest);border:1px solid var(--wj-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(--wj-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(--wj-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(--wj-color-contrast-higher)}.native-checkbox input[type=checkbox]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wj-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(--wj-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(--wj-color-success);background-color:var(--wj-color-success)}.primary input[type=checkbox]:checked+label:before,.primary input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-primary);background-color:var(--wj-color-primary)}.complete input[type=checkbox]:checked+label:before,.complete input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-complete);background-color:var(--wj-color-complete)}.warning input[type=checkbox]:checked+label:before,.warning input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-warning);background-color:var(--wj-color-warning)}.danger input[type=checkbox]:checked+label:before,.danger input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-danger);background-color:var(--wj-color-danger)}.info input[type=checkbox]:checked+label:before,.info input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-info);background-color:var(--wj-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(--wj-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(--wj-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(--wj-color-primary)!important;font-size:50px}
 `;
 class d extends h {
   constructor() {
     super();
-    n(this, "className", "Checkbox");
-    n(this, "inputEvent", (e) => {
+    i(this, "className", "Checkbox");
+    i(this, "inputEvent", (e) => {
       this.checked = e.target.checked;
     });
     this._checked = !1;
@@ -34,14 +34,14 @@ class d extends h {
   draw(e, p, k) {
     let a = 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");
-    let i = document.createElement("label");
-    return i.htmlFor = "checkbox", i.innerHTML = "<slot></slot>", o.appendChild(this.input), o.appendChild(i), a.appendChild(o), a;
+    let r = document.createElement("label");
+    return r.htmlFor = "checkbox", r.innerHTML = "<slot></slot>", o.appendChild(this.input), o.appendChild(r), a.appendChild(o), a;
   }
   afterDraw() {
-    r.addListener(this, "click", "wj:checkbox:change"), r.addListener(this, "click", "wj:checkbox:input");
+    n.addListener(this, "click", "wj:checkbox:change"), n.addListener(this, "click", "wj:checkbox:input");
   }
   disconnectedCallback() {
-    r.removeElement(this);
+    n.removeElement(this);
   }
 }
 customElements.get("wj-checkbox") || window.customElements.define("wj-checkbox", d);

package/dist/wj-chip.js

@@ -1,36 +1,36 @@
 var l = Object.defineProperty;
-var d = (o, t, e) => t in o ? l(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var c = (o, t, e) => (d(o, typeof t != "symbol" ? t + "" : t, e), e);
-import p, { event as h } from "./wj-element.js";
+var d = (r, o, t) => o in r ? l(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var n = (r, o, t) => (d(r, typeof o != "symbol" ? o + "" : o, t), t);
+import w, { event as h } from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
+const j = `/*!
 * direction.scss
-*/:host(.wj-color-primary){--wj-color-base: #eae0fb !important;--wj-color-contrast: #845ae0 !important}:host(.wj-color-complete){--wj-color-base: #d3eeff !important;--wj-color-contrast: #0f8ff9 !important}:host(.wj-color-success){--wj-color-base: #d6f7f0 !important;--wj-color-contrast: #26bf93 !important}:host(.wj-color-warning){--wj-color-base: #fffde1 !important;--wj-color-contrast: #ffe858 !important}:host(.wj-color-danger){--wj-color-base: #fde2da !important;--wj-color-contrast: #e6533c !important}:host(.wj-color-info){--wj-color-base: #dbe6e8 !important;--wj-color-contrast: #475b6b !important}:host(.wj-color-menu){--wj-color-base: #f4f4f4 !important;--wj-color-contrast: #21252d !important}:host{--wj-chip-border-radius: 100px;--wj-chip-background: #e0e0e0;--wj-chip-color: #4b4b4b;--wj-chip-margin: 0;margin:var(--wj-chip-margin)}.native-chip{display:inline-flex;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Inter UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;font-size:14px;letter-spacing:-.006em;margin:0;padding:.5rem .75rem;text-align:center;cursor:pointer;white-space:nowrap;background:var(--wj-chip-background);color:var(--wj-chip-color);text-shadow:none;box-shadow:none;border:0 none;line-height:14px;min-height:28px;height:28px;width:100%;max-width:fit-content;min-width:28px;position:relative;transition:width .15s cubic-bezier(.4,0,.2,1);border-radius:var(--wj-chip-border-radius);overflow:hidden;vertical-align:middle;box-sizing:border-box}:host(.focus){box-shadow:none}:host(:hover:not(.wj-active)) .native-chip{background:#f4f4f4;color:#4b4b4b}:host(.wj-active) .native-chip{background:red;border:1px solid rgba(33,33,33,.2);border-bottom:1px solid rgba(33,33,33,.29);color:#4b4b4b}:host(:focus,:active:focus,.wj-active:focus){outline:none!important;box-shadow:0 0 #78c8fe}.check{display:none}:host([active]) .check{display:block;margin-inline:4px 0}:host(.wj-disabled){background:#f4f4f4;color:#757575;border:0;pointer-events:none;cursor:not-allowed}::slotted(wj-avatar){width:22px;height:22px}::slotted(wj-avatar:first-child){margin-inline:-8px 8px;margin-top:-4px;margin-bottom:-4px}:host(.wj-color) .native-chip{background-color:var(--wj-color-base, red);color:var(--wj-color-contrast)}::slotted(wj-icon:first-child){margin:-4px 8px -4px -4px}::slotted(wj-icon:last-child){margin:-4px -4px -4px 8px}wj-button{--wj-button-border-radius: 50%;--wj-button-margin-inline: .25rem -.5rem;--wj-padding-top: .15rem;--wj-padding-start: .15rem;--wj-padding-end: .15rem;--wj-padding-bottom: .15rem}
+*/:host{--wj-chip-border-radius: 100px;--wj-chip-background: var();--wj-chip-color: #4b4b4b;--wj-chip-margin: 0;--wj-card-background: var(--wj-color-contrast-2);--wj-card-color: var(--wj-color);margin:var(--wj-chip-margin)}:host(.wj-color-primary){--wj-card-background: var(--wj-color-primary)}:host(.wj-color-complete){--wj-card-background: var(--wj-color-complete)}:host(.wj-color-success){--wj-card-background: var(--wj-color-success)}:host(.wj-color-warning){--wj-card-background: var(--wj-color-warning)}:host(.wj-color-danger){--wj-card-background: var(--wj-color-danger)}:host(.wj-color-info){--wj-card-background: var(--wj-color-info)}:host(.wj-color-menu){--wj-card-background: var(--wj-color-menu)}:host(.wj-color-primary){--wj-card-color: var(--wj-color-white)}:host(.wj-color-complete){--wj-card-color: var(--wj-color-white)}:host(.wj-color-success){--wj-card-color: var(--wj-color-white)}:host(.wj-color-warning){--wj-card-color: var(--wj-color)}:host(.wj-color-danger){--wj-card-color: var(--wj-color-white)}:host(.wj-color-info){--wj-card-color: var(--wj-color-white)}:host(.wj-color-menu){--wj-card-color: var(--wj-color-white) !important}.native-chip{display:inline-flex;justify-content:center;align-items:center;font-size:14px;letter-spacing:-.006em;margin:0;padding:.5rem .75rem;text-align:center;cursor:pointer;white-space:nowrap;background:var(--wj-chip-background);color:var(--wj-chip-color);text-shadow:none;box-shadow:none;border:0 none;line-height:14px;min-height:28px;height:28px;width:100%;max-width:fit-content;min-width:28px;position:relative;transition:width .15s cubic-bezier(.4,0,.2,1);border-radius:var(--wj-chip-border-radius);overflow:hidden;vertical-align:middle;box-sizing:border-box}:host(.focus){box-shadow:none}:host(:hover:not(.wj-active)) .native-chip{background:var(--wj-color-contrast-3);color:var(--wj-color)}:host(.wj-active) .native-chip{border:1px solid rgba(33,33,33,.2)}:host(:focus,:active:focus,.wj-active:focus){outline:none!important;box-shadow:0 0 #78c8fe}.check{display:none}:host([active]) .check{display:block;margin-inline:4px 0}:host(.wj-disabled){background:#f4f4f4;color:#757575;border:0;pointer-events:none;cursor:not-allowed}::slotted(wj-avatar){width:22px;height:22px}::slotted(wj-avatar:first-child){margin-inline:-8px 8px;margin-top:-4px;margin-bottom:-4px}:host .native-chip{background-color:var(--wj-card-background, #fff);color:var(--wj-card-color)}::slotted(wj-icon:first-child){margin:-4px 8px -4px -4px}::slotted(wj-icon:last-child){margin:-4px -4px -4px 8px}wj-button{--wj-button-border-radius: 50%;--wj-button-margin-inline: .25rem -.5rem;--wj-padding-top: .15rem;--wj-padding-start: .15rem;--wj-padding-end: .15rem;--wj-padding-bottom: .15rem}
 `;
-class w extends p {
+class p extends w {
   constructor() {
     super();
-    c(this, "className", "Chip");
+    n(this, "className", "Chip");
   }
   static get cssStyleSheet() {
-    return m;
+    return j;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, b, j) {
-    let a = document.createDocumentFragment(), r = document.createElement("div");
-    r.classList.add("native-chip");
-    let s = document.createElement("slot"), i = document.createElement("wj-button");
-    i.setAttribute("part", "remove"), i.setAttribute("variant", "link"), i.innerHTML = '<wj-icon name="x"></wj-icon>';
-    let n = document.createElement("wj-icon");
-    return n.setAttribute("name", "check"), n.classList.add("check"), this.color && this.classList.add("wj-color-" + this.color, "wj-color"), this.disabled && this.classList.add("wj-disabled"), this.outline && this.classList.add("wj-outline"), r.appendChild(s), r.appendChild(n), this.hasAttribute("removable") && r.appendChild(i), a.appendChild(r), this.remove = i, a;
+  draw(t, m, u) {
+    let a = document.createDocumentFragment(), e = document.createElement("div");
+    e.classList.add("native-chip");
+    let s = document.createElement("slot"), c = document.createElement("wj-button");
+    c.setAttribute("part", "remove"), c.setAttribute("fill", "link"), c.innerHTML = '<wj-icon name="x"></wj-icon>';
+    let i = document.createElement("wj-icon");
+    return i.setAttribute("name", "check"), i.classList.add("check"), this.color && this.classList.add("wj-color-" + this.color, "wj-color"), this.disabled && this.classList.add("wj-disabled"), this.outline && this.classList.add("wj-outline"), e.appendChild(s), e.appendChild(i), this.hasAttribute("removable") && e.appendChild(c), a.appendChild(e), this.remove = c, a;
   }
   afterDraw() {
     h.addListener(this.remove, "click", "wj:chip-remove", null, { stopPropagation: !0 });
   }
 }
-customElements.get("wj-chip") || window.customElements.define("wj-chip", w);
+customElements.get("wj-chip") || window.customElements.define("wj-chip", p);
 export {
-  w as Chip
+  p as Chip
 };