@muibook/components 19.5.1 → 20.0.0

package/dist/esm/components/mui-tabs/tab-bar/index.js

@@ -1,51 +1,51 @@
-class l extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
     super(), this._animationSpeed = 200, this.attachShadow({ mode: "open" }), this._handleResize = this._handleResize.bind(this), this._hasInitialized = !1, this._resizeTimeout = null, this._observedTab = null, this._activeTab = null, this._resizeObserver = new ResizeObserver(() => {
       this._activeTab && this._updateHighlight(this._activeTab);
     });
   }
   static get observedAttributes() {
-    return ["size", "variant"];
+    return ["size", "variant", "stroke", "radius"];
   }
-  attributeChangedCallback(e, s, a) {
-    (e === "size" || e === "variant") && s !== a && (this._applySizeToChildren(), this._applyVariantToChildren(), this._activeTab && this._updateHighlight(this._activeTab));
+  attributeChangedCallback(e, i, s) {
+    (e === "size" || e === "variant" || e === "stroke") && i !== s && (this._applySizeToChildren(), this._applyVariantToChildren(), this._activeTab && this._updateHighlight(this._activeTab)), e === "radius" && i !== s && this._syncRadiusAttribute();
   }
   connectedCallback() {
-    this.hasAttribute("size") || this.setAttribute("size", "medium");
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this._syncRadiusAttribute();
     const e = this.getAttribute("speed") || "200";
     this._animationSpeed = parseInt(e, 10);
-    const s = Array.from(this.children);
-    this._applySizeToChildren(s), this._applyVariantToChildren(s), this.setAttribute("role", "tablist");
-    const a = this.getAttribute("orientation") || "horizontal";
-    this.setAttribute("aria-orientation", a), this.addEventListener("keydown", (t) => {
-      const i = Array.from(this.children), r = i.findIndex((d) => d.hasAttribute("active")), n = this.getAttribute("aria-orientation") || "horizontal";
+    const i = Array.from(this.children);
+    this._applySizeToChildren(i), this._applyVariantToChildren(i), this.setAttribute("role", "tablist");
+    const s = this.getAttribute("orientation") || "horizontal";
+    this.setAttribute("aria-orientation", s), this.addEventListener("keydown", (t) => {
+      const a = Array.from(this.children), r = a.findIndex((l) => l.hasAttribute("active")), n = this.getAttribute("aria-orientation") || "horizontal";
       let o = r;
       switch (t.key) {
         case "ArrowRight":
-          n === "horizontal" && (o = (r + 1) % i.length, t.preventDefault());
+          n === "horizontal" && (o = (r + 1) % a.length, t.preventDefault());
           break;
         case "ArrowLeft":
-          n === "horizontal" && (o = (r - 1 + i.length) % i.length, t.preventDefault());
+          n === "horizontal" && (o = (r - 1 + a.length) % a.length, t.preventDefault());
           break;
         case "ArrowDown":
-          n === "vertical" && (o = (r + 1) % i.length, t.preventDefault());
+          n === "vertical" && (o = (r + 1) % a.length, t.preventDefault());
           break;
         case "ArrowUp":
-          n === "vertical" && (o = (r - 1 + i.length) % i.length, t.preventDefault());
+          n === "vertical" && (o = (r - 1 + a.length) % a.length, t.preventDefault());
           break;
         case "Home":
           o = 0, t.preventDefault();
           break;
         case "End":
-          o = i.length - 1, t.preventDefault();
+          o = a.length - 1, t.preventDefault();
           break;
         default:
           return;
       }
-      const h = i[o];
+      const h = a[o];
       h && (this.setActiveTab(h), h.focus());
-    }), s.forEach((t, i) => {
-      t.classList.remove("first", "middle", "last", "only"), s.length === 1 ? t.classList.add("only") : i === 0 ? t.classList.add("first") : i === s.length - 1 ? t.classList.add("last") : t.classList.add("middle");
+    }), i.forEach((t, a) => {
+      t.classList.remove("first", "middle", "last", "only"), i.length === 1 ? t.classList.add("only") : a === 0 ? t.classList.add("first") : a === i.length - 1 ? t.classList.add("last") : t.classList.add("middle");
     }), this.addEventListener("click", (t) => {
       const r = (typeof t.composedPath == "function" ? t.composedPath() : []).find(
         (h) => h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-tab-item"
@@ -56,24 +56,48 @@ class l extends HTMLElement {
       <style>
         :host {
           --tab-animation-speed: ${this._animationSpeed}ms;
+          --tab-stroke-size: var(--stroke-size-100);
+          --tab-item-size-x-small: calc(var(--action-size-x-small) - (var(--tab-stroke-size) * 2));
+          --tab-item-size-small: calc(var(--action-size-small) - (var(--tab-stroke-size) * 2));
+          --tab-item-size-medium: calc(var(--action-size-medium) - (var(--tab-stroke-size) * 2));
+          --tab-item-size-large: calc(var(--action-size-large) - (var(--tab-stroke-size) * 2));
+          --tab-active-shadow: var(--tab-shadow-active);
+          --tab-active-inset-width: var(--stroke-size-300);
           position: relative;
           display: inline-flex;
-          border-width: var(--stroke-size-100);
+          border-width: var(--tab-stroke-size);
           border-style: var(--stroke-solid);
           border-color: var(--tab-border-color);
           border-radius: var(--tab-radius);
           background: var(--tab-background);
-          will-change: transform;
           box-sizing: border-box;
           overflow: hidden;
         }
 
+        :host([active-inset]) {
+          --tab-active-shadow: none;
+        }
+
+        :host([stroke="none"]) {
+          --tab-stroke-size: 0px;
+          --tab-item-size-x-small: var(--action-size-x-small);
+          --tab-item-size-small: var(--action-size-small);
+          --tab-item-size-medium: var(--action-size-medium);
+          --tab-item-size-large: var(--action-size-large);
+          border: none;
+        }
+
         :host([full-width]) {
           display: flex;
           width: 100%;
         }
 
         :host([variant="dots"]) {
+          --tab-stroke-size: 0px;
+          --tab-item-size-x-small: var(--action-size-x-small);
+          --tab-item-size-small: var(--action-size-small);
+          --tab-item-size-medium: var(--action-size-medium);
+          --tab-item-size-large: var(--action-size-large);
           border: none;
           border-radius: var(--radius-000);
           background: transparent;
@@ -83,6 +107,11 @@ class l extends HTMLElement {
         }
 
         :host([variant="ghost"]) {
+          --tab-stroke-size: 0px;
+          --tab-item-size-x-small: var(--action-size-x-small);
+          --tab-item-size-small: var(--action-size-small);
+          --tab-item-size-medium: var(--action-size-medium);
+          --tab-item-size-large: var(--action-size-large);
           border: none;
           background: transparent;
           box-shadow: var(--tabs-ghost-box-shadow);
@@ -106,12 +135,29 @@ class l extends HTMLElement {
           z-index: 0;
           padding: var(--space-200) var(--space-400);
           box-sizing: border-box;
-          box-shadow: var(--tab-shadow-active);
-          will-change: transform, width;
-          transform: translateX(0) translateZ(0);
+          box-shadow: var(--tab-active-shadow);
+          transform: translateX(0);
           width: 0;
         }
 
+        .highlight::after {
+          content: none;
+        }
+
+        :host([active-inset]) .highlight {
+          background: var(--tab-background);
+          box-shadow: none;
+        }
+
+        :host([active-inset]) .highlight::after {
+          content: "";
+          position: absolute;
+          inset: var(--tab-active-inset-width);
+          border-radius: calc(var(--tab-radius) - var(--tab-active-inset-width));
+          background: var(--tab-background-active);
+          box-shadow: var(--tab-active-shadow);
+        }
+
         :host([variant="dots"]) .highlight {
           display: none;
         }
@@ -120,8 +166,6 @@ class l extends HTMLElement {
           position: relative;
           z-index: 1;
           flex: 1;
-          contain: content; /* Performance optimization */
-          transform: translateZ(0);
         }
 
         :host([variant="dots"]) ::slotted(mui-tab-item) {
@@ -133,31 +177,41 @@ class l extends HTMLElement {
     `, window.addEventListener("resize", this._handleResize), this._resizeObserver.observe(this), requestAnimationFrame(() => {
       const t = this.shadowRoot.querySelector(".highlight");
       t.style.transition = "none";
-      const i = s.find((r) => r.hasAttribute("active")) || s[0];
-      i && (this._activeTab = i, i.setAttribute("active", ""), this._updateHighlight(i), this._observedTab = i, this._resizeObserver.observe(i)), t.offsetWidth, requestAnimationFrame(() => {
+      const a = i.find((r) => r.hasAttribute("active")) || i[0];
+      a && (this._activeTab = a, a.setAttribute("active", ""), this._updateHighlight(a), this._observedTab = a, this._resizeObserver.observe(a)), t.offsetWidth, requestAnimationFrame(() => {
         t.style.transition = "", this._hasInitialized = !0;
       });
     }));
   }
   _applySizeToChildren(e) {
-    const s = this.getAttribute("size") || "medium";
+    const i = this.getAttribute("size") || "medium";
     (e || Array.from(this.children)).forEach((t) => {
-      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("size", s);
+      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("size", i);
     });
   }
   _applyVariantToChildren(e) {
-    const s = this.getAttribute("variant") || "default";
+    const i = this.getAttribute("variant") || "default";
     (e || Array.from(this.children)).forEach((t) => {
-      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("variant", s);
+      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("variant", i);
     });
   }
+  _syncRadiusAttribute() {
+    var t;
+    const e = (t = this.getAttribute("radius")) == null ? void 0 : t.trim();
+    if (!e) {
+      this.style.removeProperty("--tab-radius");
+      return;
+    }
+    const i = e.startsWith("radius-") ? e.replace("radius-", "") : e, s = /^(000|100|150|200|300|400|500|600)$/.test(i);
+    this.style.setProperty("--tab-radius", s ? `var(--radius-${i})` : e);
+  }
   disconnectedCallback() {
     window.removeEventListener("resize", this._handleResize), this._observedTab && this._resizeObserver.unobserve(this._observedTab), this._resizeObserver.unobserve(this), this._resizeTimeout && clearTimeout(this._resizeTimeout), this._resizeObserver.disconnect();
   }
   _handleResize() {
     if (!this._activeTab) return;
-    this._resizeTimeout && clearTimeout(this._resizeTimeout), this._activeTab && Array.from(this.children).forEach((s) => {
-      s === this._activeTab ? s.setAttribute("active", "") : s.removeAttribute("active");
+    this._resizeTimeout && clearTimeout(this._resizeTimeout), this._activeTab && Array.from(this.children).forEach((i) => {
+      i === this._activeTab ? i.setAttribute("active", "") : i.removeAttribute("active");
     });
     const e = this.shadowRoot.querySelector(".highlight");
     e && (e.style.transition = "none", this._updateHighlight(this._activeTab), e.offsetWidth, this._resizeTimeout = window.setTimeout(() => {
@@ -166,15 +220,15 @@ class l extends HTMLElement {
   }
   _updateHighlight(e) {
     if (this.getAttribute("variant") === "dots") return;
-    const s = this.shadowRoot.querySelector(".highlight"), a = e.getBoundingClientRect(), t = this.getBoundingClientRect(), i = parseFloat(getComputedStyle(this).borderWidth) || 0, r = a.left - t.left - i;
-    s.style.transform = `translateX(${r}px) translateZ(0)`, s.style.width = `${a.width}px`;
+    const i = this.shadowRoot.querySelector(".highlight"), s = e.getBoundingClientRect(), t = this.getBoundingClientRect(), a = parseFloat(getComputedStyle(this).borderWidth) || 0, r = s.left - t.left - a;
+    i.style.transform = `translateX(${r}px)`, i.style.width = `${s.width}px`;
   }
   setActiveTab(e) {
-    if (Array.from(this.children).forEach((a) => a.removeAttribute("active")), e.setAttribute("active", ""), this._activeTab = e, this._observedTab && this._observedTab !== e && this._resizeObserver.unobserve(this._observedTab), this._observedTab = e, this._resizeObserver.observe(e), this._hasInitialized)
+    if (Array.from(this.children).forEach((s) => s.removeAttribute("active")), e.setAttribute("active", ""), this._activeTab = e, this._observedTab && this._observedTab !== e && this._resizeObserver.unobserve(this._observedTab), this._observedTab = e, this._resizeObserver.observe(e), this._hasInitialized)
       this._updateHighlight(e);
     else {
-      const a = this.shadowRoot.querySelector(".highlight");
-      a.style.transition = "none", this._updateHighlight(e), a.offsetWidth, a.style.transition = "", this._hasInitialized = !0;
+      const s = this.shadowRoot.querySelector(".highlight");
+      s.style.transition = "none", this._updateHighlight(e), s.offsetWidth, s.style.transition = "", this._hasInitialized = !0;
     }
     this.dispatchEvent(
       new CustomEvent("tab-change", {
@@ -185,4 +239,4 @@ class l extends HTMLElement {
     );
   }
 }
-customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", l);
+customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", d);

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)", r = this.getAttribute("loading") || "lazy", i = 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-60));
+          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-rectangle {
+          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(r)}" decoding="${this.escapeAttribute(i)}" />` : '<slot name="image"></slot>'}
+          ${s ? '<span class="overlay" aria-hidden="true"></span>' : ""}
+          <span class="play" aria-hidden="true" ${o ? "" : "hidden"}>
+            <mui-icon-play-rectangle size="large"></mui-icon-play-rectangle>
+          </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 Tue, 26 May 2026 10:59:50 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Sun, 31 May 2026 05:18:09 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */
@@ -28,6 +28,7 @@
 /* ======================================= 21 / 14  =  1.500 ======================================= */
 /* ======================================= 24 / 16  =  1.500 ======================================= */
 /* ======================================= 24 / 18  =  1.333 ======================================= */
+/* ======================================= 30 / 18  =  1.667 ======================================= */
 /* ======================================= 24 / 21  =  1.143 ======================================= */
 /* ======================================= 36 / 24  =  1.500 ======================================= */
 /* ======================================= 48 / 36  =  1.333 ======================================= */
@@ -62,6 +63,7 @@
   --line-height-50: 1.5;
   --line-height-100: 1.5;
   --line-height-200: 1.33333333;
+  --line-height-225: 1.66666667;
   --line-height-300: 1.14285714;
   --line-height-400: 1.5;
   --line-height-500: 1.33333333;