@muibook/components 7.1.0 → 8.0.0

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

@@ -33,7 +33,7 @@ class l extends HTMLElement {
         background: var(--backdrop-overlay);
       }
 
-      header {
+      .header {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -41,13 +41,13 @@ class l extends HTMLElement {
         border-bottom: var(--border-thin);
       }
 
-      main {
+      .content {
         max-height: 60vh;
         overflow-y: auto;
         padding: var(--space-500);
       }
 
-      footer {
+      .actions {
         display: flex;
         justify-content: flex-end;
         padding: var(--space-400) var(--space-500);
@@ -55,7 +55,7 @@ class l extends HTMLElement {
         gap: var(--space-300);
       }
 
-      footer[hidden] {
+      .actions[hidden] {
         display: none !important;
       }
     `
@@ -64,22 +64,22 @@ class l extends HTMLElement {
     `
       <style>${s}</style>
       <dialog>
-        <header>
+        <div class="header">
           <slot name="title"></slot>
-          <mui-button class="close" aria-label="Close" variant="tertiary"><mui-icon-close></mui-icon-close></mui-button>
-        </header>
-        <main>
+          <mui-button class="close" aria-label="Close" variant="tertiary"><mui-icon-close size="medium"></mui-icon-close></mui-button>
+        </div>
+        <div class="content">
           <slot></slot>
-        </main>
-        <footer hidden>
+        </div>
+        <div class="actions" hidden>
           <slot name="actions"></slot>
-        </footer>
+        </div>
       </dialog>
-    `, this.dialogEl = this.shadowRoot.querySelector("dialog"), this.footerEl = this.shadowRoot.querySelector("footer"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');
-    const e = this.shadowRoot.querySelector(".close");
-    e == null || e.addEventListener("click", () => this.close()), this.dialogEl.addEventListener("click", (i) => {
+    `, this.dialogEl = this.shadowRoot.querySelector("dialog"), this.footerEl = this.shadowRoot.querySelector(".actions"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');
+    const i = this.shadowRoot.querySelector(".close");
+    i == null || i.addEventListener("click", () => this.close()), this.dialogEl.addEventListener("click", (e) => {
       const o = this.dialogEl.getBoundingClientRect();
-      i.clientX >= o.left && i.clientX <= o.right && i.clientY >= o.top && i.clientY <= o.bottom || this.close();
+      e.clientX >= o.left && e.clientX <= o.right && e.clientY >= o.top && e.clientY <= o.bottom || this.close();
     }), (a = this.actionsSlot) == null || a.addEventListener("slotchange", () => this.updateFooterVisibility()), this.updateFooterVisibility(), this.syncOpenState();
   }
   updateFooterVisibility() {
@@ -87,8 +87,8 @@ class l extends HTMLElement {
     const t = this.actionsSlot.assignedElements().length > 0;
     this.footerEl.hidden = !t;
   }
-  attributeChangedCallback(t, s, e) {
-    t === "open" && this.syncOpenState(), t === "width" && this.dialogEl && (this.dialogEl.style.width = e || "350px");
+  attributeChangedCallback(t, s, i) {
+    t === "open" && this.syncOpenState(), t === "width" && this.dialogEl && (this.dialogEl.style.width = i || "350px");
   }
   syncOpenState() {
     this.dialogEl && (this.hasAttribute("open") ? this.dialogEl.open || this.dialogEl.showModal() : this.dialogEl.open && this.dialogEl.close());

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

@@ -33,15 +33,15 @@ class p extends HTMLElement {
       `
     <div class="outer">
       <div class="inner" role="complementary">
-        <header>
+        <div class="header">
           <slot name="title"></slot>
           ${t ? `
             <mui-button class="close" variant="tertiary" aria-label="Close drawer">
-              <mui-icon-close></mui-icon-close>
+              <mui-icon-close size="medium"></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 class="content ${e}"><slot></slot></div>
+        <div class="actions" hidden><slot name="actions"></slot></div>
       </div>
     </div>
   `
@@ -54,7 +54,7 @@ class p extends HTMLElement {
     const o = (
       /*css*/
       `
-      header {
+      .header {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -62,27 +62,26 @@ class p extends HTMLElement {
         border-bottom: var(--border-thin);
         box-sizing: border-box;
       }
-      main {
+      .content {
         overflow-y: auto;
         height: 100%;
         padding: var(--space-500);
         box-sizing: border-box;
-        will-change: transform, opacity;
       }
-      main.no-padding {
+      .content.no-padding {
         padding: 0;
       }
 
-      main.no-heading {
+      .content.no-heading {
         padding-top: calc(var(--space-500) + env(safe-area-inset-top));
       }
 
-      main.no-padding.no-heading {
+      .content.no-padding.no-heading {
         padding-top: env(safe-area-inset-top);
       }
 
 
-      footer {
+      .actions {
         display: flex;
         align-items: center;
         justify-content: flex-end;
@@ -95,23 +94,23 @@ class p extends HTMLElement {
         bottom: 0;
         width: 100%;
       }
-      header[hidden],
-      footer[hidden] {
+      .header[hidden],
+      .actions[hidden] {
         display: none !important;
       }
     `
     ), s = (
       /*css*/
       `
-      :host([has-header]) main {
+      :host([has-header]) .content {
         height: calc(100dvh - (7.7rem  + env(safe-area-inset-top) ));
       }
 
-      :host([has-footer]) main {
+      :host([has-footer]) .content {
         height: calc(100dvh - (7.7rem  + env(safe-area-inset-bottom) ));
       }
 
-      :host([has-header][has-footer]) main {
+      :host([has-header][has-footer]) .content {
         height: calc(100dvh - ((7.7rem * 2)  + (env(safe-area-inset-top) + env(safe-area-inset-bottom)) ));
       }
 
@@ -179,7 +178,7 @@ class p extends HTMLElement {
         visibility: visible;
       }
     `
-    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", l = (
+    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", d = (
       /*css*/
       `
       .inner {
@@ -191,14 +190,14 @@ class p extends HTMLElement {
         height: 100%;
       }
 
-      main { height: 100%; }
+      .content { height: 100%; }
 
-      :host([has-header]) main,
-      :host([has-footer]) main {
+      :host([has-header]) .content,
+      :host([has-footer]) .content {
         height: calc(100% - 7.7rem);
       }
 
-      :host([has-header][has-footer]) main {
+      :host([has-header][has-footer]) .content {
         height: calc(100% - (7.7rem * 2));
       }
 
@@ -228,7 +227,7 @@ class p extends HTMLElement {
         overflow: hidden;
       }
 
-      :host([variant="persistent"]) header .spacer {
+      :host([variant="persistent"]) .header .spacer {
         height: 4.4rem;
       }
 
@@ -267,7 +266,7 @@ class p extends HTMLElement {
           border: none;
         }
 
-        footer {
+        .actions {
           position: fixed;
           bottom: 0;
           width: 100%;
@@ -310,13 +309,13 @@ class p extends HTMLElement {
           z-index: initial;
         }
 
-        :host([variant="persistent"]) header {
+        :host([variant="persistent"]) .header {
           padding-top: var(--space-400);
         }
 
-        :host([variant="persistent"]) main { height: auto; }
+        :host([variant="persistent"]) .content { height: auto; }
 
-        :host([variant="persistent"]) footer {
+        :host([variant="persistent"]) .actions {
           border-bottom-right-radius: var(--radius-200);
           border-bottom-left-radius: var(--radius-200);
           position: static;
@@ -333,7 +332,7 @@ class p extends HTMLElement {
       }
 
     `
-    ), d = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
+    ), l = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
     let a = "";
     const c = this.hasAttribute("drawer-space") ? "no-padding" : "";
     e === "overlay" ? a = /*html*/
@@ -341,29 +340,29 @@ class p extends HTMLElement {
       <style>${o}${s}${n}</style>
       <div class="overlay"></div>
       <div class="inner" role="dialog" aria-modal="true">
-        <header hidden>
+        <div class="header" hidden>
           <slot name="title"></slot>
           <mui-button class="close" variant="tertiary" aria-label="Close drawer">
-            <mui-icon-close></mui-icon-close>
+            <mui-icon-close size="medium"></mui-icon-close>
           </mui-button>
-        </header>
-        <main class="${c}">
+        </div>
+        <div class="content ${c}">
           <slot></slot>
-        </main>
-        <footer hidden>
+        </div>
+        <div class="actions" hidden>
           <slot name="actions"></slot>
-        </footer>
+        </div>
       </div>
     ` : (e === "push" || e === "persistent") && (a = /*html*/
     `
-        <style>${o}${l}${n}</style>
+        <style>${o}${d}${n}</style>
         <div class="shell">
-          ${d === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
+          ${l === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
         </div>
       `), this.shadowRoot.innerHTML = a;
   }
   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"]');
+    this.innerEl = this.shadowRoot.querySelector(".inner"), this.overlayEl = this.shadowRoot.querySelector(".overlay"), this.footerEl = this.shadowRoot.querySelector(".actions"), 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, o;
@@ -378,7 +377,7 @@ class p extends HTMLElement {
     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");
+    const e = this.innerEl.querySelector(".content");
     e && e.classList.toggle("no-heading", !t);
   }
   attributeChangedCallback(t, e, i) {

package/dist/esm/components/mui-file-upload/index.js

@@ -12,7 +12,7 @@ class r extends HTMLElement {
           cursor: pointer;
           align-items: center;
           justify-content: space-between;
-          padding-left: 16px;
+          padding-left: var(--space-400);
           display: flex;
           width: 100%;
           line-height: var(--text-line-height-s);
@@ -37,17 +37,17 @@ class r extends HTMLElement {
         }
         @media (min-width: 340px) {
           .label {
-            width: 115px;
+            width: 11.5rem;
           }
         }
         @media (min-width: 440px) {
           .label {
-            width: 175px;
+            width: 17.5rem;
           }
         }
         @media (min-width: 600px) {
           .label {
-            width: 220px;
+            width: 22rem;
           }
         }
 
@@ -56,7 +56,7 @@ class r extends HTMLElement {
         }
 
         mui-button::part(height) {
-          height: calc(4.2rem - 0.2rem);
+          height: calc(var(--space-600) + var(--space-050));
           padding: var(--space-400);
           padding-top: var(--space-000);
           padding-bottom: var(--space-000);
@@ -64,7 +64,7 @@ class r extends HTMLElement {
         }
 
         mui-button::part(border-radius) {
-          border-radius: calc(var(--radius-100) - 2px);
+          border-radius: calc(var(--radius-100) - var(--space-025));
         }
 
         input[type="file"] {

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

@@ -0,0 +1,53 @@
+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.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="M15.437 29.614c-.946 0-1.687-.32-2.314-1.049l-6.583-7.76c-.563-.638-.754-1.188-.754-1.853 0-1.47 1.1-2.556 2.607-2.556.857 0 1.483.294 2.02.933l4.973 5.944L25.293 7.73c.626-.972 1.278-1.342 2.288-1.342 1.496 0 2.633 1.086 2.633 2.53 0 .537-.166 1.113-.562 1.7L17.84 28.413c-.55.818-1.355 1.201-2.403 1.201"></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-checkmark") || customElements.define("mui-icon-checkmark", l);

package/dist/esm/components/mui-icons/game-controller/index.js

@@ -0,0 +1,55 @@
+class i 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"), s = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", c = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, l = c[e] ?? c.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${l};
+          height: ${l};
+          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="M1.003 24.077c0-1.323.245-2.78.712-4.337.7-2.335 1.901-5.47 3.024-7.84.99-2.057 1.635-3.29 4.326-3.903 2.29-.511 5.327-.822 8.93-.822 3.613 0 6.65.31 8.929.822 2.702.612 3.347 1.846 4.337 3.904 1.123 2.368 2.324 5.504 3.024 7.84.468 1.556.712 3.013.712 4.336 0 3.025-2.013 4.749-4.692 4.749-1.958 0-3.403-.812-4.582-1.969l-1.868-1.901c-.267-.267-.434-.39-.812-.39H12.957c-.378 0-.545.123-.812.39l-1.868 1.901c-1.168 1.168-2.624 1.969-4.581 1.969-2.68 0-4.693-1.724-4.693-4.749m3.191-.256c0 1.112.779 1.746 1.78 1.746.656 0 1.367-.311 1.957-.923l2.624-2.568c.567-.579 1.012-.812 1.79-.812h11.298c.79 0 1.235.233 1.802.812l2.624 2.568c.6.6 1.301.923 1.957.923 1.001 0 1.78-.634 1.78-1.746 0-.6-.134-1.323-.456-2.39-.779-2.636-2.046-5.96-3.147-8.352-.523-1.112-.8-1.59-1.757-1.812-2.124-.512-4.97-.79-8.452-.79-3.469 0-6.316.278-8.44.79-.956.222-1.245.7-1.757 1.812-1.112 2.391-2.38 5.705-3.147 8.352-.311 1.067-.456 1.79-.456 2.39m4.504-7.795c0-.756.5-1.234 1.279-1.234h1.49V13.39c0-.79.511-1.324 1.29-1.324.778 0 1.279.534 1.279 1.324v1.4h1.39c.834 0 1.368.479 1.368 1.235s-.534 1.246-1.368 1.246h-1.39v1.4c0 .79-.5 1.313-1.28 1.313-.777 0-1.29-.523-1.29-1.312v-1.401h-1.49c-.778 0-1.278-.49-1.278-1.246m16.347.022c-1.001 0-1.79-.778-1.79-1.779 0-1.012.789-1.801 1.79-1.801s1.79.79 1.79 1.801c0 1.001-.79 1.78-1.79 1.78m-3.403 3.481c-.99 0-1.79-.79-1.79-1.78 0-1.011.8-1.8 1.79-1.8 1.012 0 1.79.789 1.79 1.8 0 .99-.778 1.78-1.79 1.78"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-game-controller") || customElements.define("mui-icon-game-controller", i);

package/dist/esm/components/mui-icons/home/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"), c = 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"
+    }, 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: ${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.399 19.038c-1.108 0-1.828-.72-1.828-1.734 0-.507.272-1.06.743-1.462L15.601 5.537c.719-.613 1.568-.92 2.393-.92.837 0 1.674.307 2.406.92l4.457 3.75V7.871c0-.566.389-.932.954-.932h2.654c.566 0 .931.366.931.932v5.211l3.29 2.76c.471.4.743.954.743 1.461 0 1.014-.72 1.734-1.828 1.734-.483 0-.99-.224-1.415-.59l-.79-.66v10.305c0 2.016-1.273 3.29-3.42 3.29H10.024c-2.146 0-3.419-1.274-3.419-3.29V17.788l-.802.66c-.413.366-.92.59-1.403.59m16.967 2.11v6.58h3.325c.672 0 1.062-.39 1.062-1.062V14.734l-6.98-5.848c-.248-.213-.52-.33-.779-.33-.26 0-.519.117-.766.33l-6.98 5.848v11.932c0 .672.377 1.062 1.06 1.062h3.326v-6.58c0-.578.377-.955.955-.955h4.834c.566 0 .943.377.943.955"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-home") || customElements.define("mui-icon-home", l);

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

@@ -26,3 +26,11 @@ import "./down-arrow-circle/index.js";
 import "./ellipsis/index.js";
 import "./gear/index.js";
 import "./translate/index.js";
+import "./home/index.js";
+import "./play-stack/index.js";
+import "./game-controller/index.js";
+import "./movie-clapper/index.js";
+import "./music-microphone/index.js";
+import "./music-quarter-note/index.js";
+import "./play-rectangle/index.js";
+import "./list-and-film/index.js";

package/dist/esm/components/mui-icons/list-and-film/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"), o = c && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[c] || c || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = i[t] ?? 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: ${o};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M4.524 10.846c-.844 0-1.522-.756-1.522-1.567 0-.844.667-1.566 1.522-1.566h21.553c.866 0 1.522.7 1.522 1.566 0 .833-.667 1.566-1.522 1.566zM17.567 28.01c-1.278 0-2.111-.845-2.111-2.1V15.39c0-1.267.833-2.1 2.11-2.1h13.321c1.278 0 2.11.833 2.11 2.1v10.52c0 1.255-.832 2.1-2.11 2.1zM4.524 16.656c-.844 0-1.522-.756-1.522-1.567 0-.844.667-1.566 1.522-1.566h7.277c.866 0 1.522.71 1.522 1.566 0 .833-.667 1.567-1.522 1.567zm12.887.533h1.133c.19 0 .334-.133.334-.322v-1.289c0-.189-.145-.322-.334-.322h-1.133c-.189 0-.333.133-.333.322v1.289c0 .189.144.322.333.322m12.498 0h1.134c.188 0 .333-.133.333-.322v-1.289c0-.189-.145-.322-.333-.322h-1.134c-.188 0-.333.133-.333.322v1.289c0 .189.145.322.333.322m-9.21 2.4h7.066c.278 0 .467-.211.467-.478v-3.233c0-.278-.189-.478-.467-.478H20.7c-.278 0-.478.2-.478.478v3.233c0 .267.2.478.478.478m-3.288.544h1.133c.19 0 .334-.133.334-.311v-1.289a.327.327 0 0 0-.334-.333h-1.133a.327.327 0 0 0-.333.333v1.289c0 .178.144.311.333.311m12.498 0h1.134c.188 0 .333-.133.333-.311v-1.289a.327.327 0 0 0-.333-.333h-1.134a.327.327 0 0 0-.333.333v1.289c0 .178.145.311.333.311M4.524 22.477c-.844 0-1.522-.755-1.522-1.566 0-.845.667-1.578 1.522-1.578h7.277c.866 0 1.522.711 1.522 1.578 0 .822-.667 1.566-1.522 1.566zm12.887.6h1.133a.325.325 0 0 0 .334-.322v-1.289a.32.32 0 0 0-.334-.333h-1.133a.32.32 0 0 0-.333.333v1.289c0 .178.144.322.333.322m12.498 0h1.134a.325.325 0 0 0 .333-.322v-1.289a.32.32 0 0 0-.333-.333h-1.134a.32.32 0 0 0-.333.333v1.289c0 .178.145.322.333.322m-9.21 2.8h7.066a.45.45 0 0 0 .467-.467v-3.233a.443.443 0 0 0-.467-.466H20.7c-.278 0-.478.188-.478.466v3.233c0 .267.2.467.478.467m-3.288.144h1.133c.19 0 .334-.133.334-.322V24.41c0-.189-.145-.322-.334-.322h-1.133c-.189 0-.333.133-.333.322V25.7c0 .189.144.322.333.322m12.498 0h1.134c.188 0 .333-.133.333-.322V24.41c0-.189-.145-.322-.333-.322h-1.134c-.188 0-.333.133-.333.322V25.7c0 .189.145.322.333.322M4.524 28.287c-.844 0-1.522-.755-1.522-1.566 0-.844.667-1.567 1.522-1.567h7.277c.866 0 1.522.7 1.522 1.567 0 .833-.667 1.566-1.522 1.566z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-list-and-film") || customElements.define("mui-icon-list-and-film", l);

package/dist/esm/components/mui-icons/movie-clapper/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(t, e, i) {
+    (t === "size" || t === "color") && e !== i && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), s = e && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[e] || e || "var(--icon-color-default)", l = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, o = l[t] ?? l.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="M3.217 13.815c-.728-2.73.416-4.693 3.145-5.434l19.083-5.122c2.652-.715 4.693.312 5.382 2.912l.624 2.275c.377 1.443-.273 2.587-1.703 2.95l-5.798 1.56h6.63c1.508 0 2.418.924 2.418 2.406v13.155c0 2.834-1.612 4.445-4.459 4.445H8.806c-2.847 0-4.445-1.612-4.445-4.445V18zM22 11.202l2.976-.793.82-3.588c-.274.065-.534.13-.807.208l-2.158.598zm-6.773 1.82 3.055-.82.845-3.587-3.068.819zm-6.669 1.78 2.977-.78.82-3.613-2.965.819zm.676 5.551h3.081l1.95-3.419h-.624l-2.483.04zm6.929 0h3.159l1.95-3.419H18.1zm7.006 0h3.068l1.95-3.419h-3.08zM8.013 28.01c0 .897.442 1.274 1.287 1.274h18.745c.845 0 1.274-.377 1.274-1.274V23.16H8.013z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-movie-clapper") || customElements.define("mui-icon-movie-clapper", c);