wj-elements 0.1.48 → 0.1.49

package/dist/wje-card-header.js

@@ -0,0 +1,47 @@
+var n = Object.defineProperty;
+var i = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var s = (t, e, r) => (i(t, typeof e != "symbol" ? e + "" : e, r), r);
+import o from "./wje-element.js";
+const c = ':host{background:transparent;border-radius:0;border-bottom:0;padding:var(--wje-card-header-padding);position:relative;display:flex;flex-direction:column}:host(.wje-separator):after{content:"";height:1px;background:#00000014;margin-top:.5rem}';
+class l extends o {
+  /**
+   * CardHeader constructor.
+   */
+  constructor() {
+    super();
+    /**
+     * Class name for the CardHeader.
+     * @type {string}
+     */
+    s(this, "className", "CardHeader");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {Object} The styles object.
+   * @static
+   */
+  static get cssStyleSheet() {
+    return c;
+  }
+  /**
+   * Sets up the attributes for the CardHeader.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the CardHeader.
+   * @param {Object} context - The context to draw in.
+   * @param {Object} store - The store to use.
+   * @param {Object} params - The parameters to use.
+   * @returns {DocumentFragment} The created document fragment.
+   */
+  draw(r, p, m) {
+    let a = document.createDocumentFragment(), d = document.createElement("slot");
+    return this.hasAttribute("separator") && this.classList.add("wje-separator"), a.appendChild(d), a;
+  }
+}
+o.define("wje-card-header", l);
+export {
+  l as default
+};

package/dist/wje-card-subtitle.js

@@ -0,0 +1,55 @@
+var o = Object.defineProperty;
+var l = (e, t, a) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var s = (e, t, a) => (l(e, typeof t != "symbol" ? t + "" : t, a), a);
+import i from "./wje-element.js";
+const c = ":host{transition:opacity .3s ease;font-family:var(--wje-card-subtitle-font-family);font-size:var(--wje-card-subtitle-font-size);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:var(--wje-card-subtitle-padding);line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}";
+class d extends i {
+  /**
+   * CardSubtitle constructor.
+   */
+  constructor() {
+    super();
+    /**
+     * Class name for the CardSubtitle.
+     * @type {string}
+     */
+    s(this, "className", "CardTitle");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {Object} The styles object.
+   * @static
+   */
+  static get cssStyleSheet() {
+    return c;
+  }
+  /**
+   * Getter for the observed attributes.
+   * @returns {Array} An empty array.
+   * @static
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the CardSubtitle.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the CardSubtitle.
+   * @param {Object} context - The context to draw in.
+   * @param {Object} store - The store to use.
+   * @param {Object} params - The parameters to use.
+   * @returns {DocumentFragment} The created document fragment.
+   */
+  draw(a, m, p) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
+  }
+}
+i.define("wje-card-subtitle", d);
+export {
+  d as default
+};

package/dist/wje-card-title.js

@@ -0,0 +1,55 @@
+var l = Object.defineProperty;
+var o = (e, t, r) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var i = (e, t, r) => (o(e, typeof t != "symbol" ? t + "" : t, r), r);
+import n from "./wje-element.js";
+const d = ":host{font-size:var(--wje-card-title-font-size);font-weight:var(--wje-card-title-font-weight);margin:var(--wje-card-title-margin);padding:var(--wje-card-title-padding);line-height:var(--wje-card-title-line-height);display:block;position:relative}";
+class c extends n {
+  /**
+   * CardTitle constructor.
+   */
+  constructor() {
+    super();
+    /**
+     * Class name for the CardTitle.
+     * @type {string}
+     */
+    i(this, "className", "CardTitle");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {Object} The styles object.
+   * @static
+   */
+  static get cssStyleSheet() {
+    return d;
+  }
+  /**
+   * Getter for the observed attributes.
+   * @returns {Array} An empty array.
+   * @static
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the CardTitle.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the CardTitle.
+   * @param {Object} context - The context to draw in.
+   * @param {Object} store - The store to use.
+   * @param {Object} params - The parameters to use.
+   * @returns {DocumentFragment} The created document fragment.
+   */
+  draw(r, m, g) {
+    let a = document.createDocumentFragment(), s = document.createElement("slot");
+    return a.appendChild(s), a;
+  }
+}
+n.define("wje-card-title", c);
+export {
+  c as default
+};

package/dist/wje-card.js

@@ -0,0 +1,50 @@
+var s = Object.defineProperty;
+var i = (o, r, e) => r in o ? s(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e;
+var l = (o, r, e) => (i(o, typeof r != "symbol" ? r + "" : r, e), e);
+import n from "./wje-element.js";
+const w = ":host{width:100%}.native-card{background-color:transparent;margin:0;box-shadow:var(--wje-card-shadow);border-color:var(--wje-border-color);border-style:var(--wje-border-style);border-width:var(--wje-border-width);border-radius:var(--wje-card-border-radius);font-family:var(--wje-font-family);font-size:var(--wje-font-size);line-height:var(--wje-line-height-normal);position:relative;width:100%;word-wrap:normal;display:flex;flex-direction:column;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.native-card.wje-color-primary{background:var(--wje-color-primary-9);color:var(--wje-color-contrast-0);border-color:var(--wje-color-primary-9)}.native-card.wje-color-complete{background:var(--wje-color-complete-9);color:var(--wje-color-contrast-0);border-color:var(--wje-color-complete-9)}.native-card.wje-color-success{background:var(--wje-color-success-9);color:var(--wje-color-contrast-0);border-color:var(--wje-color-success-9)}.native-card.wje-color-warning{background:var(--wje-color-warning-9);color:var(--wje-color);border-color:var(--wje-color-warning-9)}.native-card.wje-color-danger{background:var(--wje-color-danger-9);color:var(--wje-color-contrast-0);border-color:var(--wje-color-danger-9)}.native-card.wje-color-info{background:var(--wje-color-info-9);color:var(--wje-color-contrast-0);border-color:var(--wje-color-info-9)}.native-card.wje-color-menu{background:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0);border-color:var(--wje-color-contrast-9)}";
+class v extends n {
+  /**
+   * Card constructor
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Class name
+     * @type {string}
+     */
+    l(this, "className", "Card");
+  }
+  /**
+   * Get CSS stylesheet
+   * @static
+   * @returns {Object} styles - The CSS styles
+   */
+  static get cssStyleSheet() {
+    return w;
+  }
+  /**
+   * Setup attributes
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   * @returns {Object} fragment - The document fragment
+   */
+  draw(e, j, c) {
+    let t = document.createDocumentFragment(), a = document.createElement("div");
+    a.setAttribute("part", "native"), a.classList.add("native-card");
+    let d = document.createElement("slot");
+    return c.color && a.classList.add("wje-color-" + c.color), a.appendChild(d), t.appendChild(a), t;
+  }
+}
+n.define("wje-card", v);
+export {
+  v as default
+};

package/dist/wje-carousel-item.js

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

package/dist/wje-carousel.js

@@ -0,0 +1,177 @@
+var v = Object.defineProperty;
+var p = (o, a, e) => a in o ? v(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
+var u = (o, a, e) => (p(o, typeof a != "symbol" ? a + "" : a, e), e);
+import m from "./wje-element.js";
+const b = ".native-carousel{position:relative;width:var(--wje-carousel-width, 100%);height:var(--wje-carousel-height, 300px);scroll-behavior:smooth}.carousel-slides{display:flex;transition:transform .5s ease;align-items:center;justify-items:center;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:var(--wje-aspect-ratio, 4 / 3);scroll-snap-type:x mandatory;scroll-padding-inline:0;overflow-y:hidden;padding-inline:var(--wje-spacing-inline, 0);gap:.5rem}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wje-carousel-item){flex:0 0 var(--wje-carousel-size);height:100%}wje-button{position:absolute;top:50%;border:none;cursor:pointer;z-index:2}.prev{left:-1rem;transform:translate(-100%,-50%)}.next{right:-1rem;transform:translate(100%,-50%)}.pagination{position:relative;bottom:-.5rem;left:50%;transform:translate(-50%,100%);display:flex;z-index:2;justify-content:center}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wje-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wje-color)}.thumbnails{display:flex;justify-content:center;align-items:center;overflow-x:auto;gap:.5rem;padding:0 .5rem;margin-top:.5rem;margin-bottom:.5rem;box-sizing:border-box;overflow-y:hidden}.thumbnails wje-thumbnail{--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wje-color-primary-11)}";
+class f extends m {
+  constructor() {
+    super();
+    u(this, "className", "Carousel");
+    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";
+  }
+  beforeDraw(e, i, n) {
+    this.cloneFirstAndLastItems();
+  }
+  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 && (this.prevButton = this.createPreviousButton(), this.nextButton = this.createNextButton(), t.appendChild(this.prevButton), t.appendChild(this.nextButton)), this.pagination && t.appendChild(this.createPagination()), this.thumbnails && t.appendChild(this.createThumbnails()), r.appendChild(t), this.slides = s, r;
+  }
+  afterDraw() {
+    this.setIntersectionObserver(), this.getSlidesWithClones().forEach((i, n) => {
+      this.intersectionObserver.observe(i);
+    }), this.slidePerPage = this.getAttribute("slide-per-page") || 1;
+    let e = 100 / +this.slidePerPage;
+    this.style.setProperty("--wje-carousel-size", e + "%"), this.goToSlide(this.activeSlide, "auto"), this.slides.addEventListener("scrollend", (i) => {
+      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.goToSlide(s, "auto"), this.activeSlide = s;
+      } else if (t) {
+        let s = n.indexOf(t.target);
+        this.activeSlide = s;
+      }
+    });
+  }
+  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);
+    });
+  }
+  goToSlide(e, i = "smooth", n = !0) {
+    const r = this.getSlides(), t = this.getSlidesWithClones();
+    t.forEach((g, S) => {
+      g.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"
+    }), this.navigation && !this.loop && (this.nextButton.removeAttribute("disabled"), this.prevButton.removeAttribute("disabled"), this.activeSlide === r.length - 1 && this.nextButton.setAttribute("disabled", ""), this.activeSlide === 0 && this.prevButton.setAttribute("disabled", ""));
+  }
+  cloneFirstAndLastItems() {
+    const e = this.getSlides();
+    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("wje-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("wje-thumbnail").forEach((e, i) => {
+      i === this.activeSlide && e.classList.add("active");
+    }));
+  }
+  createNextButton() {
+    const e = document.createElement("wje-button");
+    return e.classList.add("next"), e.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+      this.nextSlide();
+    }), e;
+  }
+  createPreviousButton() {
+    const e = document.createElement("wje-button");
+    return e.classList.add("prev"), e.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+      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("wje-thumbnail");
+      t.innerHTML = `<img src="${n.querySelector("wje-img").getAttribute("src")}"></img>`, t.addEventListener("click", (s) => {
+        this.removeActiveSlide(), s.target.closest("wje-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("wje-carousel-item:not(.clone)"));
+  }
+  getSlidesWithClones() {
+    return Array.from(this.querySelectorAll("wje-carousel-item"));
+  }
+  canGoNext() {
+    return this.querySelector(".native-carousel").scrollLeft < this.querySelector(".native-carousel").scrollWidth;
+  }
+  canGoPrevious() {
+    return this.querySelector(".native-carousel").scrollLeft > 0;
+  }
+}
+m.define("wje-carousel", f);
+export {
+  f as default
+};

package/dist/wje-checkbox.js

@@ -0,0 +1,96 @@
+var s = Object.defineProperty;
+var h = (c, t, e) => t in c ? s(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var l = (c, t, e) => (h(c, typeof t != "symbol" ? t + "" : t, e), e);
+import b, { event as i } from "./wje-element.js";
+const d = ':host{display:block;margin-top:var(--wje-checkbox-margin-top);margin-bottom:var(--wje-checkbox-margin-bottom);margin-inline:var(--wje-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:flex;align-items:center;cursor:pointer;position:relative;padding-left:calc(var(--wje-checkbox-size) + .5rem);min-width:var(--wje-checkbox-size);min-height:var(--wje-checkbox-size);margin-bottom:0}:host label:before{content:"";position:absolute;width:var(--wje-checkbox-size);height:var(--wje-checkbox-size);left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wje-color-contrast-0);border-width:1px;border-style:solid;border-color:var(--wje-color-contrast-3)}.native-checkbox label:hover{color:var(--wje-color-contrast-11)}.native-checkbox label:before{border-radius:var(--wje-checkbox-border-radius)}.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:var(--wje-checkbox-size);height:var(--wje-checkbox-size);overflow:hidden}.native-checkbox input[type=checkbox]:checked+label:after{content:"";-webkit-mask-image:var(--wje-checkbox-checkmark);mask-image:var(--wje-checkbox-checkmark);-webkit-mask-size:var(--wje-checkbox-size);mask-size:var(--wje-checkbox-size);background-color:var(--wje-color-primary-9)}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-8);opacity:.58}.native-checkbox input[type=checkbox][disabled]+label:before{background:var(--wje-color-contrast-2)}.native-checkbox input[type=checkbox][disabled]+label:after{background:transparent}.native-checkbox input[type=checkbox]:checked[disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-8);opacity:.58}.native-checkbox input[type=checkbox]:checked[disabled]+label:before{background:var(--wje-color-contrast-2)}.native-checkbox input[type=checkbox]:checked[disabled]+label:after{background:var(--wje-color-contrast-5)}.native-checkbox input[type=checkbox]:not(:checked):indeterminate+label:after{content:"";-webkit-mask-image:var(--wje-checkbox-interminate);mask-image:var(--wje-checkbox-interminate);-webkit-mask-size:var(--wje-checkbox-size);mask-size:var(--wje-checkbox-size);background-color:var(--wje-color-primary-9)}:host([variant=circle]) label:after{border-radius:99px}:host([variant=circle]) label:before{border-radius:99px}:host([placement=end]) label{padding-left:0;padding-right:26px}:host([placement=end]) label:before{right:0;left:auto}:host([placement=end]) input[type=checkbox]:checked+label{position:relative}:host([placement=end]) input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}:host([color=primary]) input[type=checkbox]:checked+label:after,:host([color=primary]) input[type=checkbox]:indeterminate+label:after{background-color:var(--wje-color-contrast-0)}:host([color=primary]) :is(input[type=checkbox]:checked+label):before,:host([color=primary]) :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-primary-9);background-color:var(--wje-color-primary-9)}:host([color=complete]) input[type=checkbox]:checked+label:after,:host([color=complete]) input[type=checkbox]:indeterminate+label:after{background-color:var(--wje-color-contrast-0)}:host([color=complete]) :is(input[type=checkbox]:checked+label):before,:host([color=complete]) :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-complete-9);background-color:var(--wje-color-complete-9)}:host([color=success]) input[type=checkbox]:checked+label:after,:host([color=success]) input[type=checkbox]:indeterminate+label:after{background-color:var(--wje-color-contrast-0)}:host([color=success]) :is(input[type=checkbox]:checked+label):before,:host([color=success]) :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-success-9);background-color:var(--wje-color-success-9)}:host([color=warning]) input[type=checkbox]:checked+label:after,:host([color=warning]) input[type=checkbox]:indeterminate+label:after{background-color:var(--wje-color-contrast-0)}:host([color=warning]) :is(input[type=checkbox]:checked+label):before,:host([color=warning]) :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-warning-9);background-color:var(--wje-color-warning-9)}:host([color=danger]) input[type=checkbox]:checked+label:after,:host([color=danger]) input[type=checkbox]:indeterminate+label:after{background-color:var(--wje-color-contrast-0)}:host([color=danger]) :is(input[type=checkbox]:checked+label):before,:host([color=danger]) :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-danger-9);background-color:var(--wje-color-danger-9)}:host([color=info]) input[type=checkbox]:checked+label:after,:host([color=info]) input[type=checkbox]:indeterminate+label:after{background-color:var(--wje-color-contrast-0)}:host([color=info]) :is(input[type=checkbox]:checked+label):before,:host([color=info]) :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-info-9);background-color:var(--wje-color-info-9)}';
+class k extends b {
+  /**
+   * Checkbox constructor.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name.
+     */
+    l(this, "className", "Checkbox");
+  }
+  /**
+   * @summary Set checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  /**
+   * @summary Get disabled attribute
+   * @returns {boolean} true if the toggle is disabled, false otherwise
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+  * @summary Set checked attribute
+  * @returns {boolean} true if the toggle is checked, false otherwise
+  */
+  set checked(e) {
+    e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  /**
+   * @summary Get checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {string} The CSS stylesheet.
+   */
+  static get cssStyleSheet() {
+    return d;
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled"];
+  }
+  /**
+   * Sets up the attributes for the checkbox.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the checkbox.
+   * @param {object} context - The context.
+   * @param {object} store - The store.
+   * @param {object} params - The parameters.
+   * @returns {DocumentFragment} The created fragment.
+   */
+  draw(e, p, u) {
+    let n = document.createDocumentFragment(), r = document.createElement("div");
+    r.setAttribute("part", "native"), r.classList.add("native-checkbox");
+    let o = document.createElement("input");
+    o.type = "checkbox", o.id = "checkbox", o.name = this.name || "checkbox", o.checked = this.hasAttribute("checked"), o.disabled = this.hasAttribute("disabled"), o.indeterminate = this.hasAttribute("indeterminate");
+    let a = document.createElement("label");
+    return a.htmlFor = "checkbox", a.innerHTML = "<slot></slot>", r.appendChild(o), r.appendChild(a), this.input = o, n.appendChild(r), n;
+  }
+  /**
+   * Adds an event listener after drawing the checkbox.
+   */
+  afterDraw() {
+    this.disabled || (this.input.addEventListener("input", (e) => {
+      this.checked = e.target.checked, i.dispatchCustomEvent(this, "wje-toggle:input");
+    }), this.input.addEventListener("change", (e) => {
+      this.checked = e.target.checked, i.dispatchCustomEvent(this, "wje-toggle:change");
+    }));
+  }
+  /**
+   * Removes the event listener when the checkbox is disconnected.
+   */
+  disconnectedCallback() {
+    i.removeElement(this.input);
+  }
+}
+b.define("wje-checkbox", k);
+export {
+  k as default
+};

package/dist/wje-chip.js

@@ -0,0 +1,32 @@
+var d = Object.defineProperty;
+var w = (r, o, t) => o in r ? d(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var n = (r, o, t) => (w(r, typeof o != "symbol" ? o + "" : o, t), t);
+import l, { event as p } from "./wje-element.js";
+const h = ".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;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(--wje-border-radius-pill);overflow:hidden;vertical-align:middle;box-sizing:border-box}:host(.focus){box-shadow:none}:host(.wje-active) .native-chip{border:1px solid var(--wje-color-primary-11);background-color:var(--wje-color-contrast-3);color:var(--wje-color)}:host(:focus,:active:focus,.wje-active:focus){outline:none!important}.check{display:none}:host([active]) .check{display:block;margin-inline:4px 0}:host([disabled]){opacity:.5;border:0;pointer-events:none;cursor:not-allowed}::slotted(wje-avatar){width:22px;height:22px}::slotted(wje-avatar:first-child){margin-inline:-8px 8px;margin-top:-4px;margin-bottom:-4px}::slotted(wje-icon:first-child){margin:-4px 8px -4px -4px}::slotted(wje-icon:last-child){margin:-4px -4px -4px 8px}wje-button{--wje-button-border-radius: 50%;--wje-button-margin-inline: .25rem -.5rem;--wje-padding-top: .15rem;--wje-padding-start: .15rem;--wje-padding-end: .15rem;--wje-padding-bottom: .15rem}.native-chip.wje-color-primary{background-color:var(--wje-color-primary-1);color:var(--wje-color-primary-9)}.native-chip.wje-color-complete{background-color:var(--wje-color-complete-1);color:var(--wje-color-complete-9)}.native-chip.wje-color-success{background-color:var(--wje-color-success-1);color:var(--wje-color-success-9)}.native-chip.wje-color-warning{background-color:var(--wje-color-warning-2);color:var(--wje-color-warning-11)}.native-chip.wje-color-danger{background-color:var(--wje-color-danger-1);color:var(--wje-color-danger-9)}.native-chip.wje-color-info{background-color:var(--wje-color-info-1);color:var(--wje-color-info-9)}.native-chip.wje-color-default{background-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11)}@media (any-hover: hover){.native-chip.wje-color-primary:hover{background-color:var(--wje-color-primary-4);color:var(--wje-color-primary-10)}.native-chip.wje-color-complete:hover{background-color:var(--wje-color-complete-4);color:var(--wje-color-complete-10)}.native-chip.wje-color-success:hover{background-color:var(--wje-color-success-4);color:var(--wje-color-success-10)}.native-chip.wje-color-warning:hover{background-color:var(--wje-color-warning-4);color:var(--wje-color-warning-11)}.native-chip.wje-color-danger:hover{background-color:var(--wje-color-danger-4);color:var(--wje-color-danger-10)}.native-chip.wje-color-info:hover{background-color:var(--wje-color-info-4);color:var(--wje-color-info-10)}.native-chip.wje-color-default:hover{background-color:var(--wje-color-contrast-4);color:var(--wje-color-contrast-11)}}";
+class v extends l {
+  constructor() {
+    super();
+    n(this, "className", "Chip");
+  }
+  static get cssStyleSheet() {
+    return h;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, j, m) {
+    let i = document.createDocumentFragment(), e = document.createElement("div");
+    e.classList.add("native-chip");
+    let s = document.createElement("slot"), c = document.createElement("wje-button");
+    c.setAttribute("part", "remove"), c.setAttribute("fill", "link"), c.innerHTML = '<wje-icon name="x"></wje-icon>';
+    let a = document.createElement("wje-icon");
+    return a.setAttribute("name", "check"), a.classList.add("check"), this.hasAttribute("color") ? e.classList.add("wje-color-" + this.color, "wje-color") : e.classList.add("wje-color-default", "wje-color"), this.disabled && this.classList.add("wje-disabled"), this.outline && this.classList.add("wje-outline"), e.appendChild(s), e.appendChild(a), this.hasAttribute("removable") && e.appendChild(c), i.appendChild(e), this.remove = c, i;
+  }
+  afterDraw() {
+    p.addListener(this.remove, "click", "wje:chip-remove", null, { stopPropagation: !0 });
+  }
+}
+l.define("wje-chip", v);
+export {
+  v as default
+};

package/dist/wje-col.js

@@ -0,0 +1,27 @@
+var f = Object.defineProperty;
+var g = (o, t, e) => t in o ? f(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var r = (o, t, e) => (g(o, typeof t != "symbol" ? t + "" : t, e), e);
+import s from "./wje-element.js";
+const m = ":host{display:block;flex-grow:1;width:100%;max-width:100%;padding-right:calc(var(--wje-gutter-x) * .5);padding-left:calc(var(--wje-gutter-x) * .5);margin-top:var(--wje-gutter-y)}:host(.wje-col){flex:1 0 0%}:host(.wje-row-cols-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-6)>*{flex:0 0 auto;width:16.6666666667%}@media (min-width: 576px){:host(.wje-col-sm){flex:1 0 0%}:host(.wje-row-cols-sm-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-sm-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-sm-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-sm-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-sm-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-sm-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-sm-6)>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width: 768px){:host(.wje-col-md){flex:1 0 0%}:host(.wje-row-cols-md-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-md-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-md-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-md-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-md-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-md-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-md-6)>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width: 992px){:host(.wje-col-lg){flex:1 0 0%}:host(.wje-row-cols-lg-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-lg-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-lg-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-lg-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-lg-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-lg-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-lg-6)>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width: 1200px){:host(.wje-col-xl){flex:1 0 0%}:host(.wje-row-cols-xl-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-xl-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-xl-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-xl-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-xl-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-xl-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-xl-6)>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width: 1400px){:host(.wje-col-xxl){flex:1 0 0%}:host(.wje-row-cols-xxl-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-xxl-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-xxl-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-xxl-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-xxl-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-xxl-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-xxl-6)>*{flex:0 0 auto;width:16.6666666667%}}:host(.wje-col-auto){flex:0 0 auto;width:auto}:host(.wje-col-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-3){flex:0 0 auto;width:25%}:host(.wje-col-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-6){flex:0 0 auto;width:50%}:host(.wje-col-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-9){flex:0 0 auto;width:75%}:host(.wje-col-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-12){flex:0 0 auto;width:100%}:host(.wje-offset-1){margin-left:8.33333333%}:host(.wje-offset-2){margin-left:16.66666667%}:host(.wje-offset-3){margin-left:25%}:host(.wje-offset-4){margin-left:33.33333333%}:host(.wje-offset-5){margin-left:41.66666667%}:host(.wje-offset-6){margin-left:50%}:host(.wje-offset-7){margin-left:58.33333333%}:host(.wje-offset-8){margin-left:66.66666667%}:host(.wje-offset-9){margin-left:75%}:host(.wje-offset-10){margin-left:83.33333333%}:host(.wje-offset-11){margin-left:91.66666667%}.g-0,.gx-0{--wje-gutter-x: 0}.g-0,.gy-0{--wje-gutter-y: 0}.g-1,.gx-1{--wje-gutter-x: .25rem}.g-1,.gy-1{--wje-gutter-y: .25rem}.g-2,.gx-2{--wje-gutter-x: .5rem}.g-2,.gy-2{--wje-gutter-y: .5rem}.g-3,.gx-3{--wje-gutter-x: 1rem}.g-3,.gy-3{--wje-gutter-y: 1rem}.g-4,.gx-4{--wje-gutter-x: 1.5rem}.g-4,.gy-4{--wje-gutter-y: 1.5rem}.g-5,.gx-5{--wje-gutter-x: 3rem}.g-5,.gy-5{--wje-gutter-y: 3rem}@media (min-width: 576px){:host(.wje-col-sm-auto){flex:0 0 auto;width:auto}:host(.wje-col-sm-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-sm-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-sm-3){flex:0 0 auto;width:25%}:host(.wje-col-sm-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-sm-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-sm-6){flex:0 0 auto;width:50%}:host(.wje-col-sm-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-sm-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-sm-9){flex:0 0 auto;width:75%}:host(.wje-col-sm-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-sm-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-sm-12){flex:0 0 auto;width:100%}:host(.wje-offset-sm-0){margin-left:0}:host(.wje-offset-sm-1){margin-left:8.33333333%}:host(.wje-offset-sm-2){margin-left:16.66666667%}:host(.wje-offset-sm-3){margin-left:25%}:host(.wje-offset-sm-4){margin-left:33.33333333%}:host(.wje-offset-sm-5){margin-left:41.66666667%}:host(.wje-offset-sm-6){margin-left:50%}:host(.wje-offset-sm-7){margin-left:58.33333333%}:host(.wje-offset-sm-8){margin-left:66.66666667%}:host(.wje-offset-sm-9){margin-left:75%}:host(.wje-offset-sm-10){margin-left:83.33333333%}:host(.wje-offset-sm-11){margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--wje-gutter-x: 0}.g-sm-0,.gy-sm-0{--wje-gutter-y: 0}.g-sm-1,.gx-sm-1{--wje-gutter-x: .25rem}.g-sm-1,.gy-sm-1{--wje-gutter-y: .25rem}.g-sm-2,.gx-sm-2{--wje-gutter-x: .5rem}.g-sm-2,.gy-sm-2{--wje-gutter-y: .5rem}.g-sm-3,.gx-sm-3{--wje-gutter-x: 1rem}.g-sm-3,.gy-sm-3{--wje-gutter-y: 1rem}.g-sm-4,.gx-sm-4{--wje-gutter-x: 1.5rem}.g-sm-4,.gy-sm-4{--wje-gutter-y: 1.5rem}.g-sm-5,.gx-sm-5{--wje-gutter-x: 3rem}.g-sm-5,.gy-sm-5{--wje-gutter-y: 3rem}}@media (min-width: 768px){:host(.wje-col-md-auto){flex:0 0 auto;width:auto}:host(.wje-col-md-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-md-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-md-3){flex:0 0 auto;width:25%}:host(.wje-col-md-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-md-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-md-6){flex:0 0 auto;width:50%}:host(.wje-col-md-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-md-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-md-9){flex:0 0 auto;width:75%}:host(.wje-col-md-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-md-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-md-12){flex:0 0 auto;width:100%}:host(.wje-offset-md-0){margin-left:0}:host(.wje-offset-md-1){margin-left:8.33333333%}:host(.wje-offset-md-2){margin-left:16.66666667%}:host(.wje-offset-md-3){margin-left:25%}:host(.wje-offset-md-4){margin-left:33.33333333%}:host(.wje-offset-md-5){margin-left:41.66666667%}:host(.wje-offset-md-6){margin-left:50%}:host(.wje-offset-md-7){margin-left:58.33333333%}:host(.wje-offset-md-8){margin-left:66.66666667%}:host(.wje-offset-md-9){margin-left:75%}:host(.wje-offset-md-10){margin-left:83.33333333%}:host(.wje-offset-md-11){margin-left:91.66666667%}.g-md-0,.gx-md-0{--wje-gutter-x: 0}.g-md-0,.gy-md-0{--wje-gutter-y: 0}.g-md-1,.gx-md-1{--wje-gutter-x: .25rem}.g-md-1,.gy-md-1{--wje-gutter-y: .25rem}.g-md-2,.gx-md-2{--wje-gutter-x: .5rem}.g-md-2,.gy-md-2{--wje-gutter-y: .5rem}.g-md-3,.gx-md-3{--wje-gutter-x: 1rem}.g-md-3,.gy-md-3{--wje-gutter-y: 1rem}.g-md-4,.gx-md-4{--wje-gutter-x: 1.5rem}.g-md-4,.gy-md-4{--wje-gutter-y: 1.5rem}.g-md-5,.gx-md-5{--wje-gutter-x: 3rem}.g-md-5,.gy-md-5{--wje-gutter-y: 3rem}}@media (min-width: 992px){:host(.wje-col-lg-auto){flex:0 0 auto;width:auto}:host(.wje-col-lg-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-lg-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-lg-3){flex:0 0 auto;width:25%}:host(.wje-col-lg-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-lg-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-lg-6){flex:0 0 auto;width:50%}:host(.wje-col-lg-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-lg-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-lg-9){flex:0 0 auto;width:75%}:host(.wje-col-lg-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-lg-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-lg-12){flex:0 0 auto;width:100%}:host(.wje-offset-lg-0){margin-left:0}:host(.wje-offset-lg-1){margin-left:8.33333333%}:host(.wje-offset-lg-2){margin-left:16.66666667%}:host(.wje-offset-lg-3){margin-left:25%}:host(.wje-offset-lg-4){margin-left:33.33333333%}:host(.wje-offset-lg-5){margin-left:41.66666667%}:host(.wje-offset-lg-6){margin-left:50%}:host(.wje-offset-lg-7){margin-left:58.33333333%}:host(.wje-offset-lg-8){margin-left:66.66666667%}:host(.wje-offset-lg-9){margin-left:75%}:host(.wje-offset-lg-10){margin-left:83.33333333%}:host(.wje-offset-lg-11){margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--wje-gutter-x: 0}.g-lg-0,.gy-lg-0{--wje-gutter-y: 0}.g-lg-1,.gx-lg-1{--wje-gutter-x: .25rem}.g-lg-1,.gy-lg-1{--wje-gutter-y: .25rem}.g-lg-2,.gx-lg-2{--wje-gutter-x: .5rem}.g-lg-2,.gy-lg-2{--wje-gutter-y: .5rem}.g-lg-3,.gx-lg-3{--wje-gutter-x: 1rem}.g-lg-3,.gy-lg-3{--wje-gutter-y: 1rem}.g-lg-4,.gx-lg-4{--wje-gutter-x: 1.5rem}.g-lg-4,.gy-lg-4{--wje-gutter-y: 1.5rem}.g-lg-5,.gx-lg-5{--wje-gutter-x: 3rem}.g-lg-5,.gy-lg-5{--wje-gutter-y: 3rem}}@media (min-width: 1200px){:host(.wje-col-xl-auto){flex:0 0 auto;width:auto}:host(.wje-col-xl-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-xl-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-xl-3){flex:0 0 auto;width:25%}:host(.wje-col-xl-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-xl-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-xl-6){flex:0 0 auto;width:50%}:host(.wje-col-xl-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-xl-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-xl-9){flex:0 0 auto;width:75%}:host(.wje-col-xl-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-xl-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-xl-12){flex:0 0 auto;width:100%}:host(.wje-offset-xl-0){margin-left:0}:host(.wje-offset-xl-1){margin-left:8.33333333%}:host(.wje-offset-xl-2){margin-left:16.66666667%}:host(.wje-offset-xl-3){margin-left:25%}:host(.wje-offset-xl-4){margin-left:33.33333333%}:host(.wje-offset-xl-5){margin-left:41.66666667%}:host(.wje-offset-xl-6){margin-left:50%}:host(.wje-offset-xl-7){margin-left:58.33333333%}:host(.wje-offset-xl-8){margin-left:66.66666667%}:host(.wje-offset-xl-9){margin-left:75%}:host(.wje-offset-xl-10){margin-left:83.33333333%}:host(.wje-offset-xl-11){margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--wje-gutter-x: 0}.g-xl-0,.gy-xl-0{--wje-gutter-y: 0}.g-xl-1,.gx-xl-1{--wje-gutter-x: .25rem}.g-xl-1,.gy-xl-1{--wje-gutter-y: .25rem}.g-xl-2,.gx-xl-2{--wje-gutter-x: .5rem}.g-xl-2,.gy-xl-2{--wje-gutter-y: .5rem}.g-xl-3,.gx-xl-3{--wje-gutter-x: 1rem}.g-xl-3,.gy-xl-3{--wje-gutter-y: 1rem}.g-xl-4,.gx-xl-4{--wje-gutter-x: 1.5rem}.g-xl-4,.gy-xl-4{--wje-gutter-y: 1.5rem}.g-xl-5,.gx-xl-5{--wje-gutter-x: 3rem}.g-xl-5,.gy-xl-5{--wje-gutter-y: 3rem}}@media (min-width: 1400px){:host(.wje-col-xxl-auto){flex:0 0 auto;width:auto}:host(.wje-col-xxl-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-xxl-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-xxl-3){flex:0 0 auto;width:25%}:host(.wje-col-xxl-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-xxl-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-xxl-6){flex:0 0 auto;width:50%}:host(.wje-col-xxl-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-xxl-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-xxl-9){flex:0 0 auto;width:75%}:host(.wje-col-xxl-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-xxl-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-xxl-12){flex:0 0 auto;width:100%}:host(.wje-offset-xxl-0){margin-left:0}:host(.wje-offset-xxl-1){margin-left:8.33333333%}:host(.wje-offset-xxl-2){margin-left:16.66666667%}:host(.wje-offset-xxl-3){margin-left:25%}:host(.wje-offset-xxl-4){margin-left:33.33333333%}:host(.wje-offset-xxl-5){margin-left:41.66666667%}:host(.wje-offset-xxl-6){margin-left:50%}:host(.wje-offset-xxl-7){margin-left:58.33333333%}:host(.wje-offset-xxl-8){margin-left:66.66666667%}:host(.wje-offset-xxl-9){margin-left:75%}:host(.wje-offset-xxl-10){margin-left:83.33333333%}:host(.wje-offset-xxl-11){margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--wje-gutter-x: 0}.g-xxl-0,.gy-xxl-0{--wje-gutter-y: 0}.g-xxl-1,.gx-xxl-1{--wje-gutter-x: .25rem}.g-xxl-1,.gy-xxl-1{--wje-gutter-y: .25rem}.g-xxl-2,.gx-xxl-2{--wje-gutter-x: .5rem}.g-xxl-2,.gy-xxl-2{--wje-gutter-y: .5rem}.g-xxl-3,.gx-xxl-3{--wje-gutter-x: 1rem}.g-xxl-3,.gy-xxl-3{--wje-gutter-y: 1rem}.g-xxl-4,.gx-xxl-4{--wje-gutter-x: 1.5rem}.g-xxl-4,.gy-xxl-4{--wje-gutter-y: 1.5rem}.g-xxl-5,.gx-xxl-5{--wje-gutter-x: 3rem}.g-xxl-5,.gy-xxl-5{--wje-gutter-y: 3rem}}:host(.order-first){order:-1!important}:host(.order-0){order:0!important}:host(.order-1){order:1!important}:host(.order-2){order:2!important}:host(.order-3){order:3!important}:host(.order-4){order:4!important}:host(.order-5){order:5!important}:host(.order-last){order:6!important}:host(.order-sm-first){order:-1!important}:host(.order-sm-0){order:0!important}:host(.order-sm-1){order:1!important}:host(.order-sm-2){order:2!important}:host(.order-sm-3){order:3!important}:host(.order-sm-4){order:4!important}:host(.order-sm-5){order:5!important}:host(.order-sm-last){order:6!important}:host(.order-md-first){order:-1!important}:host(.order-md-0){order:0!important}:host(.order-md-1){order:1!important}:host(.order-md-2){order:2!important}:host(.order-md-3){order:3!important}:host(.order-md-4){order:4!important}:host(.order-md-5){order:5!important}:host(.order-md-last){order:6!important}:host(.order-lg-first){order:-1!important}:host(.order-lg-0){order:0!important}:host(.order-lg-1){order:1!important}:host(.order-lg-2){order:2!important}:host(.order-lg-3){order:3!important}:host(.order-lg-4){order:4!important}:host(.order-lg-5){order:5!important}:host(.order-lg-last){order:6!important}:host(.order-xl-first){order:-1!important}:host(.order-xl-0){order:0!important}:host(.order-xl-1){order:1!important}:host(.order-xl-2){order:2!important}:host(.order-xl-3){order:3!important}:host(.order-xl-4){order:4!important}:host(.order-xl-5){order:5!important}:host(.order-xl-last){order:6!important}:host(.order-xxl-first){order:-1!important}:host(.order-xxl-0){order:0!important}:host(.order-xxl-1){order:1!important}:host(.order-xxl-2){order:2!important}:host(.order-xxl-3){order:3!important}:host(.order-xxl-4){order:4!important}:host(.order-xxl-5){order:5!important}:host(.order-xxl-last){order:6!important}";
+class d extends s {
+  constructor() {
+    super();
+    r(this, "className", "Col");
+  }
+  static get cssStyleSheet() {
+    return m;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  beforeDraw(e, w, x) {
+  }
+  draw(e, w, x) {
+    let l = document.createDocumentFragment(), h = document.createElement("slot");
+    return this.order && this.classList.add("order-" + this.order), this.size && this.classList.add("wje-col-" + this.size), this.sizeSm && this.classList.add("wje-col-sm-" + this.sizeSm), this.sizeMd && this.classList.add("wje-col-md-" + this.sizeMd), this.offset && this.classList.add("wje-offset-" + this.offset), this.offsetSm && this.classList.add("wje-offset-sm-" + this.offsetSm), l.appendChild(h), l;
+  }
+}
+s.define("wje-col", d);
+export {
+  d as default
+};