@muibook/components 19.6.0 → 20.1.0

package/dist/esm/components/mui-video-thumbnail/index.js

@@ -0,0 +1,205 @@
+import "../mui-icons/play-rectangle/index.js";
+class n extends HTMLElement {
+  constructor() {
+    super(), this.themeObserver = null, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "src",
+      "src-light",
+      "src-dark",
+      "src-mui",
+      "src-mui-light",
+      "src-mui-dark",
+      "src-jal",
+      "src-jal-light",
+      "src-jal-dark",
+      "src-ana",
+      "src-ana-light",
+      "src-ana-dark",
+      "src-sensei",
+      "src-sensei-light",
+      "src-sensei-dark",
+      "src-paperclip",
+      "src-paperclip-light",
+      "src-paperclip-dark",
+      "alt",
+      "aspect-ratio",
+      "loading",
+      "decoding",
+      "play",
+      "overlay",
+      "hide-play"
+    ];
+  }
+  connectedCallback() {
+    this.render(), this.bindThemeObserver();
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this.themeObserver) == null || e.disconnect(), this.themeObserver = null;
+  }
+  attributeChangedCallback(e, t, a) {
+    t !== a && this.shadowRoot && this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.getThemedSrc(), t = this.getAttribute("alt") || "", a = this.getAttribute("aspect-ratio") || "var(--video-thumbnail-aspect-ratio, 16 / 9)", i = this.getAttribute("loading") || "lazy", r = this.getAttribute("decoding") || "async", o = this.hasAttribute("play") && !this.hasAttribute("hide-play"), s = this.hasAttribute("overlay");
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+
+        .media {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          min-width: 0;
+          gap: var(--video-thumbnail-meta-gap, var(--space-300));
+        }
+
+        .frame {
+          position: relative;
+          display: block;
+          width: 100%;
+          aspect-ratio: var(--video-thumbnail-aspect-ratio-active, var(--video-thumbnail-aspect-ratio));
+          margin: 0;
+          overflow: hidden;
+          box-sizing: border-box;
+          border: var(--video-thumbnail-border, none);
+          border-radius: var(--video-thumbnail-radius, var(--radius-300));
+          background: var(--video-thumbnail-background, var(--surface-elevated-200));
+          box-shadow: var(--video-thumbnail-box-shadow, none);
+          transition:
+            border var(--speed-100),
+            box-shadow var(--speed-100);
+          isolation: isolate;
+        }
+
+        :host(:hover) .frame {
+          border: var(--video-thumbnail-border-hover, var(--video-thumbnail-border, none));
+          box-shadow: var(--video-thumbnail-box-shadow-hover, var(--video-thumbnail-box-shadow, none));
+        }
+
+        .frame:hover {
+          border: var(--video-thumbnail-border-hover, var(--video-thumbnail-border, none));
+          box-shadow: var(--video-thumbnail-box-shadow-hover, var(--video-thumbnail-box-shadow, none));
+        }
+
+        .image,
+        ::slotted([slot="image"]) {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
+          border: none;
+          filter: var(--video-thumbnail-image-filter, none);
+          transition: filter var(--speed-100), transform var(--speed-100);
+        }
+
+        :host(:hover) .image,
+        :host(:hover) ::slotted([slot="image"]),
+        .frame:hover .image,
+        .frame:hover ::slotted([slot="image"]) {
+          filter: var(--video-thumbnail-image-filter-hover, var(--video-thumbnail-image-filter, none));
+        }
+
+        .overlay {
+          position: absolute;
+          inset: 0;
+          z-index: 1;
+          pointer-events: none;
+          background: var(--video-thumbnail-overlay-background, transparent);
+          transition: background var(--speed-100);
+        }
+
+        :host(:hover) .overlay,
+        .frame:hover .overlay {
+          background: var(--video-thumbnail-overlay-background-hover, var(--black-opacity-20));
+        }
+
+        .play {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          z-index: 2;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--video-thumbnail-play-size, var(--action-icon-only-size-large));
+          height: var(--video-thumbnail-play-size, var(--action-icon-only-size-large));
+          border-radius: var(--video-thumbnail-play-size, var(--action-icon-only-size-large));
+          background: var(--video-thumbnail-play-background, var(--black-opacity-80));
+          color: var(--video-thumbnail-play-color, var(--white));
+          opacity: var(--video-thumbnail-play-opacity, 0);
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+          transition:
+            background var(--speed-100),
+            opacity var(--speed-100);
+        }
+
+        :host(:hover) .play,
+        .frame:hover .play {
+          background: var(--video-thumbnail-play-background-hover, var(--black-opacity-70));
+          opacity: var(--video-thumbnail-play-opacity-hover, 1);
+        }
+
+        .play[hidden] {
+          display: none;
+        }
+
+        .play mui-icon-play-fill {
+          fill: currentColor;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .frame,
+          .image,
+          ::slotted([slot="image"]),
+          .overlay,
+          .play {
+            transition: none;
+          }
+        }
+      </style>
+
+      <div class="media">
+        <figure class="frame" style="--video-thumbnail-aspect-ratio-active: ${this.escapeAttribute(a)}">
+          ${e ? `<img class="image" src="${this.escapeAttribute(e)}" alt="${this.escapeAttribute(t)}" loading="${this.escapeAttribute(i)}" decoding="${this.escapeAttribute(r)}" />` : '<slot name="image"></slot>'}
+          ${s ? '<span class="overlay" aria-hidden="true"></span>' : ""}
+          <span class="play" aria-hidden="true" ${o ? "" : "hidden"}>
+            <mui-icon-play-fill size="large"></mui-icon-play-fill>
+          </span>
+        </figure>
+        <slot name="meta"></slot>
+      </div>
+    `;
+  }
+  bindThemeObserver() {
+    if (this.themeObserver) return;
+    const e = document.documentElement;
+    this.themeObserver = new MutationObserver((t) => {
+      t.some((a) => a.attributeName === "data-brand" || a.attributeName === "data-theme") && this.syncImageSrc();
+    }), this.themeObserver.observe(e, { attributes: !0, attributeFilter: ["data-brand", "data-theme"] });
+  }
+  syncImageSrc() {
+    var a;
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".image");
+    if (!e) return;
+    const t = this.getThemedSrc();
+    e.getAttribute("src") !== t && e.setAttribute("src", t);
+  }
+  getThemedSrc() {
+    const e = document.documentElement.getAttribute("data-brand") || "mui", t = document.documentElement.getAttribute("data-theme") || "light";
+    return this.getAttribute(`src-${e}-${t}`) || this.getAttribute(`src-${t}`) || this.getAttribute(`src-${e}`) || this.getAttribute("src") || "";
+  }
+  escapeAttribute(e) {
+    return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  }
+}
+customElements.get("mui-video-thumbnail") || customElements.define("mui-video-thumbnail", n);

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Thu, 28 May 2026 12:53:59 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Mon, 06 Jul 2026 06:17:20 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */
@@ -41,6 +41,7 @@
 
 :where(html) {
   --font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-size-10: 0.9rem;
   --font-size-15: 1.1rem;
   --font-size-25: 1.2rem;
   --font-size-50: 1.4rem;
@@ -58,6 +59,7 @@
   --font-weight-500: 500;
   --font-weight-600: 600;
   --font-weight-700: 700;
+  --line-height-10: 1.5;
   --line-height-15: 1.63636364;
   --line-height-25: 1.5;
   --line-height-50: 1.5;
@@ -97,19 +99,21 @@
   --white-opacity-80: oklch(100% 0.00011 271.152 / 0.8);
   --white-opacity-90: oklch(100% 0.00011 271.152 / 0.9);
   --white-opacity-100: oklch(100% 0.00011 271.152);
-  --grey-100: oklch(97.015% 0.00011 271.152);
-  --grey-150: oklch(94.047% 0.00009 271.152);
+  --grey-50: oklch(96.015% 0.00011 271.152);
+  --grey-100: oklch(94.047% 0.00009 271.152);
   --grey-200: oklch(92.191% 0.0001 271.152);
   --grey-300: oklch(84.522% 0.0001 271.152);
   --grey-400: oklch(73.802% 0.00008 271.152);
   --grey-500: oklch(62.675% 0.00007 271.152);
   --grey-600: oklch(51.028% 0.00006 271.152);
   --grey-700: oklch(44.953% 0.00005 271.152);
-  --grey-800: oklch(38.666% 0.00004 271.152);
-  --grey-900: oklch(32.109% 0.00004 271.152);
-  --grey-1000: oklch(25.197% 0.00003 271.152);
-  --grey-1100: oklch(17.764% 0.00002 271.152);
-  --grey-1200: oklch(11.492% 0.00001 271.152);
+  --grey-800: oklch(40.666% 0.00004 271.152);
+  --grey-900: oklch(35.109% 0.00004 271.152);
+  --grey-1000: oklch(28.5% 0.00003 271.152);
+  --grey-1100: oklch(25.197% 0.00003 271.152);
+  --grey-1200: oklch(21.4% 0.00002 271.152);
+  --grey-1300: oklch(17.764% 0.00002 271.152);
+  --grey-1400: oklch(11.492% 0.00001 271.152);
   --red-100: oklch(98% 0.03 25.0);
   --red-200: oklch(95% 0.10 25.0);
   --red-300: oklch(82% 0.14 25.0);