@muibook/components 19.6.0 → 20.1.0

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

@@ -0,0 +1,199 @@
+import "../mui-button/index.js";
+import "../mui-icons/left-chevron/index.js";
+import "../mui-icons/right-chevron/index.js";
+class z extends HTMLElement {
+  constructor() {
+    super(), this.selectedDate = null, this.viewMode = "single", this.attachShadow({ mode: "open" });
+    const t = /* @__PURE__ */ new Date();
+    this.currentDate = new Date(t.getFullYear(), t.getMonth(), 1);
+  }
+  static get observedAttributes() {
+    return ["value", "view", "min-date", "max-date"];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t ?? "");
+  }
+  focus(t) {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".selected, .today, .day:not(.empty)");
+    e && typeof e.focus == "function" ? e.focus(t) : super.focus(t);
+  }
+  connectedCallback() {
+    this.syncAttributes(), this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && (this.syncAttributes(), this.render());
+  }
+  syncAttributes() {
+    const t = this.getAttribute("value");
+    if (t) {
+      const e = new Date(t);
+      isNaN(e.getTime()) || (this.selectedDate = e, this.hasAttribute("data-initialized") || (this.currentDate = new Date(e.getFullYear(), e.getMonth(), 1), this.setAttribute("data-initialized", "true")));
+    }
+    this.viewMode = this.getAttribute("view") === "double" ? "double" : "single";
+  }
+  changeMonth(t) {
+    this.currentDate.setMonth(this.currentDate.getMonth() + t), this.render();
+  }
+  selectDate(t) {
+    this.selectedDate = t;
+    const e = t.getFullYear(), i = String(t.getMonth() + 1).padStart(2, "0"), h = String(t.getDate()).padStart(2, "0"), o = `${e}-${i}-${h}`;
+    this.setAttribute("value", o), this.dispatchEvent(new CustomEvent("change", { detail: { value: o }, bubbles: !0, composed: !0 }));
+  }
+  renderMonth(t, e) {
+    var d, u, g;
+    const i = new Date(t, e + 1, 0).getDate(), h = new Date(t, e, 1).getDay(), o = new Intl.DateTimeFormat("en-US", { month: "long" }).format(new Date(t, e, 1)), p = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+    let c = "";
+    for (let n = 0; n < h; n++)
+      c += '<div class="day empty"></div>';
+    const r = /* @__PURE__ */ new Date(), m = r.getFullYear() === t && r.getMonth() === e, s = ((d = this.selectedDate) == null ? void 0 : d.getFullYear()) === t && ((u = this.selectedDate) == null ? void 0 : u.getMonth()) === e;
+    for (let n = 1; n <= i; n++) {
+      const a = m && r.getDate() === n, v = s && ((g = this.selectedDate) == null ? void 0 : g.getDate()) === n, y = `${t}-${String(e + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`, l = ["day"];
+      v && l.push("selected"), a && l.push("today"), c += `<mui-button variant="${v ? "primary" : "tertiary"}" size="small" class="${l.join(" ")}" data-date="${y}" aria-label="${o} ${n}, ${t}">${n}</mui-button>`;
+    }
+    return (
+      /*html*/
+      `
+      <div class="month">
+        <div class="month-header">
+          <div class="month-title">${o} ${t}</div>
+        </div>
+        <div class="grid">
+          ${p.map((n) => `<div class="weekday">${n}</div>`).join("")}
+          ${c}
+        </div>
+      </div>
+    `
+    );
+  }
+  render() {
+    var h, o, p;
+    if (!this.shadowRoot) return;
+    const t = this.currentDate.getFullYear(), e = this.currentDate.getMonth(), i = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          font-family: inherit;
+          --calendar-width: 28rem;
+          --calendar-day-size: 3.6rem;
+        }
+        .calendar-container {
+          position: relative;
+          display: flex;
+          gap: var(--space-400);
+          padding: var(--space-200);
+        }
+        .controls {
+          position: absolute;
+          top: var(--space-200);
+          left: var(--space-200);
+          right: var(--space-200);
+          display: flex;
+          justify-content: space-between;
+          pointer-events: none;
+        }
+        .controls mui-button {
+          pointer-events: auto;
+        }
+        .month {
+          width: var(--calendar-width);
+        }
+        .month-header {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 3.6rem;
+          margin-bottom: var(--space-200);
+        }
+        .month-title {
+          font-weight: var(--font-weight-medium);
+          font-size: var(--text-font-size-s);
+          color: var(--text-color);
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: var(--space-050);
+          justify-items: center;
+        }
+        .weekday {
+          font-size: var(--text-font-size-xs);
+          color: var(--text-color-secondary);
+          font-weight: var(--font-weight-medium);
+          width: var(--calendar-day-size);
+          height: var(--calendar-day-size);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .day {
+          width: var(--calendar-day-size);
+          height: var(--calendar-day-size);
+          --action-size-small: var(--calendar-day-size);
+          --action-padding-small: 0;
+        }
+        :host([slotted]) .day {
+          --action-radius-small: var(--stroke-size-200);
+        }
+        .day.today {
+          --action-tertiary-text-color: var(--action-primary-background);
+        }
+        .day.empty {
+          cursor: default;
+        }
+      </style>
+      <div class="calendar-container">
+        <div class="controls">
+          <mui-button variant="tertiary" size="small" id="prev-btn" aria-label="Previous Month">
+            <mui-icon-left-chevron></mui-icon-left-chevron>
+          </mui-button>
+          <mui-button variant="tertiary" size="small" id="next-btn" aria-label="Next Month">
+            <mui-icon-right-chevron></mui-icon-right-chevron>
+          </mui-button>
+        </div>
+        ${this.renderMonth(t, e)}
+        ${this.viewMode === "double" ? this.renderMonth(t, e + 1) : ""}
+      </div>
+    `
+    );
+    this.shadowRoot.innerHTML = i, (h = this.shadowRoot.getElementById("prev-btn")) == null || h.addEventListener("click", () => this.changeMonth(-1)), (o = this.shadowRoot.getElementById("next-btn")) == null || o.addEventListener("click", () => this.changeMonth(1)), this.shadowRoot.querySelectorAll(".day:not(.empty)").forEach((c) => {
+      c.addEventListener("click", (r) => {
+        const s = r.target.getAttribute("data-date");
+        if (s) {
+          const [d, u, g] = s.split("-").map(Number);
+          this.selectDate(new Date(d, u - 1, g));
+        }
+      });
+    }), (p = this.shadowRoot.querySelector(".calendar-container")) == null || p.addEventListener("keydown", (c) => {
+      const r = c.target;
+      if (!r.classList.contains("day") || r.classList.contains("empty")) return;
+      const m = c, s = m.key;
+      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(s)) {
+        m.preventDefault();
+        const d = r.getAttribute("data-date");
+        if (!d) return;
+        const [u, g, n] = d.split("-").map(Number), a = new Date(u, g - 1, n);
+        s === "ArrowLeft" && a.setDate(a.getDate() - 1), s === "ArrowRight" && a.setDate(a.getDate() + 1), s === "ArrowUp" && a.setDate(a.getDate() - 7), s === "ArrowDown" && a.setDate(a.getDate() + 7);
+        const v = () => {
+          var S;
+          const D = a.getFullYear(), $ = String(a.getMonth() + 1).padStart(2, "0"), A = String(a.getDate()).padStart(2, "0"), x = `${D}-${$}-${A}`, M = (S = this.shadowRoot) == null ? void 0 : S.querySelector(`.day[data-date="${x}"]`);
+          M == null || M.focus();
+        }, y = this.currentDate.getMonth(), l = this.currentDate.getFullYear(), f = a.getMonth(), w = a.getFullYear();
+        let b = !1;
+        if (this.viewMode === "single")
+          b = y === f && l === w;
+        else {
+          const D = new Date(l, y + 1, 1);
+          b = y === f && l === w || D.getMonth() === f && D.getFullYear() === w;
+        }
+        b ? v() : (this.currentDate = new Date(w, f, 1), this.render(), setTimeout(v, 0));
+      }
+    });
+  }
+}
+customElements.get("mui-calendar") || customElements.define("mui-calendar", z);

package/dist/esm/components/mui-card/body/index.js

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class m extends HTMLElement {
   static get observedAttributes() {
     return ["condensed"];
   }
@@ -8,7 +8,7 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(s, a, r) {
+  attributeChangedCallback(s, l, a) {
     s === "condensed" && this.updateSlottedContent();
   }
   updateSlottedContent() {
@@ -16,28 +16,43 @@ class l extends HTMLElement {
       if (!this.shadowRoot) return;
       const s = this.shadowRoot.querySelector("slot");
       if (!s) return;
-      const a = s.assignedNodes({ flatten: !0 });
+      const l = s.assignedNodes({ flatten: !0 });
       this.removeAttribute("inner-space"), this.removeAttribute("has-card-slat-group"), this.removeAttribute("has-accordion-slat-group");
-      let r = !1;
-      a.forEach((i) => {
-        if (i.nodeType === Node.ELEMENT_NODE) {
-          const t = i, n = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
-          n instanceof HTMLElement && (n.querySelectorAll("mui-accordion-block").forEach((o) => {
+      let a = !1;
+      const u = [];
+      if (l.forEach((r) => {
+        if (r.nodeType === Node.ELEMENT_NODE) {
+          const t = r, c = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
+          c instanceof HTMLElement && (c.querySelectorAll("mui-accordion-block").forEach((o) => {
             o.setAttribute("card-slot", "");
-          }), r = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
+          }), a = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
             const o = e.getAttribute("variant");
-            (o === "action" || o === "row") && (e.setAttribute("card-slot", ""), this.hasAttribute("condensed") ? e.setAttribute("condensed-slot", "") : e.removeAttribute("condensed-slot"));
+            (o === "action" || o === "row") && (e.setAttribute("card-slot", ""), e.removeAttribute("condensed-slot-first"), e.removeAttribute("condensed-slot-last"), this.hasAttribute("condensed") ? (e.setAttribute("condensed-slot", ""), u.push(e)) : e.removeAttribute("condensed-slot"));
           });
-          const c = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
-          c instanceof HTMLElement && (c.querySelectorAll("mui-cell").forEach((o) => {
+          const d = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          d instanceof HTMLElement && (d.setAttribute("card-slot", ""), d.querySelectorAll("mui-cell").forEach((o) => {
             o.setAttribute("card-slot", "");
-          }), r = !0);
-          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          d.length && (r = !0, d.forEach((e) => {
+          }), a = !0), (t.tagName.toLowerCase() === "mui-avatar-group" ? [t] : Array.from(t.querySelectorAll("mui-avatar-group"))).forEach((e) => {
+            e.setAttribute("card-slot", "");
+          }), (t.tagName.toLowerCase() === "mui-chip-rail" ? [t] : Array.from(t.querySelectorAll("mui-chip-rail"))).forEach((e) => {
+            e.setAttribute("card-slot", "");
+          }), (t.tagName.toLowerCase() === "mui-code" ? [t] : Array.from(t.querySelectorAll("mui-code"))).forEach((e) => {
+            e.setAttribute("card-slot", "");
+          });
+          const h = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          h.length && (a = !0, h.forEach((e) => {
             e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.setAttribute("has-accordion-slat-group", "") : (this.setAttribute("inner-space", ""), this.setAttribute("has-card-slat-group", ""));
           }));
         }
-      }), !r && !this.hasAttribute("condensed") && this.setAttribute("inner-space", "");
+      }), u.length) {
+        const r = l.flatMap((c) => {
+          if (c.nodeType !== Node.ELEMENT_NODE) return [];
+          const n = c;
+          return n.tagName.toLowerCase() === "mui-slat" ? [n] : Array.from(n.querySelectorAll("mui-slat"));
+        }), t = r[0], i = r[r.length - 1];
+        t != null && t.hasAttribute("condensed-slot") && t.setAttribute("condensed-slot-first", ""), i != null && i.hasAttribute("condensed-slot") && i.setAttribute("condensed-slot-last", "");
+      }
+      !a && !this.hasAttribute("condensed") && this.setAttribute("inner-space", "");
     });
   }
   render() {
@@ -73,7 +88,7 @@ class l extends HTMLElement {
         :host([condensed][inner-space]),
         :host([condensed][has-card-slat-group]),
         :host([condensed][has-accordion-slat-group]) {
-          padding: var(--space-000);
+          padding: var(--stroke-size-100);
         }
         
       </style>
@@ -83,4 +98,4 @@ class l extends HTMLElement {
     this.shadowRoot.innerHTML = s, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", l);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", m);

package/dist/esm/components/mui-card/footer/index.js

@@ -1,4 +1,4 @@
-class c extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -46,23 +46,25 @@ class c extends HTMLElement {
       if (!this.shadowRoot) return;
       const s = this.shadowRoot.querySelector("slot");
       if (!s) return;
-      const r = s.assignedNodes({ flatten: !0 }).filter((e) => {
+      const i = s.assignedNodes({ flatten: !0 }).filter((e) => {
         var o;
         return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && ((o = e.textContent) == null ? void 0 : o.trim()) !== "";
       });
-      if (r.length === 0) {
+      if (i.length === 0) {
         this.setAttribute("hidden", "");
         return;
       }
-      let i = !1, a = !1;
-      r.forEach((e) => {
+      let a = !1, d = !1;
+      i.forEach((e) => {
         var o, n;
         if (e.nodeType === Node.ELEMENT_NODE) {
-          const t = e, d = t.tagName.toLowerCase();
-          (d === "mui-code" || (o = t.querySelector) != null && o.call(t, "mui-code")) && (i = !0), (d === "mui-button-group" || (n = t.querySelector) != null && n.call(t, "mui-button-group")) && (a = !0);
+          const t = e, r = t.tagName.toLowerCase();
+          (r === "mui-code" || (o = t.querySelector) != null && o.call(t, "mui-code")) && (a = !0, (r === "mui-code" ? [t] : Array.from(t.querySelectorAll("mui-code"))).forEach((c) => {
+            c.setAttribute("card-slot", "");
+          })), (r === "mui-button-group" || (n = t.querySelector) != null && n.call(t, "mui-button-group")) && (d = !0);
         }
-      }), i || this.setAttribute("inner-space", ""), a && this.setAttribute("has-button-group", "");
+      }), a || this.setAttribute("inner-space", ""), d && this.setAttribute("has-button-group", "");
     });
   }
 }
-customElements.get("mui-card-footer") || customElements.define("mui-card-footer", c);
+customElements.get("mui-card-footer") || customElements.define("mui-card-footer", l);

package/dist/esm/components/mui-carousel/controller/index.js

@@ -99,7 +99,7 @@ class n extends HTMLElement {
       /* Base positioning for all control slots */
       ::slotted([slot="controls"]) {
         position: absolute;
-        z-index: 10;
+        z-index: 1;
       }
 
       ::slotted([slot="controls"][controlsPosition="top"]) {

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

@@ -6,29 +6,34 @@ class p extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  focus(e) {
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    t ? t.focus(e) : super.focus(e);
+  }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, t, s) {
-    var c, a, o;
+  attributeChangedCallback(e, t, i) {
+    var s, a, o;
     if (e === "checked") {
-      const i = (c = this.shadowRoot) == null ? void 0 : c.querySelector("input");
-      if (!i) return;
-      i.checked = s !== null;
+      const c = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+      if (!c) return;
+      c.checked = i !== null;
     }
     if (e === "disabled") {
-      const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("input");
-      if (!i) return;
-      i.disabled = s !== null;
+      const c = (a = this.shadowRoot) == null ? void 0 : a.querySelector("input");
+      if (!c) return;
+      c.disabled = i !== null;
     }
     if (e === "indeterminate") {
-      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-      if (!i) return;
-      const r = s !== null;
-      i.indeterminate = r, r && (i.checked = !0, this.setAttribute("checked", ""));
+      const c = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+      if (!c) return;
+      const r = i !== null;
+      c.indeterminate = r, r && (c.checked = !0, this.setAttribute("checked", ""));
     }
     ["id", "size"].includes(e) && (this.render(), this.setupListener());
   }
@@ -40,11 +45,11 @@ class p extends HTMLElement {
   setupListener() {
     var t;
     const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
-    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (s) => {
-      const c = s.target;
-      c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
+    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (i) => {
+      const s = i.target;
+      s.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: c.checked },
+          detail: { checked: s.checked },
           bubbles: !0,
           composed: !0
         })
@@ -52,7 +57,7 @@ class p extends HTMLElement {
     }, e.addEventListener("change", this._changeHandler));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), s = this.hasAttribute("disabled"), c = this.getAttribute("size") || "medium", o = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", r = {
+    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), s = this.getAttribute("size") || "medium", o = ["x-small", "small", "medium", "large"].includes(s) ? s : "medium", r = {
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
@@ -173,7 +178,7 @@ class p extends HTMLElement {
             id="${e}" 
             ${n ? "indeterminate" : ""}
             ${n || t ? "checked" : ""}
-            ${s ? "disabled" : ""} 
+            ${i ? "disabled" : ""} 
           />
           ${u}
         </span>