@muibook/components 1.0.0

package/dist/esm/mui-icons/notification/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, 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.4rem",
+      medium: "3.6rem",
+      large: "4.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="M4 25.241c0-1.665 1.126-2.921 2.478-4.005 1.126-.899 1.312-2.55 1.696-5.34.437-4.362 2.226-7.653 5.486-8.816C14.35 5.216 15.966 4 18.007 4c2.027 0 3.644 1.216 4.333 3.08 3.26 1.163 5.049 4.454 5.486 8.816.384 2.79.57 4.441 1.696 5.34C30.874 22.32 32 23.576 32 25.241c0 1.626-1.14 2.71-2.902 2.71h-5.009C23.983 30.449 21.677 33 18.007 33c-3.684 0-5.99-2.551-6.096-5.05H6.902C5.14 27.95 4 26.868 4 25.242m5.075-1.084h17.73v-.132a5.1 5.1 0 0 1-1.762-1.507c-.768-.978-1.153-3.529-1.352-5.816-.291-4.044-1.709-5.67-3.418-6.12-.305-.079-.49-.211-.544-.647-.132-1.23-.755-1.943-1.722-1.943-.981 0-1.604.714-1.736 1.943-.053.436-.239.568-.544.647-1.709.45-3.127 2.076-3.418 6.12-.2 2.287-.57 4.838-1.352 5.816-.517.674-1.206 1.163-1.882 1.507zm6.732 3.794c.093 1.242.994 2.101 2.2 2.101 1.192 0 2.093-.859 2.186-2.101z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-notification", l);

package/dist/esm/mui-icons/right-chevron/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, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.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: ${r};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M25.5 18.5c0 .79-.288 1.441-.983 2.091L14.853 29.8c-.498.484-1.075.701-1.77.701-1.416 0-2.583-1.122-2.583-2.487 0-.688.302-1.326.84-1.849l8.168-7.677-8.169-7.651c-.55-.523-.839-1.173-.839-1.85 0-1.351 1.167-2.486 2.583-2.486.708 0 1.272.23 1.77.701l9.664 9.208c.681.65.97 1.288.983 2.091"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-right-chevron", l);

package/dist/esm/mui-icons/stop/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, o) {
+    (e === "size" || e === "color") && t !== o && 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)", s = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.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: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        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.06m-3.92-6.37c-1.09 0-1.802-.648-1.802-1.675v-8.077c0-1.012.711-1.66 1.802-1.66h7.824c1.091 0 1.802.648 1.802 1.66v8.077c0 1.027-.711 1.675-1.802 1.675z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-stop", r);

package/dist/esm/mui-icons/subtract/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, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", s = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.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: ${r};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M7.698 21C6.327 21 5 19.859 5 18.5S6.327 16 7.698 16h20.604C29.732 16 31 17.141 31 18.5S29.733 21 28.302 21z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-subtract", l);

package/dist/esm/mui-icons/sun/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"), i = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", s = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, o = s[e] ?? s.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: ${i};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M18.692 8.106c-1.081 0-1.994-.914-1.994-1.996V3.524c0-1.096.913-2.024 1.994-2.024 1.096 0 2.009.928 2.009 2.024V6.11c0 1.082-.913 1.996-2.009 1.996m7.373 3.12c-.772-.773-.786-2.094-.042-2.839l1.84-1.841c.758-.76 2.064-.787 2.809-.042.772.773.786 2.08.042 2.839l-1.826 1.841c-.772.773-2.079.787-2.823.042m-14.746 0c-.744.745-2.05.731-2.809-.042L6.685 9.33c-.745-.745-.73-2.052.042-2.825.744-.745 2.05-.717 2.809.042l1.825 1.841c.745.745.73 2.066-.042 2.84m7.373 15.377c-4.424 0-8.075-3.655-8.075-8.096s3.651-8.096 8.075-8.096c4.438 0 8.09 3.655 8.09 8.096s-3.652 8.096-8.09 8.096m10.42-8.096c0-1.082.914-1.996 1.995-1.996h2.584c1.095 0 2.008.914 2.008 1.996s-.913 1.996-2.008 1.996h-2.584c-1.081 0-1.994-.914-1.994-1.996m-20.812 0c0 1.082-.927 1.996-2.023 1.996H3.693c-1.08 0-1.994-.914-1.994-1.996s.913-1.996 1.994-1.996h2.584c1.096 0 2.023.914 2.023 1.996m17.723 7.337c.773-.773 2.079-.787 2.837-.042l1.84 1.841c.772.759.786 2.066.042 2.811-.773.773-2.079.787-2.837.042l-1.84-1.827c-.772-.773-.786-2.08-.042-2.825m-14.662 0c.745.745.73 2.052-.042 2.825l-1.84 1.827c-.744.745-2.05.731-2.836-.042-.73-.745-.73-2.066.042-2.825l1.854-1.827c.744-.745 2.05-.731 2.822.042m7.331 3.05c1.096 0 2.009.914 2.009 2.01v2.586c0 1.082-.913 2.01-2.009 2.01-1.081 0-1.994-.928-1.994-2.01v-2.586c0-1.096.913-2.01 1.994-2.01"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-sun", l);

package/dist/esm/mui-icons/toggle/index.js

@@ -0,0 +1,72 @@
+class s extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.addEventListener("click", () => {
+      if (this.toggleAttribute("toggle"), !this.shadowRoot) return;
+      const t = this.shadowRoot.querySelector("mui-button");
+      t && (t.blur(), requestAnimationFrame(() => {
+        t.focus({ preventScroll: !0 });
+      }));
+    }), this.addEventListener("keydown", (t) => {
+      t.code === "Space" && (t.preventDefault(), this.click());
+    });
+  }
+  connectedCallback() {
+    this.hasAttribute("variant") || this.setAttribute("variant", "primary"), this.render();
+  }
+  attributeChangedCallback(t, e, o) {
+    t === "variant" && e !== o && this.render();
+  }
+  render() {
+    const t = this.getAttribute("variant") || "primary";
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: inline-flex;
+        }
+
+        ::slotted(*) {
+          position: absolute;
+          top: auto;
+          left: auto;
+          transform-origin: 50% 50%;
+          transition: var(--speed-200) ease-in-out;
+        }
+
+        ::slotted([slot="start"]) {
+          transform: scale(1);
+        }
+
+        ::slotted([slot="end"]) {
+          transform: scale(0);
+        }
+
+        :host([toggle]) ::slotted([slot="start"]) {
+          transform: scale(0);
+        }
+
+        :host([toggle]) ::slotted([slot="end"]) {
+          transform: scale(1);
+        }
+
+        :host([rotate]) ::slotted([slot="end"]) {
+          transform: scale(0) rotate(0deg);
+        }
+
+        :host([toggle][rotate]) ::slotted([slot="end"]) {
+          transform: scale(1) rotate(-360deg);
+        }
+
+      </style>
+
+      <mui-button ${`variant="${t}"`}>
+        <slot name="start"></slot>
+        <slot name="end"></slot>
+      </mui-button>
+    `);
+  }
+}
+customElements.define("mui-icon-toggle", s);

package/dist/esm/mui-icons/up-arrow/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, o) {
+    (e === "size" || e === "color") && t !== o && 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.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.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="M18 5.5c.683 0 1.41.288 1.86.748l9.356 9.266c.522.518.784 1.137.784 1.741 0 1.482-1.032 2.475-2.383 2.475-.784 0-1.365-.346-1.815-.82l-3.255-3.223-2.179-2.331.16 2.978v12.533c0 1.583-1.017 2.633-2.528 2.633-1.525 0-2.542-1.05-2.542-2.633V16.334l.16-2.978-2.18 2.33-3.24 3.224c-.45.474-1.03.82-1.815.82C7.03 19.73 6 18.737 6 17.255c0-.604.276-1.223.785-1.74l9.34-9.267c.451-.46 1.192-.748 1.875-.748"
+      ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-up-arrow", r);

package/dist/esm/mui-icons/up-chevron/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, o) {
+    (e === "size" || e === "color") && t !== o && 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.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.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="m6.701 21.44 9.208-9.01c.663-.649 1.3-.93 2.091-.93.816.012 1.441.293 2.104.93l9.195 9.01c.484.465.701.991.701 1.651 0 1.32-1.122 2.409-2.487 2.409a2.52 2.52 0 0 1-1.836-.782L18.026 17.1l-7.69 7.618c-.523.513-1.16.782-1.85.782C7.123 25.5 6 24.412 6 23.091c0-.648.23-1.186.701-1.65"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-up-chevron", r);

package/dist/esm/mui-icons/warning/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"), 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.4rem",
+      medium: "3.6rem",
+      large: "4.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.422 31.5C4.796 31.5 3 29.456 3 27.139c0-.736.193-1.472.58-2.168l10.6-18.29c.842-1.445 2.335-2.181 3.827-2.181s2.943.709 3.8 2.18L32.42 24.959c.4.695.58 1.445.58 2.18 0 2.318-1.796 4.362-4.408 4.362zM18.02 21.4c1.091 0 1.74-.585 1.796-1.703l.249-5.057c.069-1.185-.788-1.99-2.06-1.99-1.27 0-2.127.79-2.058 1.977l.249 5.097c.069 1.09.718 1.677 1.824 1.677m0 5.125c1.243 0 2.155-.708 2.155-1.867 0-1.145-.912-1.867-2.155-1.867-1.244 0-2.17.709-2.17 1.867 0 1.159.94 1.867 2.17 1.867"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-warning", r);

package/dist/esm/mui-image/index.js

@@ -0,0 +1,49 @@
+class t extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    let e = (
+      /*html*/
+      `
+
+    <style>
+
+
+      :host {
+        display: flex;
+      }
+      figure {
+        background: var(--surface-elevated-200);
+        display: block;
+        width: 100%;
+        margin: var(--space-000);
+        border-radius: var(--radius-300);
+        overflow: hidden;
+      }
+      ::slotted(img) {
+        width: 100%;
+        height: auto;
+        display: block;
+        border-style: none;
+        -ms-interpolation-mode: bicubic;
+        vertical-align: middle;
+      }
+      ::slotted(figcaption) {
+        padding: var(--space-500);
+        color: var( --text-color);
+        text-align: center;
+        display: block;
+      }
+    </style>
+
+    <figure>
+      <slot name="image"></slot>
+      <slot name="caption"></slot>
+    </figure>`
+    );
+    this.shadowRoot.innerHTML = e;
+  }
+}
+customElements.define("mui-image", t);