@muibook/components 10.0.0 → 11.0.0

package/dist/esm/components/mui-media-player/index.js

@@ -0,0 +1,184 @@
+import "../mui-button/index.js";
+import "../mui-body/index.js";
+import "../mui-hint/index.js";
+import "../mui-range-input/index.js";
+import "../mui-icons/play-rectangle/index.js";
+import "../mui-icons/stop/index.js";
+import "../mui-icons/music-microphone/index.js";
+import "../mui-icons/movie-clapper/index.js";
+class m extends HTMLElement {
+  constructor() {
+    super(), this.countdownMode = !1, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["src", "type", "autoplay", "muted", "loop", "poster", "prefer-native-controls"];
+  }
+  connectedCallback() {
+    this.render(), this.bindControls();
+  }
+  attributeChangedCallback(e, t) {
+    e !== t && (this.render(), this.bindControls());
+  }
+  resolveType(e) {
+    const t = (this.getAttribute("type") || "").toLowerCase();
+    if (t === "video" || t === "audio" || t === "youtube" || t === "soundcloud")
+      return t;
+    try {
+      const i = new URL(e), o = i.hostname.toLowerCase(), a = i.pathname.toLowerCase();
+      if (o === "youtu.be" || o.endsWith("youtube.com") || o.endsWith("youtube-nocookie.com"))
+        return "youtube";
+      if (o.endsWith("soundcloud.com")) return "soundcloud";
+      if (/\.(mp4|webm|mov|m4v|ogv)$/.test(a)) return "video";
+      if (/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(a)) return "audio";
+    } catch {
+      return "audio";
+    }
+    return "audio";
+  }
+  getYouTubeEmbed(e) {
+    try {
+      const t = new URL(e);
+      if (t.hostname.toLowerCase() === "youtu.be") return `https://www.youtube.com/embed/${t.pathname.replace("/", "")}?rel=0`;
+      const o = t.searchParams.get("v");
+      if (o) return `https://www.youtube.com/embed/${o}?rel=0`;
+    } catch {
+      return "";
+    }
+    return "";
+  }
+  getSoundcloudEmbed(e) {
+    return `https://w.soundcloud.com/player/?url=${encodeURIComponent(e)}&auto_play=false&show_comments=false&show_teaser=false&visual=false`;
+  }
+  formatTime(e) {
+    const t = Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0, i = Math.floor(t / 60), o = t % 60;
+    return `${i}:${String(o).padStart(2, "0")}`;
+  }
+  bindControls() {
+    if (!this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector("video, audio");
+    if (!e) return;
+    const t = this.shadowRoot.querySelector('[data-action="play"]'), i = this.shadowRoot.querySelector('[data-action="mute"]'), o = this.shadowRoot.querySelector('[data-action="seek"]'), a = this.shadowRoot.querySelector('[data-action="time-mode"]');
+    if (!!!(t || i || o || a)) return;
+    let d = null, l = null;
+    const r = () => {
+      const s = e.paused;
+      if (t == null || t.setAttribute("aria-label", s ? "Play media" : "Pause media"), t && s !== d && (t.innerHTML = s ? '<mui-icon-play-rectangle size="x-small"></mui-icon-play-rectangle>' : '<mui-icon-stop size="x-small"></mui-icon-stop>', d = s), i && e.muted !== l && (i.setAttribute("aria-label", e.muted ? "Unmute media" : "Mute media"), l = e.muted), o) {
+        const n = o, c = Number.isFinite(e.duration) ? e.duration : 0;
+        o.setAttribute("max", String(c || 0)), n.value = e.currentTime || 0;
+      }
+      if (a) {
+        const n = Number.isFinite(e.duration) ? e.duration : 0, c = Math.max(0, n - e.currentTime);
+        a.textContent = this.countdownMode ? `-${this.formatTime(c)} / ${this.formatTime(n)}` : `${this.formatTime(e.currentTime)} / ${this.formatTime(n)}`, a.setAttribute("aria-pressed", String(this.countdownMode));
+      }
+    };
+    t == null || t.addEventListener("click", () => {
+      e.paused ? e.play().catch(() => {
+      }) : e.pause();
+    }), i == null || i.addEventListener("click", () => {
+      e.muted = !e.muted, r();
+    }), o == null || o.addEventListener("input", (s) => {
+      const n = s.detail || {};
+      e.currentTime = Number(n.value || 0), r();
+    }), a == null || a.addEventListener("click", () => {
+      this.countdownMode = !this.countdownMode, r();
+    }), e.addEventListener("timeupdate", r), e.addEventListener("loadedmetadata", r), e.addEventListener("play", r), e.addEventListener("pause", r), r();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.getAttribute("src") || "", t = this.getAttribute("poster") || "", i = this.hasAttribute("muted"), o = this.hasAttribute("autoplay"), a = this.hasAttribute("loop"), u = this.resolveType(e), d = this.getAttribute("prefer-native-controls") !== "false", l = u === "youtube" ? `<div class="media-shell video-shell">
+            <iframe class="embed" src="${this.getYouTubeEmbed(e)}" title="Video preview" loading="lazy" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
+          </div>` : u === "soundcloud" ? `<div class="media-shell soundcloud-shell">
+              <iframe class="embed soundcloud" src="${this.getSoundcloudEmbed(e)}" title="Audio preview" loading="lazy"></iframe>
+            </div>` : u === "video" ? `<div class="media-shell video-shell">
+                <video ${o ? "autoplay" : ""} ${i ? "muted" : ""} ${a ? "loop" : ""} ${d ? "controls" : ""} ${t ? `poster="${t.replace(/"/g, "&quot;")}"` : ""} playsinline src="${e.replace(/"/g, "&quot;")}"></video>
+              </div>` : `<audio ${o ? "autoplay" : ""} ${i ? "muted" : ""} ${a ? "loop" : ""} ${d ? "controls" : ""} src="${e.replace(/"/g, "&quot;")}"></audio>`, s = (u === "video" || u === "audio") && !d;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        .frame {
+          width: 100%;
+          display: grid;
+        }
+        .media-shell {
+          position: relative;
+          width: 100%;
+          border-radius: var(--radius-100);
+          overflow: hidden;
+          background: var(--surface-elevated-200);
+        }
+        .video-shell {
+          aspect-ratio: var(--media-player-video-ratio, 16 / 9);
+        }
+        .soundcloud-shell {
+          aspect-ratio: var(--media-player-soundcloud-ratio, 16 / 5);
+          min-height: 16rem;
+        }
+        .media-shell > video,
+        .media-shell > .embed {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+        }
+        video,
+        audio {
+          width: 100%;
+          background: var(--surface-elevated-100);
+        }
+        video {
+          object-fit: cover;
+        }
+        .embed {
+          border: 0;
+          background: var(--surface-elevated-100);
+        }
+        .controls {
+          display: inline-flex;
+          width: 100%;
+          align-items: center;
+          padding: var(--space-100);
+          box-sizing: border-box;
+        }
+        .controls mui-range-input {
+          flex: 1 1 auto;
+          min-width: 0;
+          --range-input-accent-color: var(--media-player-seek-color, var(--grey-1200));
+          --range-input-bubble-background: var(--media-player-seek-time-background, var(--surface-elevated-100));
+          --range-input-bubble-border-color: var(--media-player-seek-time-border-color, var(--border-color));
+        }
+        [data-action="time-mode"] {
+          white-space: nowrap;
+          flex: 0 0 auto;
+        }
+
+      </style>
+      <div class="frame">
+        ${l}
+        ${s ? `<div class="controls">
+                <mui-hint placement="top">
+                  <mui-button slot="trigger" data-action="play" size="x-small" icon-only variant="tertiary" aria-label="Play media">
+                    <mui-icon-play-rectangle size="x-small"></mui-icon-play-rectangle>
+                  </mui-button>
+                  Play/Stop
+                </mui-hint>
+                <mui-range-input data-action="seek" min="0" max="0" value="0" step="0.1" bubble bubble-format="time" label="Media seek"></mui-range-input>
+                <mui-hint placement="top">
+                  <mui-button slot="trigger" data-action="mute" size="x-small" icon-only variant="tertiary" aria-label="Mute media">
+                    <mui-icon-music-microphone size="x-small"></mui-icon-music-microphone>
+                  </mui-button>
+                  Mute
+                </mui-hint>
+                <mui-hint placement="top">
+                  <mui-button slot="trigger" data-action="time-mode" size="x-small" variant="tertiary" aria-pressed="false">0:00 / 0:00</mui-button>
+                  Time
+                </mui-hint>
+              </div>` : ""}
+      </div>
+    `;
+  }
+}
+customElements.get("mui-media-player") || customElements.define("mui-media-player", m);

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

@@ -5,49 +5,79 @@ import "../mui-icons/check/index.js";
 import "../mui-icons/info/index.js";
 import "../mui-icons/warning/index.js";
 import "../mui-icons/attention/index.js";
-const l = ["neutral", "positive", "info", "warning", "attention"], g = {
+const f = ["neutral", "positive", "info", "warning", "attention"], h = {
   neutral: "background-color: var(--feedback-neutral-background); border: var(--feedback-neutral-border);",
   positive: "background-color: var(--feedback-positive-background); border: var(--feedback-positive-border);",
   info: "background-color: var(--feedback-info-background); border: var(--feedback-info-border);",
   warning: "background-color: var(--feedback-warning-background); border: var(--feedback-warning-border);",
   attention: "background-color: var(--feedback-attention-background); border: var(--feedback-attention-border);"
-}, b = {
+}, p = {
   neutral: "polite",
   positive: "polite",
   info: "polite",
   warning: "assertive",
   attention: "assertive"
-}, u = {
+}, k = {
   neutral: "status",
   positive: "status",
   info: "status",
   warning: "alert",
   attention: "alert"
-}, v = {
+}, S = {
   neutral: "--feedback-neutral-icon",
   positive: "--feedback-positive-icon",
   info: "--feedback-info-icon",
   warning: "--feedback-warning-icon",
   attention: "--feedback-attention-icon"
-}, f = {
+}, w = {
   neutral: "color: var(--feedback-neutral-text);",
   positive: "color: var(--feedback-positive-text);",
   info: "color: var(--feedback-info-text);",
   warning: "color: var(--feedback-warning-text);",
   attention: "color: var(--feedback-attention-text);"
-}, m = {
+}, z = {
   neutral: "mui-icon-message",
   positive: "mui-icon-check",
   info: "mui-icon-info",
   warning: "mui-icon-warning",
   attention: "mui-icon-attention"
 };
-class k extends HTMLElement {
+class C extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.contentSlotListener = null, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["variant", "heading", "icon", "size"];
   }
   connectedCallback() {
-    const t = this.getAttribute("variant") || "neutral", e = l.includes(t) ? t : "neutral", a = this.getAttribute("heading") || "Heading...", o = this.getAttribute("icon") || m[e], i = v[e], n = f[e], r = g[e], s = b[e], c = u[e], d = (
+    this.render();
+  }
+  attributeChangedCallback(e, t, n) {
+    t !== n && (e === "variant" || e === "heading" || e === "icon" || e === "size") && this.render();
+  }
+  getMessageSize() {
+    const e = this.getAttribute("size");
+    return e === "small" || e === "medium" ? e : "large";
+  }
+  getInlineContentSize(e) {
+    return e === "small" ? "x-small" : e === "medium" ? "small" : "medium";
+  }
+  setupContentSlot(e) {
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
+    if (!t) return;
+    this.contentSlotListener && t.removeEventListener("slotchange", this.contentSlotListener);
+    const n = () => {
+      const s = this.getInlineContentSize(e);
+      t.assignedElements({ flatten: !0 }).forEach((o) => {
+        const a = o.tagName.toLowerCase();
+        (a === "mui-body" || a === "mui-link") && o.setAttribute("size", s);
+      });
+    };
+    this.contentSlotListener = n, t.addEventListener("slotchange", this.contentSlotListener), requestAnimationFrame(n);
+  }
+  render() {
+    const e = this.getAttribute("variant") || "neutral", t = f.includes(e) ? e : "neutral", n = this.getMessageSize(), i = this.getAttribute("heading") || "Heading...", r = this.getAttribute("icon") || z[t], o = S[t], a = w[t], c = h[t], l = p[t], d = k[t], g = n === "large" ? "var(--message-gap-horizontal)" : n === "medium" ? "var(--space-200)" : "var(--space-100)", u = n === "large" ? "var(--message-gap-vertical)" : n === "medium" ? "var(--space-100)" : "var(--space-050)", v = n === "large" ? "var(--font-size-200)" : "var(--font-size-100)", b = n === "large" ? "medium" : "small", m = (
       /*css*/
       `
       :host {
@@ -59,7 +89,7 @@ class k extends HTMLElement {
       section {
         padding: var(--message-padding);
         border-radius: var(--message-radius);
-        ${r}
+        ${c}
       }
 
       .icon {
@@ -69,27 +99,27 @@ class k extends HTMLElement {
 
       .heading {
         font-weight: var(--font-weight-bold);
-        font-size: var(--font-size-200);
-        ${n}
+        font-size: ${v};
+        ${a}
       }
     `
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${d}</style>
+        <style>${m}</style>
     
-      <section aria-labelledby="message-heading" aria-live="${s}" role="${c}">
-        <mui-h-stack space="var(--message-gap-horizontal)">
+      <section aria-labelledby="message-heading" aria-live="${l}" role="${d}">
+        <mui-h-stack space="${g}">
           <div class="icon">
-            <${o} size="medium" color="var(${i})"></${o}>
+            <${r} size="${b}" color="var(${o})"></${r}>
           </div>
-          <mui-v-stack space="var(--message-gap-vertical)">
-            <div class="heading" id="message-heading">${a}</div>
+          <mui-v-stack space="${u}">
+            <div class="heading" id="message-heading">${i}</div>
             <slot></slot>
           </mui-v-stack>
         </mui-h-stack>
       </section>
-      `);
+      `, this.setupContentSlot(n));
   }
 }
-customElements.get("mui-message") || customElements.define("mui-message", k);
+customElements.get("mui-message") || customElements.define("mui-message", C);

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

@@ -12,19 +12,19 @@ class o extends HTMLElement {
     this.render();
   }
   render() {
-    const a = Math.min(Math.max(Number(this.getAttribute("progress") || 0), 0), 100), e = this.getAttribute("state");
-    let r = `${a}%`, s = "none", t = "";
-    e === "syncing" ? (r = "30%", s = "slideAnim calc(var(--speed-400) * 4) linear infinite") : e === "pending" && (r = "100%", s = "zebraAnim calc(var(--speed-300) * 4) linear infinite", t = `
+    const t = Math.min(Math.max(Number(this.getAttribute("progress") || 0), 0), 100), r = this.getAttribute("state");
+    let e = `${t}%`, s = "none", i = "", a = "var(--progress-radius) 0 0 var(--progress-radius)";
+    r === "syncing" ? (e = "var(--progress-syncing-width)", s = "slideAnim calc(var(--speed-400) * 4) linear infinite", a = "var(--progress-radius)") : r === "pending" && (e = "100%", s = "zebraAnim calc(var(--speed-300) * 4) linear infinite", a = "var(--progress-radius)", i = `
         background-image: repeating-linear-gradient(
           45deg,
           var(--progress-loading-bar-100) 0,
-          var(--progress-loading-bar-100) 10px,
-          var(--progress-loading-bar-200) 10px,
-          var(--progress-loading-bar-200) 20px
+          var(--progress-loading-bar-100) var(--progress-pending-stripe-size),
+          var(--progress-loading-bar-200) var(--progress-pending-stripe-size),
+          var(--progress-loading-bar-200) calc(var(--progress-pending-stripe-size) * 2)
         );
         background-size: 200% 100%;
       `);
-    const i = (
+    const n = (
       /*css*/
       `
       :host {
@@ -35,21 +35,21 @@ class o extends HTMLElement {
         width: 100%;
         height: var(--space-300);
         background-color: var(--progress-track-background);
-        border-radius: var(--space-300);
+        border-radius: var(--progress-radius);
         overflow: hidden;
         position: relative;
       }
       .progress-bar {
         height: 100%;
-        width: ${r};
-        background-color: var(--progress-bar-background);
-        border-radius: var(--space-300) 0 0 var(--space-300);
+        width: ${e};
+        background-color: ${r === "syncing" ? "var(--progress-syncing-bar-background)" : "var(--progress-bar-background)"};
+        border-radius: ${a};
         position: absolute;
         left: 0;
         top: 0;
-        transition: ${e ? "none" : "width var(--speed-300) ease"};
+        transition: ${r ? "none" : "width var(--speed-300) ease"};
         animation: ${s};
-        ${t}
+        ${i}
       }
 
       @keyframes slideAnim {
@@ -59,13 +59,13 @@ class o extends HTMLElement {
 
       @keyframes zebraAnim {
         0% { background-position: 0 0; }
-        100% { background-position: 40px 0; }
+        100% { background-position: calc(var(--progress-pending-stripe-size) * 4) 0; }
       }
     `
     );
     this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${i}</style>
+      <style>${n}</style>
       <div class="progress-container">
         <div class="progress-bar"></div>
       </div>