@muibook/components 11.0.0 → 12.0.0

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

@@ -1,4 +1,4 @@
-import { getPartMap as s } from "../../utils/part-map/index.js";
+import { getPartMap as a } from "../../utils/part-map/index.js";
 import "../mui-icons/down-chevron/index.js";
 class x extends HTMLElement {
   constructor() {
@@ -8,7 +8,7 @@ class x extends HTMLElement {
     return ["name", "value", "id", "label", "options", "disabled", "hide-label", "variant", "optional", "size"];
   }
   async connectedCallback() {
-    this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), this.partMap = s("text", "visual"), this.render(), this.setupListener();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), this.partMap = a("text", "visual"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
@@ -47,20 +47,20 @@ class x extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("name") || "", t = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, r = this.getAttribute("label") || "", o = this.getAttribute("value") || "", i = this.hasAttribute("hide-label"), h = this.hasAttribute("optional"), v = this.hasAttribute("disabled"), p = this.getAttribute("options") || "[]", n = this.getAttribute("size") || "medium", l = ["x-small", "small", "medium", "large"].includes(n) ? n : "medium", u = {
+    const e = this.getAttribute("name") || "", t = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, r = this.getAttribute("label") || "", o = this.getAttribute("value") || "", s = this.hasAttribute("hide-label"), d = this.hasAttribute("optional"), v = this.hasAttribute("disabled"), p = this.getAttribute("options") || "[]", n = this.getAttribute("size") || "medium", l = ["x-small", "small", "medium", "large"].includes(n) ? n : "medium", u = {
       "x-small": "xx-small",
       small: "x-small",
       medium: "x-small",
       large: "small"
-    }[l] || "x-small", c = this.getAttribute("variant") || "", b = c || "", m = i && r ? `aria-label="${r}"` : "";
-    let d = [];
+    }[l] || "x-small", c = this.getAttribute("variant") || "", g = c || "", b = s && r ? `aria-label="${r}"` : "";
+    let h = [];
     try {
-      d = JSON.parse(p);
-    } catch (a) {
-      console.error("Invalid JSON in options attribute", a);
+      h = JSON.parse(p);
+    } catch (i) {
+      console.error("Invalid JSON in options attribute", i);
     }
-    const g = d.map(
-      (a) => `<option value="${a.value}" ${a.value === o ? "selected" : ""} ${a.disabled ? "disabled" : ""}>${a.label}</option>`
+    const m = h.map(
+      (i) => `<option value="${i.value}" ${i.value === o ? "selected" : ""} ${i.disabled ? "disabled" : ""}>${i.label}</option>`
     ).join(""), f = (
       /*html*/
       `
@@ -71,11 +71,28 @@ class x extends HTMLElement {
         }
         label {
           font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
           font-weight: var(--font-weight-medium);
           margin-bottom: var(--space-100);
           color: var(--text-color);
           display: block;
         }
+        :host([size="x-small"]) label {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="small"]) label {
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        :host([size="medium"]) label {
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
+        :host([size="large"]) label {
+          font-size: var(--text-font-size-l);
+          line-height: var(--text-line-height-l);
+        }
         select {
           min-height: 4.4rem;
           line-height: var(--text-line-height);
@@ -177,6 +194,22 @@ class x extends HTMLElement {
           text-transform: uppercase;
           font-weight: var(--font-weight-medium);
         }
+        :host([size="x-small"]) .optional {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="small"]) .optional {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="medium"]) .optional {
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        :host([size="large"]) .optional {
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
         .optional-dot {
           display: inline-flex;
           align-items: center;
@@ -253,12 +286,12 @@ class x extends HTMLElement {
       </style>
       ${r ? (
         /*html*/
-        `<label for="${t}" class="${i ? "vh" : ""}">${r}${h ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>`
+        `<label for="${t}" class="${s ? "vh" : ""}">${r}${d ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>`
       ) : ""}
       <div style="position: relative;">
-        <select class="${[b, `size-${l}`].filter(Boolean).join(" ")}" part="${this.partMap || ""}" name="${e}" id="${t}" ${m} 
+        <select class="${[g, `size-${l}`].filter(Boolean).join(" ")}" part="${this.partMap || ""}" name="${e}" id="${t}" ${b} 
         ${v ? "disabled" : ""}>
-          ${g}
+          ${m}
         </select>
         <mui-icon-down-chevron class="chevron" size="${u}"></mui-icon-down-chevron>
       </div>
@@ -268,9 +301,9 @@ class x extends HTMLElement {
   }
   waitForPartMap() {
     return new Promise((e) => {
-      if (typeof s == "function") return e();
+      if (typeof a == "function") return e();
       const t = () => {
-        typeof s == "function" ? e() : requestAnimationFrame(t);
+        typeof a == "function" ? e() : requestAnimationFrame(t);
       };
       t();
     });

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

@@ -0,0 +1,139 @@
+class u extends HTMLElement {
+  static get observedAttributes() {
+    return ["shape", "size", "width", "height", "radius", "animation", "lines", "gap", "loading", "line-widths", "max-width", "duration"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e) {
+    t !== e && this.render();
+  }
+  getSizeHeight(t) {
+    const e = {
+      "x-small": "var(--text-font-size-xs)",
+      small: "var(--text-font-size-s)",
+      medium: "var(--text-font-size-m)",
+      large: "var(--text-font-size-l)"
+    };
+    return e[t] || e.medium;
+  }
+  getCircleSize(t) {
+    const e = {
+      "x-small": "var(--space-200)",
+      small: "var(--space-300)",
+      medium: "var(--space-400)",
+      large: "var(--space-500)"
+    };
+    return e[t] || e.medium;
+  }
+  getLineWidths(t) {
+    const e = (this.getAttribute("line-widths") || "").trim();
+    if (!e) {
+      const i = [];
+      for (let a = 0; a < t; a += 1)
+        t > 1 && a === t - 1 ? i.push("72%") : a % 3 === 1 ? i.push("92%") : i.push("100%");
+      return i;
+    }
+    const s = e.split(",").map((i) => i.trim()).filter(Boolean);
+    if (s.length === 0) return Array.from({ length: t }).map(() => "100%");
+    const n = [];
+    for (let i = 0; i < t; i += 1) n.push(s[Math.min(i, s.length - 1)]);
+    return n;
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = (this.getAttribute("shape") || "line").toLowerCase(), e = (this.getAttribute("size") || "medium").toLowerCase(), s = Math.max(1, Number(this.getAttribute("lines") || "1")), n = this.getAttribute("width") || "100%", i = this.getAttribute("max-width") || "", a = this.getAttribute("gap") || "var(--skeleton-gap, var(--space-200))", o = this.getAttribute("duration") || "var(--skeleton-animation-speed, 2000ms)", r = (this.getAttribute("loading") || "true").toLowerCase() !== "false", l = this.getAttribute("height") || (t === "circle" ? this.getCircleSize(e) : t === "rect" ? "var(--space-600)" : this.getSizeHeight(e)), h = this.getAttribute("radius") || (t === "circle" ? "999px" : "var(--skeleton-radius, var(--radius-200))"), d = this.getLineWidths(s), c = Array.from({ length: s }).map((g, m) => `<span class="block" style="--block-width: ${s > 1 ? d[m] : n}; --block-height: ${l}; --block-radius: ${h}; --block-max-width: ${i || "100%"};"></span>`).join("");
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+        .content[hidden],
+        .skeleton-shell[hidden] {
+          display: none !important;
+        }
+        .skeleton-shell {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-200);
+          width: 100%;
+          box-sizing: border-box;
+        }
+        .stack {
+          display: grid;
+          gap: ${a};
+          width: 100%;
+          min-width: 0;
+        }
+        .block {
+          display: block;
+          position: relative;
+          width: var(--block-width);
+          max-width: var(--block-max-width, 100%);
+          height: var(--block-height);
+          border-radius: var(--block-radius);
+          background: var(--skeleton-background, var(--surface-elevated-200));
+          overflow: hidden;
+          opacity: 1;
+        }
+        .block::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            100deg,
+            transparent 0%,
+            var(--skeleton-highlight, color-mix(in srgb, var(--white) 42%, transparent 58%)) 45%,
+            transparent 100%
+          );
+          transform: translateX(-120%);
+          opacity: var(--skeleton-shimmer-opacity, 0.6);
+          pointer-events: none;
+        }
+        :host([animation="shimmer"]) .block::after {
+          animation: skeletonShimmer ${o} linear infinite;
+        }
+        :host([animation="pulsate"]) .block {
+          animation: skeletonPulse ${o} ease-in-out infinite;
+        }
+        :host([animation="none"]) .block::after {
+          display: none;
+        }
+        :host([animation="none"]) .block {
+          animation: none;
+        }
+        @keyframes skeletonShimmer {
+          0% { transform: translateX(-120%); }
+          100% { transform: translateX(120%); }
+        }
+        @keyframes skeletonPulse {
+          0%, 100% { opacity: var(--skeleton-pulse-min-opacity, 0.55); }
+          50% { opacity: var(--skeleton-pulse-max-opacity, 1); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          :host([animation="shimmer"]) .block::after,
+          :host([animation="pulsate"]) .block {
+            animation: none !important;
+          }
+        }
+      </style>
+
+      <div class="skeleton-shell" ${r ? "" : "hidden"}>
+        <slot name="before"></slot>
+        <div class="stack">
+          ${c}
+        </div>
+        <slot name="after"></slot>
+      </div>
+
+      <div class="content" ${r ? "hidden" : ""}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.get("mui-skeleton") || customElements.define("mui-skeleton", u);