@muibook/components 7.1.0 → 8.0.0

package/dist/esm/components/mui-icons/music-microphone/index.js

@@ -0,0 +1,55 @@
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = o[e] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M22.07 4.952c2.503-2.573 6.2-2.882 8.984-.127 2.77 2.784 2.446 6.496-.126 8.984zm-3.74 28.16c-1.04 0-1.87-.8-1.87-1.84v-6.285l-6.13 5.708c-.702.646-1.476.646-2.474-.113l-2.503 2.039c-.492.393-1.124.337-1.56-.113l-.422-.407c-.422-.436-.506-1.069-.126-1.533l2.038-2.545c-.745-.998-.773-1.785-.112-2.488l12.99-13.89c-.084-1.744.647-3.46 2.067-4.851l8.844 8.857c-1.364 1.42-3.107 2.151-4.823 2.08l-3.992 3.713-.07 9.827a1.84 1.84 0 0 1-1.857 1.842M7.758 26.928l1.209 1.195 11.964-11.6a8 8 0 0 1-.843-.744 6.5 6.5 0 0 1-.717-.844z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-music-microphone") || customElements.define("mui-icon-music-microphone", c);

package/dist/esm/components/mui-icons/music-quarter-note/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), c = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = o[e] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${c};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M14.394 20.817c0-2.239 1.442-3.706 4.19-4.303l1.99-.435c.2-.05.274-.2.274-.485V6.428a1.49 1.49 0 0 1 1.48-1.467c.808 0 1.467.671 1.467 1.467v12.635c0 4.042-3.233 5.634-5.21 5.634-2.425 0-4.192-1.63-4.192-3.88M3.002 27.159c0-2.238 1.443-3.693 4.191-4.303l1.977-.435c.212-.037.274-.186.274-.485v-9.153a1.48 1.48 0 0 1 1.48-1.467c.808 0 1.467.659 1.467 1.467v12.635c0 4.042-3.22 5.621-5.21 5.621-2.425 0-4.179-1.617-4.179-3.88m20.607 0c0-2.238 1.442-3.693 4.178-4.303l1.99-.435c.199-.037.273-.186.273-.485v-9.153a1.48 1.48 0 0 1 1.48-1.467c.809 0 1.468.659 1.468 1.467v12.635c0 4.042-3.221 5.621-5.21 5.621-2.426 0-4.18-1.617-4.18-3.88"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-music-quarter-note") || customElements.define("mui-icon-music-quarter-note", r);

package/dist/esm/components/mui-icons/play-rectangle/index.js

@@ -0,0 +1,55 @@
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = o[e] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M7.67 30.18c-2.974 0-4.673-1.687-4.673-4.66V10.48c0-2.973 1.699-4.66 4.672-4.66h20.662c2.986 0 4.672 1.687 4.672 4.66v15.04c0 2.973-1.686 4.66-4.672 4.66zm.524-3.86h19.625c.874 0 1.324-.4 1.324-1.35V11.03c0-.95-.45-1.337-1.324-1.337H8.194c-.887 0-1.337.387-1.337 1.336v13.942c0 .949.45 1.349 1.337 1.349m8.057-3.398c-.962.575-2.099.062-2.099-1.087v-7.72c0-1.15 1.125-1.662 2.1-1.087l6.383 3.76a1.367 1.367 0 0 1 0 2.374z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-play-rectangle") || customElements.define("mui-icon-play-rectangle", c);

package/dist/esm/components/mui-icons/play-stack/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(e, t, c) {
+    (e === "size" || e === "color") && t !== c && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), o = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", s = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, i = s[e] ?? s.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${i};
+          height: ${i};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${o};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M8.553 3.242c.121-1.43 1.052-2.24 2.55-2.24H24.52c1.497 0 2.428.81 2.55 2.24zM6.327 7.748C6.49 6.264 7.34 5.347 9.093 5.347H26.53c1.753 0 2.603.917 2.765 2.4zm1.943 27.25c-3.21 0-5.046-1.822-5.046-5.032V14.789c0-3.21 1.835-5.018 5.046-5.018h19.46c3.224 0 5.046 1.821 5.046 5.018v15.176c0 3.211-1.822 5.032-4.91 5.032zm.566-4.17H27.3c.823 0 1.308-.43 1.308-1.443V15.383c0-1.012-.485-1.443-1.43-1.443H8.837c-.959 0-1.444.431-1.444 1.443v14.002c0 1.012.485 1.444 1.443 1.444m7.275-3.102c-1.038.634-2.266.081-2.266-1.174v-8.336c0-1.241 1.214-1.78 2.266-1.16l6.894 4.06c.984.58.998 1.97 0 2.563z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-play-stack") || customElements.define("mui-icon-play-stack", l);

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

@@ -0,0 +1,53 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, s) {
+    (e === "size" || e === "color") && t !== s && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, o = i[e] ?? 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: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+      <path d="M4.5 15.873C4.5 9.583 9.622 4.5 15.962 4.5c6.326 0 11.462 5.082 11.462 11.373 0 1.996-.543 3.874-1.483 5.489l4.633 4.596c.635.63.926 1.458.926 2.298 0 1.839-1.39 3.244-3.256 3.244-.873 0-1.734-.302-2.356-.92l-4.685-4.648a11.14 11.14 0 0 1-5.241 1.3c-6.34 0-11.462-5.082-11.462-11.36m4.328 0c0 3.887 3.203 7.065 7.134 7.065 3.93 0 7.12-3.178 7.12-7.065 0-3.9-3.19-7.079-7.12-7.079s-7.134 3.178-7.134 7.079"></path>
+    </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-search") || customElements.define("mui-icon-search", r);

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

@@ -8,7 +8,7 @@ class m extends HTMLElement {
   connectedCallback() {
     this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, s, o) {
+  attributeChangedCallback(e, a, o) {
     var r;
     const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
     t && (e === "value" && (t.value = o ?? ""), e === "disabled" && (o === null || o === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "")), (e === "type" || e === "placeholder" || e === "label" || e === "hide-label") && (this.render(), this.setupListener()));
@@ -17,21 +17,21 @@ class m extends HTMLElement {
     var o, t;
     const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
     if (!e) return;
-    const s = e.cloneNode(!0);
-    (t = e.parentNode) == null || t.replaceChild(s, e), s.addEventListener("input", (r) => {
-      const a = r.target;
+    const a = e.cloneNode(!0);
+    (t = e.parentNode) == null || t.replaceChild(a, e), a.addEventListener("input", (r) => {
+      const s = r.target;
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { value: a.value },
+          detail: { value: s.value },
           bubbles: !0,
           composed: !0
         })
       );
-    }), s.addEventListener("change", (r) => {
-      const a = r.target;
+    }), a.addEventListener("change", (r) => {
+      const s = r.target;
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { value: a.value },
+          detail: { value: s.value },
           bubbles: !0,
           composed: !0
         })
@@ -41,20 +41,20 @@ class m extends HTMLElement {
   updateSlottedButtons() {
     requestAnimationFrame(() => {
       var t, r;
-      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="before"]'), s = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="after"]'), o = (a) => {
-        if (!a) return;
-        a.assignedNodes({ flatten: !0 }).forEach((l) => {
-          if (l.nodeType === Node.ELEMENT_NODE) {
-            const i = l, n = i.tagName.toLowerCase();
-            (n === "mui-button" || n === "mui-link") && (i.setAttribute("usage", "input"), i.setAttribute("size", "medium"), i.removeAttribute("variant"), i.removeAttribute("weight"));
+      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="before"]'), a = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="after"]'), o = (s) => {
+        if (!s) return;
+        s.assignedNodes({ flatten: !0 }).forEach((i) => {
+          if (i.nodeType === Node.ELEMENT_NODE) {
+            const l = i, n = l.tagName.toLowerCase();
+            (n === "mui-button" || n === "mui-link") && (l.setAttribute("usage", "input"), l.setAttribute("size", "medium"), l.removeAttribute("variant"), l.removeAttribute("weight"));
           }
         });
       };
-      o(e), o(s);
+      o(e), o(a);
     });
   }
   render() {
-    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], s = this.getAttribute("type") || "text", o = e.includes(s) ? s : "text", t = this.getAttribute("name") || "", r = this.getAttribute("value") || "", a = this.getAttribute("placeholder") || "", d = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, l = this.getAttribute("label") || "", i = this.hasAttribute("hide-label"), n = this.hasAttribute("disabled"), c = i && l ? `aria-label="${l}"` : "", u = this.getAttribute("variant") || "", b = u || "", h = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, f = [b, h ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), v = (
+    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], a = this.getAttribute("type") || "text", o = e.includes(a) ? a : "text", t = this.getAttribute("name") || "", r = this.getAttribute("value") || "", s = this.getAttribute("placeholder") || "", d = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", l = this.hasAttribute("hide-label"), n = this.hasAttribute("disabled"), c = l && i ? `aria-label="${i}"` : "", u = this.getAttribute("variant") || "", h = u || "", b = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, f = [h, b ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), v = (
       /*html*/
       `
       <style>
@@ -83,11 +83,12 @@ class m extends HTMLElement {
           border-radius: var(--radius-100);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
-          color: var(--text-color);
+          color: var(--form-default-text-color);
           background: var(--input-background);
         }
         input:hover {
           border-color: var(--form-default-border-color-hover);
+          color: var(--form-default-text-color-hover);
         }
         input:focus {
           outline: var(--outline-thick);
@@ -127,6 +128,29 @@ class m extends HTMLElement {
           border-color: var(--form-error-border-color-hover);
           box-shadow: 0 0 0 2px var(--form-error-border-color-hover);
         }
+
+
+        /* Placeholder styles */
+        input::placeholder {
+          color: var(--form-default-placeholder-color);
+          opacity: 1;
+        }
+
+        /* Optional: hover */
+        input:hover::placeholder {
+          color: var(--form-default-placeholder-color-hover);
+        }
+
+        /* Optional: focus */
+        input:focus::placeholder {
+          color: var(--form-default-placeholder-color-focus);
+        }
+
+        /* Optional: disabled */
+        input:disabled::placeholder {
+          color: var(--form-default-placeholder-color-disabled);
+        }
+
         .vh {
           position: absolute;
           width: 1px;
@@ -201,7 +225,7 @@ class m extends HTMLElement {
         
 
       </style>
-      ${l ? `<label for="${d}" class="${i ? "vh" : ""}">${l}</label>` : ""}
+      ${i ? `<label for="${d}" class="${l ? "vh" : ""}">${i}</label>` : ""}
     <div class="input-wrapper">
       <slot name="before"></slot>
       <input
@@ -210,7 +234,7 @@ class m extends HTMLElement {
         name="${t}"
         id="${d}"
         value="${r}"
-        placeholder="${a}"
+        placeholder="${s}"
         ${n ? 'disabled aria-disabled="true"' : ""}
         ${c}
       />