@muibook/components 4.0.0 → 5.1.0

package/dist/esm/components/mui-drawer/index.js

@@ -0,0 +1,393 @@
+import "../mui-icons/close/index.js";
+import "../mui-button/index.js";
+class p extends HTMLElement {
+  constructor() {
+    super(), this.innerEl = null, this.overlayEl = null, this.footerEl = null, this.actionsSlot = null, this.pushLayout = null, this.outer = null, this.persistentLayout = null, this.headerEl = null, this.headerSlot = null, this._handleEscape = (t) => {
+      const e = this.getAttribute("variant") || "overlay";
+      t.key === "Escape" && (e === "overlay" || e === "push") && this.close();
+    }, this._computedSide = "left", this._handleResize = () => {
+      const t = this.getAttribute("variant") || "overlay";
+      if (t === "push" || t === "persistent") {
+        const e = this.hasAttribute("open");
+        this.updateLayout(t, e);
+      }
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["open", "width", "side", "variant", "z-index", "drawer-space", "breakpoint"];
+  }
+  connectedCallback() {
+    this.render(), this.cacheEls(), this.attachEvents(), this.updateFooterVisibility(), this.updateHeaderVisibility(), this.syncOpenState(), document.addEventListener("keydown", this._handleEscape), window.addEventListener("resize", this._handleResize);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._handleEscape), window.removeEventListener("resize", this._handleResize);
+  }
+  getBreakpoint() {
+    const t = this.getAttribute("breakpoint");
+    return t ? Number(t) : 768;
+  }
+  getDrawerTemplate(t = !0) {
+    const e = this.hasAttribute("drawer-space") ? "no-padding" : "";
+    return (
+      /*html*/
+      `
+    <div class="outer">
+      <div class="inner" role="complementary">
+        <header>
+          <slot name="title"></slot>
+          ${t ? `
+            <mui-button class="close" variant="tertiary" aria-label="Close drawer">
+              <mui-icon-close></mui-icon-close>
+            </mui-button>` : "<span class='spacer'></span>"}
+        </header>
+        <main class="${e}"><slot></slot></main>
+        <footer hidden><slot name="actions"></slot></footer>
+      </div>
+    </div>
+  `
+    );
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("width") || "400px", e = this.getAttribute("variant") || "overlay", i = !!this.querySelector('[slot="before"]');
+    this._computedSide = this.getAttribute("side") || (i ? "right" : "left"), this.getAttribute("side") !== this._computedSide && this.setAttribute("side", this._computedSide);
+    const a = (
+      /*css*/
+      `
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: calc(var(--space-400) + env(safe-area-inset-top)) var(--space-400) var(--space-400) var(--space-500);
+        border-bottom: var(--border-thin);
+        box-sizing: border-box;
+      }
+      main {
+        overflow-y: auto;
+        height: 100%;
+        padding: var(--space-500);
+        box-sizing: border-box;
+        will-change: transform, opacity;
+      }
+      main.no-padding {
+        padding: 0;
+      }
+
+      main.no-heading {
+        padding-top: calc(var(--space-500) + env(safe-area-inset-top));
+      }
+
+      main.no-padding.no-heading {
+        padding-top: env(safe-area-inset-top);
+      }
+
+
+      footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: var(--space-400) var(--space-500) calc(var(--space-400) + env(safe-area-inset-bottom));
+        border-top: var(--border-thin);
+        background: var(--surface-elevated-100);
+        gap: var(--space-300);
+        box-sizing: border-box;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+      header[hidden],
+      footer[hidden] {
+        display: none !important;
+      }
+    `
+    ), s = (
+      /*css*/
+      `
+      :host([has-header]) main {
+        height: calc(100dvh - (7.7rem  + env(safe-area-inset-top) ));
+      }
+
+      :host([has-footer]) main {
+        height: calc(100dvh - (7.7rem  + env(safe-area-inset-bottom) ));
+      }
+
+      :host([has-header][has-footer]) main {
+        height: calc(100dvh - ((7.7rem * 2)  + (env(safe-area-inset-top) + env(safe-area-inset-bottom)) ));
+      }
+
+      .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 101;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+        background: var(--backdrop-overlay);
+        opacity: 0;
+        visibility: hidden;
+        will-change: opacity, visibility;
+      }
+
+      .surface {
+        background: var(--surface);
+        width: 100%;
+      }
+
+      .inner {
+        position: fixed;
+        top: 0;
+        height: 100dvh;
+        z-index: 110;
+        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
+        background: var(--surface-elevated-100);
+        border-left: var(--border-thin);
+        width: ${t};
+        transform: translateX(100%);
+        opacity: 0;
+        visibility: hidden;
+        display: flex;
+        flex-direction: column;
+        will-change: transform, opacity;
+      }
+
+      :host([side="left"]) .inner {
+        left: 0;
+        right: auto;
+        border-left: none;
+        border-right: var(--border-thin);
+        transform: translateX(-100%);
+      }
+
+      :host([side="right"]) .inner {
+        right: 0;
+        left: auto;
+        border-right: none;
+        border-left: var(--border-thin);
+        transform: translateX(100%);
+      }
+
+      :host([open][side="right"]) .inner,
+      :host([open][side="left"]) .inner {
+        transform: translateX(0);
+        opacity: 1;
+        visibility: visible;
+      }
+
+      :host([open]) .overlay {
+        opacity: 1;
+        visibility: visible;
+      }
+    `
+    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", l = (
+      /*css*/
+      `
+      .inner {
+        background: var(--surface-elevated-100);
+        width: ${t};
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+      }
+
+      main { height: 100%; }
+
+      :host([has-header]) main,
+      :host([has-footer]) main {
+        height: calc(100% - 7.7rem);
+      }
+
+      :host([has-header][has-footer]) main {
+        height: calc(100% - (7.7rem * 2));
+      }
+
+      .outer {
+        overflow: hidden;
+        will-change: transform;
+      }
+
+
+      /* Push */
+      :host([variant="push"]) .shell {
+        display: grid;
+        height: 100%;
+        overflow: hidden;
+        transition: grid-template-columns var(--speed-100) ease;
+      }
+
+      /* Persistent */
+      :host([variant="persistent"]) .shell {
+        display: grid;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      :host([variant="persistent"]) header .spacer {
+        height: 4.4rem;
+      }
+
+      /* Hidden & Persistent */
+      :host([open]) .outer,
+      :host([variant="persistent"]) .outer  { ${r} }
+    `
+    ), n = (
+      /*css*/
+      `
+      @media (max-width: ${this.getBreakpoint()}px) {
+        .outer {
+          position: fixed;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          width: 100%;
+          max-height: 100dvh;
+          transform: translateY(100%);
+          transition: none;
+        }        
+
+        :host([open]) .outer {
+          transform: translateY(0);
+          transition: transform 0.3s ease;
+          border: none;
+        }
+
+        footer {
+          position: fixed;
+          bottom: 0;
+          width: 100%;
+        }
+
+        /* Overlay */
+        :host([variant="overlay"]) .inner {
+          max-width: ${t};
+          width: 90%;
+          height: 100%;
+        }
+
+        /* Push */
+        :host([variant="push"]) .inner {
+          width: 100%;
+          height: 100%;
+        }
+
+        /* Persistent */
+        :host([variant="persistent"]) .inner {
+          width: 100%;
+          position: static;
+          height: auto;
+          border-radius: var(--radius-200);
+        }
+
+        :host([variant="persistent"]) .shell {
+          height: auto;
+        }
+
+        :host([variant="persistent"]) .outer {
+          width: 100%;
+          position: static;
+          height: auto;
+          transform: none;
+          order: 1;
+          padding: calc(var(--space-700) / 2);
+          box-sizing: border-box;
+          max-height: initial;
+          z-index: initial;
+        }
+
+        :host([variant="persistent"]) header {
+          padding-top: var(--space-400);
+        }
+
+        :host([variant="persistent"]) main { height: auto; }
+
+        :host([variant="persistent"]) footer {
+          border-bottom-right-radius: var(--radius-200);
+          border-bottom-left-radius: var(--radius-200);
+          position: static;
+          width: 100%;
+          padding: var(--space-400) var(--space-500) var(--space-400);
+        }
+
+      }
+
+      @media (max-width: 360px) {
+        :host([variant="persistent"]) .outer {
+          padding: calc(var(--space-400) / 2);
+        }
+      }
+
+    `
+    ), d = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
+    let o = "";
+    const c = this.hasAttribute("drawer-space") ? "no-padding" : "";
+    e === "overlay" ? o = /*html*/
+    `
+      <style>${a}${s}${n}</style>
+      <div class="overlay"></div>
+      <div class="inner" role="dialog" aria-modal="true">
+        <header hidden>
+          <slot name="title"></slot>
+          <mui-button class="close" variant="tertiary" aria-label="Close drawer">
+            <mui-icon-close></mui-icon-close>
+          </mui-button>
+        </header>
+        <main class="${c}">
+          <slot></slot>
+        </main>
+        <footer hidden>
+          <slot name="actions"></slot>
+        </footer>
+      </div>
+    ` : (e === "push" || e === "persistent") && (o = /*html*/
+    `
+        <style>${a}${l}${n}</style>
+        <div class="shell">
+          ${d === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
+        </div>
+      `), this.shadowRoot.innerHTML = o;
+  }
+  cacheEls() {
+    this.innerEl = this.shadowRoot.querySelector(".inner"), this.overlayEl = this.shadowRoot.querySelector(".overlay"), this.footerEl = this.shadowRoot.querySelector("footer"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]'), this.outer = this.shadowRoot.querySelector(".outer"), this.pushLayout = this.shadowRoot.querySelector(".shell"), this.persistentLayout = this.shadowRoot.querySelector(".shell"), this.headerEl = this.shadowRoot.querySelector("header"), this.headerSlot = this.shadowRoot.querySelector('slot[name="title"]');
+  }
+  attachEvents() {
+    var t, e, i, a;
+    (t = this.shadowRoot.querySelector(".close")) == null || t.addEventListener("click", () => this.close()), (e = this.overlayEl) == null || e.addEventListener("click", () => this.close()), (i = this.actionsSlot) == null || i.addEventListener("slotchange", () => this.updateFooterVisibility()), (a = this.headerSlot) == null || a.addEventListener("slotchange", () => this.updateHeaderVisibility());
+  }
+  updateFooterVisibility() {
+    if (!this.footerEl || !this.actionsSlot) return;
+    const t = this.actionsSlot.assignedElements().length > 0;
+    this.footerEl.hidden = !t, this.toggleAttribute("has-footer", t);
+  }
+  updateHeaderVisibility() {
+    if (!this.headerEl || !this.headerSlot || !this.innerEl) return;
+    const t = this.headerSlot.assignedElements().length > 0;
+    this.headerEl.hidden = !t, this.toggleAttribute("has-header", t);
+    const e = this.innerEl.querySelector("main");
+    e && e.classList.toggle("no-heading", !t);
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "open" && this.syncOpenState(), t === "width" && this.innerEl && (this.innerEl.style.width = i || "400px"), t === "side" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState()), t === "variant" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState());
+  }
+  syncOpenState() {
+    const t = this.hasAttribute("open"), e = this.getAttribute("variant") || "overlay", i = this.getAttribute("z-index"), a = i ? Number(i) : 10, s = i ? Number(i) + 1 : 11;
+    e === "overlay" && this.overlayEl && (this.overlayEl.style.visibility = t ? "visible" : "hidden", this.overlayEl.style.opacity = t ? "1" : "0", this.overlayEl.style.zIndex = a.toString(), this.innerEl.style.zIndex = s.toString(), this.inert = !t), e === "push" && this.outer && (this.updateLayout(e, t), this.outer.style.zIndex = s.toString(), this.outer.inert = !t), e === "persistent" && this.outer && (this.updateLayout(e, t), this.outer.inert = !1);
+  }
+  updateLayout(t, e) {
+    const i = this.getAttribute("width") || "300px", a = this.getAttribute("side") || this._computedSide, s = t === "push" ? this.pushLayout : t === "persistent" ? this.persistentLayout : null;
+    if (!s) return;
+    if (window.innerWidth <= this.getBreakpoint()) {
+      t === "push" ? s.style.removeProperty("grid-template-columns") : t === "persistent" && (s.style.display = "grid", s.style.removeProperty("grid-template-columns"));
+      return;
+    }
+    s.style.display = "grid", t === "push" ? s.style.gridTemplateColumns = a === "left" ? e ? `${i} auto` : "0 auto" : e ? `auto ${i}` : "auto 0" : t === "persistent" && (s.style.gridTemplateColumns = a === "left" ? `${i} auto` : `auto ${i}`);
+  }
+  open() {
+    this.setAttribute("open", ""), this.dispatchEvent(new CustomEvent("mui-drawer-open", { bubbles: !0, composed: !0 }));
+  }
+  close() {
+    this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("mui-drawer-close", { bubbles: !0, composed: !0 }));
+  }
+}
+customElements.get("mui-drawer") || customElements.define("mui-drawer", p);

package/dist/esm/components/mui-dropdown/index.js

@@ -0,0 +1,172 @@
+const s = class s extends HTMLElement {
+  constructor() {
+    super(), this.button = null, this.menu = null, this.handleResize = () => {
+      var t;
+      (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
+    }, this.handleScroll = () => {
+      var t;
+      (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
+    }, this.handleFocusOut = (t) => {
+      var e;
+      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+    }, this.attachShadow({ mode: "open" });
+  }
+  handleKeyDown(t) {
+    if (t.key === "Escape") {
+      if (!this.menu) return;
+      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(
+        new CustomEvent("dropdown-toggle", {
+          detail: { open: !1 },
+          bubbles: !0
+        })
+      );
+    }
+  }
+  static get observedAttributes() {
+    return ["zindex", "position", "persistent"];
+  }
+  get persistent() {
+    return this.hasAttribute("persistent");
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "zindex" && this.menu && (this.menu.style.zIndex = i ?? "1"), t === "position" && this.menu && this.adjustPosition();
+  }
+  connectedCallback() {
+    var r, a, l, u, h;
+    this.render(), this.menu = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".dropdown-menu");
+    const t = this.getAttribute("zindex") || "1";
+    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (a = this.menu) == null || a.addEventListener("focusout", this.handleFocusOut);
+    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector('slot[name="action"]'), i = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) || [];
+    this.button = i.find(
+      (o) => o instanceof HTMLElement && o.tagName.toLowerCase() === "mui-button"
+    );
+    const n = (u = this.shadowRoot) == null ? void 0 : u.querySelector("slot:not([name])");
+    if (n) {
+      const o = () => {
+        const c = n.assignedElements({ flatten: !0 });
+        c.forEach((d) => {
+          d.classList.remove("dropdown-slot", "dropdown-slot-first", "dropdown-slot-last");
+        }), c.forEach((d, p) => {
+          d.setAttribute("variant", "tertiary"), d.classList.add("dropdown-slot"), p === 0 && d.classList.add("dropdown-slot-first"), p === c.length - 1 && d.classList.add("dropdown-slot-last"), d._dropdownListenerAdded || (d.addEventListener("click", () => {
+            var w, f;
+            this.persistent || ((w = this.menu) == null || w.classList.remove("show"), (f = this.menu) == null || f.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+          }), d._dropdownListenerAdded = !0);
+        });
+      };
+      n.addEventListener("slotchange", o), o();
+    }
+    this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), (h = this.button) == null || h.addEventListener("click", this.toggleMenu), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
+  }
+  disconnectedCallback() {
+    var t, e;
+    (t = this.button) == null || t.removeEventListener("click", this.toggleMenu), document.removeEventListener("click", this.closeMenu), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", this.handleResize), window.removeEventListener("scroll", this.handleScroll, !0), (e = this.menu) == null || e.removeEventListener("focusout", this.handleFocusOut);
+  }
+  closeWithAnimation() {
+    if (!this.menu) return;
+    this.menu.classList.remove("show"), setTimeout(() => {
+      this.menu && (this.menu.classList.contains("show") || (this.menu.style.display = "none"));
+    }, 150);
+  }
+  toggleMenu(t) {
+    var i;
+    if (t.stopPropagation(), !this.menu) return;
+    const e = this.menu.classList.contains("show");
+    !e && s.openDropdown && s.openDropdown !== this && s.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (i = this.menu) == null || i.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
+      var n, r;
+      (n = this.menu) == null || n.classList.add("show"), (r = this.menu) == null || r.removeAttribute("inert"), this.adjustPosition();
+    }), s.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
+  }
+  closeMenu(t) {
+    var i;
+    const e = t.composedPath();
+    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (i = this.menu) == null || i.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+  }
+  adjustPosition() {
+    if (!this.menu) return;
+    const t = this.menu, e = 8, i = 8;
+    t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
+    const n = this.getBoundingClientRect(), r = t.offsetWidth, a = t.offsetHeight, l = window.innerWidth, u = window.innerHeight;
+    let h = n.height + i;
+    u - n.bottom < a + i && n.top > u - n.bottom && (h = -(a + i));
+    let o = 0;
+    switch (this.getAttribute("position") || "left") {
+      case "left":
+        o = 0;
+        break;
+      case "center":
+        o = (n.width - r) / 2;
+        break;
+      case "right":
+      default:
+        o = n.width - r;
+        break;
+    }
+    const d = e - n.left, p = l - e - (n.left + r);
+    o = Math.max(d, Math.min(o, p)), r > l - e * 2 && (t.style.maxWidth = `${l - e * 2}px`), t.style.top = `${h}px`, t.style.left = `${o}px`;
+  }
+  render() {
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          position: relative;
+          display: inline-block;
+        }
+        .dropdown-menu {
+          /* hidden state */
+          display: none;
+          opacity: 0;
+          transform: translateY(-0.25rem);
+          transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
+          /* End */
+          min-width: 150px;
+          position: absolute;
+          z-index: 1;
+          border: var(--border-thin);
+          /* Unique Styles */
+          background: var(--dropdown-background);
+          border-color: var(--dropdown-border-color);
+          box-shadow: 0 var(--space-100) var(--space-200) var(--dropdown-shadow-color);
+          border-radius: var(--dropdown-radius);
+          padding: 1px;
+        }
+
+        .dropdown-menu.show {
+          /* visible state */
+          visibility: visible;
+          opacity: 1;
+          transform: translateY(0);
+        }
+
+        .dropdown-menu ::slotted(mui-button) {
+          width: 100%;
+          text-align: left;
+        }
+
+        .dropdown-menu ::slotted(mui-button:focus) {
+          z-index: 1;
+        }
+
+        .inner {
+          display: flex;
+          flex-direction: column;
+          gap: 1px;
+        }
+
+      </style>
+
+      <!-- Trigger button slot -->
+      <slot name="action"></slot>
+
+      <!-- Dropdown options slot -->
+      <div class="dropdown-menu">
+        <div class="inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.openDropdown = null;
+let m = s;
+customElements.get("mui-dropdown") || customElements.define("mui-dropdown", m);

package/dist/esm/components/mui-icons/add/index.js

@@ -43,9 +43,9 @@ class r extends HTMLElement {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 36 36"
       >
-      <path
-        d="M6 18.507a2.536 2.536 0 0 1 2.522-2.536h6.95V9.036A2.54 2.54 0 0 1 18.006 6.5a2.536 2.536 0 0 1 2.522 2.536v6.935h6.949A2.536 2.536 0 0 1 30 18.507a2.524 2.524 0 0 1-2.522 2.522h-6.95v6.949a2.524 2.524 0 0 1-2.521 2.522 2.527 2.527 0 0 1-2.536-2.522v-6.95H8.522A2.524 2.524 0 0 1 6 18.508"
-      ></path>
+        <path
+          d="M6 18.007a2.536 2.536 0 0 1 2.522-2.536h6.95V8.536A2.54 2.54 0 0 1 18.006 6a2.536 2.536 0 0 1 2.522 2.536v6.935h6.949A2.536 2.536 0 0 1 30 18.007a2.524 2.524 0 0 1-2.522 2.522h-6.95v6.949A2.524 2.524 0 0 1 18.008 30a2.527 2.527 0 0 1-2.536-2.522v-6.95H8.522A2.524 2.524 0 0 1 6 18.008"
+        ></path>
       </svg>
 
 

package/dist/esm/components/mui-icons/calendar/index.js

@@ -0,0 +1,55 @@
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, c, e) {
+    (t === "size" || t === "color") && c !== e && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "small", c = this.getAttribute("color"), s = c && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[c] || c || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, o = i[t] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${s};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M8.207 31.5C4.893 31.5 3 29.63 3 26.335V9.665C3 6.369 4.893 4.5 8.207 4.5h19.587C31.12 4.5 33 6.37 33 9.665v16.67c0 3.296-1.88 5.165-5.206 5.165zm.5-4.279h18.571c.933 0 1.42-.415 1.42-1.412V13.888c0-.997-.487-1.413-1.42-1.413H8.708c-.933 0-1.406.416-1.406 1.413v11.921c0 .997.473 1.412 1.406 1.412m6.738-10.509c-.529 0-.71-.166-.71-.678v-.817c0-.526.181-.692.71-.692h.808c.529 0 .71.166.71.692v.817c0 .512-.181.678-.71.678zm4.316 0c-.529 0-.71-.166-.71-.678v-.817c0-.526.181-.692.71-.692h.821c.515 0 .71.166.71.692v.817c0 .512-.195.678-.71.678zm4.316 0c-.516 0-.71-.166-.71-.678v-.817c0-.526.194-.692.71-.692h.82c.516 0 .71.166.71.692v.817c0 .512-.194.678-.71.678zm-12.961 4.223c-.515 0-.71-.166-.71-.678v-.817c0-.526.195-.692.71-.692h.821c.53 0 .71.166.71.692v.817c0 .512-.18.678-.71.678zm4.33 0c-.53 0-.71-.166-.71-.678v-.817c0-.526.18-.692.71-.692h.807c.529 0 .71.166.71.692v.817c0 .512-.181.678-.71.678zm4.315 0c-.529 0-.71-.166-.71-.678v-.817c0-.526.181-.692.71-.692h.821c.515 0 .71.166.71.692v.817c0 .512-.195.678-.71.678zm4.316 0c-.516 0-.71-.166-.71-.678v-.817c0-.526.194-.692.71-.692h.82c.516 0 .71.166.71.692v.817c0 .512-.194.678-.71.678zm-12.961 4.237c-.515 0-.71-.18-.71-.692v-.817c0-.512.195-.692.71-.692h.821c.53 0 .71.18.71.692v.817c0 .512-.18.692-.71.692zm4.33 0c-.53 0-.71-.18-.71-.692v-.817c0-.512.18-.692.71-.692h.807c.529 0 .71.18.71.692v.817c0 .512-.181.692-.71.692zm4.315 0c-.529 0-.71-.18-.71-.692v-.817c0-.512.181-.692.71-.692h.821c.515 0 .71.18.71.692v.817c0 .512-.195.692-.71.692z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-calendar") || customElements.define("mui-icon-calendar", l);

package/dist/esm/components/mui-icons/close/index.js

@@ -44,7 +44,7 @@ class c extends HTMLElement {
         viewBox="0 0 36 36"
       >
         <path
-          d="M8.436 28.063c-.934-.933-.894-2.55-.027-3.405l6.169-6.168-6.169-6.154c-.867-.855-.894-2.459.027-3.392.933-.934 2.55-.894 3.405-.04l6.168 6.155 6.142-6.142c.908-.907 2.459-.894 3.393.04.933.92.946 2.484.039 3.392L21.44 18.49l6.142 6.155c.907.907.894 2.472-.04 3.405-.92.933-2.484.933-3.392.026l-6.142-6.154-6.168 6.167c-.855.855-2.472.894-3.405-.026"
+          d="M8.435 27.563c-.933-.933-.894-2.55-.026-3.405l6.169-6.168-6.169-6.155c-.868-.854-.894-2.458.026-3.391.934-.934 2.55-.894 3.406-.04l6.168 6.155 6.142-6.142c.907-.907 2.459-.894 3.392.04.934.92.947 2.484.04 3.391L21.44 17.99l6.143 6.155c.907.907.894 2.471-.04 3.405-.92.933-2.485.933-3.392.026l-6.142-6.155-6.168 6.168c-.855.855-2.472.894-3.406-.026"
         ></path>
       </svg>
 

package/dist/esm/components/mui-icons/down-arrow-circle/index.js

@@ -44,7 +44,7 @@ class l extends HTMLElement {
         viewBox="0 0 36 36"
       >
         <path
-          d="M17.992 35.5C8.65 35.5 1 27.85 1 18.508S8.65 1.5 17.992 1.5 35 9.166 35 18.508 27.334 35.5 17.992 35.5m0-4.932c6.686 0 12.06-5.39 12.06-12.06 0-6.686-5.39-12.06-12.06-12.06s-12.06 5.374-12.06 12.06c0 6.67 5.39 12.06 12.06 12.06m0-20.327c1.186 0 2.102.806 2.102 1.928v6.07l-.205 2.972.948-1.439 1.423-1.643c.3-.364.806-.585 1.312-.585 1.027 0 1.754.695 1.754 1.66 0 .553-.142.932-.553 1.375l-5.042 5.374c-.459.506-1.028.759-1.739.759-.695 0-1.249-.253-1.723-.76l-5.042-5.373c-.411-.443-.553-.822-.553-1.376 0-.964.71-1.66 1.754-1.66.522 0 1.012.222 1.312.585l1.438 1.692.933 1.39-.205-2.97v-6.07c0-1.123.916-1.929 2.086-1.929"
+          d="M17.992 35C8.65 35 1 27.35 1 18.008S8.65 1 17.992 1 35 8.666 35 18.008 27.334 35 17.992 35m0-4.932c6.686 0 12.06-5.39 12.06-12.06 0-6.686-5.39-12.06-12.06-12.06s-12.06 5.374-12.06 12.06c0 6.67 5.39 12.06 12.06 12.06m0-20.327c1.186 0 2.102.806 2.102 1.928v6.07l-.205 2.972.948-1.439 1.423-1.643c.3-.364.806-.585 1.312-.585 1.027 0 1.754.695 1.754 1.66 0 .553-.142.932-.553 1.375l-5.042 5.374c-.459.506-1.028.759-1.739.759-.695 0-1.249-.253-1.723-.76l-5.042-5.373c-.411-.443-.553-.822-.553-1.376 0-.964.71-1.66 1.754-1.66.522 0 1.012.222 1.312.585l1.438 1.692.933 1.39-.205-2.97v-6.07c0-1.123.916-1.929 2.086-1.929"
         ></path>
       </svg>
 

package/dist/esm/components/mui-icons/down-chevron/index.js

@@ -44,7 +44,7 @@ class n extends HTMLElement {
         viewBox="0 0 36 36"
       >
         <path
-          d="M18 25.5c-.79 0-1.428-.269-2.091-.917L6.7 15.572C6.23 15.095 6 14.569 6 13.92c0-1.32 1.122-2.421 2.487-2.421.688 0 1.326.281 1.849.795l7.69 7.617 7.65-7.617c.524-.526 1.161-.795 1.837-.795 1.365 0 2.487 1.1 2.487 2.421 0 .648-.217 1.186-.701 1.638l-9.195 9.024c-.663.636-1.288.917-2.104.917"
+          d="M18 25c-.79 0-1.428-.269-2.091-.917L6.7 15.072C6.23 14.595 6 14.069 6 13.42 6 12.101 7.122 11 8.487 11c.688 0 1.326.281 1.849.795l7.69 7.617 7.65-7.617c.524-.526 1.161-.795 1.837-.795C28.878 11 30 12.1 30 13.421c0 .648-.217 1.186-.701 1.638l-9.195 9.024c-.663.636-1.288.917-2.104.917"
         ></path>
       </svg>