@muibook/components 19.3.0 → 19.4.0

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

@@ -49,16 +49,16 @@ class n extends HTMLElement {
       small: "xx-small",
       medium: "x-small",
       large: "x-small"
-    }[e] || "x-small", a = (h) => {
+    }[e] || "x-small", o = (h) => {
       if (!h) return;
-      const o = () => {
+      const a = () => {
         h.assignedElements().forEach((r) => {
           r.tagName.toLowerCase().startsWith("mui-icon") && r.setAttribute("size", c);
         });
       };
-      h.addEventListener("slotchange", o), setTimeout(o, 0);
+      h.addEventListener("slotchange", a), setTimeout(a, 0);
     };
-    a(s), a(t);
+    o(s), o(t);
   }
   _updateIcons() {
     const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), t = this.shadowRoot.querySelector('slot[name="off-icon"]');
@@ -78,8 +78,8 @@ class n extends HTMLElement {
         .switch {
           position: relative;
           display: inline-block;
-          width: var(--_switch-width, var(--switch-width));
-          height: var(--_switch-height, var(--switch-height));
+          width: var(--switch-width-computed, var(--switch-width));
+          height: var(--switch-height-computed, var(--switch-height));
         }
 
         .switch input {
@@ -101,15 +101,15 @@ class n extends HTMLElement {
           bottom: 0;
           background-color: var(--switch-track-background);
           transition: background-color var(--speed-200);
-          border-radius: var(--_switch-height, var(--switch-height));
+          border-radius: var(--switch-height-computed, var(--switch-height));
         }
 
         .thumb {
           position: absolute;
-          top: var(--_switch-offset, var(--switch-offset));
-          left: var(--_switch-offset, var(--switch-offset));
-          width: var(--_switch-thumb-size, var(--switch-thumb-size));
-          height: var(--_switch-thumb-size, var(--switch-thumb-size));
+          top: var(--switch-offset-computed, var(--switch-offset));
+          left: var(--switch-offset-computed, var(--switch-offset));
+          width: var(--switch-thumb-size-computed, var(--switch-thumb-size));
+          height: var(--switch-thumb-size-computed, var(--switch-thumb-size));
           background-color: var(--switch-thumb-bg);
           transition: transform var(--speed-200);
           border-radius: 50%;
@@ -125,36 +125,36 @@ class n extends HTMLElement {
         input:checked + .track .thumb {
           transform: translateX(
             calc(
-              var(--_switch-width, var(--switch-width)) -
-              var(--_switch-thumb-size, var(--switch-thumb-size)) -
-              (var(--_switch-offset, var(--switch-offset)) * 2)
+              var(--switch-width-computed, var(--switch-width)) -
+              var(--switch-thumb-size-computed, var(--switch-thumb-size)) -
+              (var(--switch-offset-computed, var(--switch-offset)) * 2)
             )
           );
         }
 
         :host([size="x-small"]) {
-          --_switch-offset: var(--stroke-size-100);
-          --_switch-thumb-size: calc(var(--action-icon-only-size-x-small) - var(--space-200));
-          --_switch-height: calc(var(--_switch-thumb-size) + (var(--_switch-offset) * 2));
-          --_switch-width: calc(var(--_switch-height) * 1.6);
+          --switch-offset-computed: var(--stroke-size-100);
+          --switch-thumb-size-computed: calc(var(--action-icon-only-size-x-small) - var(--space-200));
+          --switch-height-computed: calc(var(--switch-thumb-size-computed) + (var(--switch-offset-computed) * 2));
+          --switch-width-computed: calc(var(--switch-height-computed) * 1.6);
         }
         :host([size="small"]) {
-          --_switch-offset: var(--stroke-size-100);
-          --_switch-thumb-size: calc(var(--action-icon-only-size-small) - var(--space-200));
-          --_switch-height: calc(var(--_switch-thumb-size) + (var(--_switch-offset) * 2));
-          --_switch-width: calc(var(--_switch-height) * 1.6);
+          --switch-offset-computed: var(--stroke-size-100);
+          --switch-thumb-size-computed: calc(var(--action-icon-only-size-small) - var(--space-200));
+          --switch-height-computed: calc(var(--switch-thumb-size-computed) + (var(--switch-offset-computed) * 2));
+          --switch-width-computed: calc(var(--switch-height-computed) * 1.6);
         }
         :host([size="medium"]) {
-          --_switch-offset: var(--stroke-size-100);
-          --_switch-thumb-size: calc(var(--switch-thumb-size) - var(--space-100));
-          --_switch-height: calc(var(--_switch-thumb-size) + (var(--_switch-offset) * 2));
-          --_switch-width: calc(var(--_switch-height) * 1.6);
+          --switch-offset-computed: var(--stroke-size-100);
+          --switch-thumb-size-computed: calc(var(--switch-thumb-size) - var(--space-100));
+          --switch-height-computed: calc(var(--switch-thumb-size-computed) + (var(--switch-offset-computed) * 2));
+          --switch-width-computed: calc(var(--switch-height-computed) * 1.6);
         }
         :host([size="large"]) {
-          --_switch-offset: var(--switch-offset);
-          --_switch-thumb-size: var(--switch-thumb-size);
-          --_switch-height: var(--switch-height);
-          --_switch-width: var(--switch-width);
+          --switch-offset-computed: var(--switch-offset);
+          --switch-thumb-size-computed: var(--switch-thumb-size);
+          --switch-height-computed: var(--switch-height);
+          --switch-width-computed: var(--switch-width);
         }
 
         ::slotted([slot="on-icon"]),

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

@@ -106,7 +106,7 @@ class l extends HTMLElement {
           z-index: 0;
           padding: var(--space-200) var(--space-400);
           box-sizing: border-box;
-          box-shadow: 0 0 4px 4px var(--tab-shadow-active);
+          box-shadow: var(--tab-shadow-active);
           will-change: transform, width;
           transform: translateX(0) translateZ(0);
           width: 0;

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

@@ -1,4 +1,4 @@
-class b extends HTMLElement {
+class p extends HTMLElement {
   static get observedAttributes() {
     return [
       "name",
@@ -68,7 +68,7 @@ class b extends HTMLElement {
     !e || !a || e.maxLength <= 0 || (a.textContent = `${e.value.length}/${e.maxLength}`);
   }
   render() {
-    const e = this.getAttribute("name") || "", a = this.getAttribute("value") || "", r = this.getAttribute("placeholder") || "", t = this.getAttribute("id") || `mui-textarea-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", c = this.hasAttribute("optional"), l = this.hasAttribute("hide-label"), d = this.hasAttribute("disabled"), v = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", n = this.getAttribute("size") || "medium", x = ["x-small", "small", "medium", "large"].includes(n) ? n : "medium", u = l && o ? `aria-label="${o}"` : "", h = this.getAttribute("variant") || "", g = h || "", m = (
+    const e = this.getAttribute("name") || "", a = this.getAttribute("value") || "", r = this.getAttribute("placeholder") || "", t = this.getAttribute("id") || `mui-textarea-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", d = this.hasAttribute("optional"), n = this.hasAttribute("hide-label"), x = this.hasAttribute("disabled"), l = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", c = this.getAttribute("size") || "medium", u = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", v = n && o ? `aria-label="${o}"` : "", h = this.getAttribute("variant") || "", g = h || "", b = (
       /*html*/
       `
       <style>
@@ -104,11 +104,16 @@ class b extends HTMLElement {
 
         textarea {
           width: 100%;
-          min-height: 9.6rem;
-          line-height: var(--text-line-height);
-          padding: var(--space-200) var(--space-300);
+          min-height: calc(
+            (var(--textarea-line-height-current) * var(--textarea-rows, 4)) +
+            (var(--textarea-padding-block-current) * 2) +
+            (var(--stroke-size-100) * 2)
+          );
+          line-height: var(--textarea-line-height-current);
+          padding-block: var(--textarea-padding-block-current);
+          padding-inline: var(--textarea-padding-inline-current);
           box-sizing: border-box;
-          font-size: var(--text-font-size);
+          font-size: var(--textarea-font-size-current);
           border-radius: var(--radius-100);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
@@ -116,30 +121,34 @@ class b extends HTMLElement {
           background: var(--input-background);
           resize: vertical;
           font-family: var(--font-family);
+          --textarea-font-size-current: var(--text-font-size);
+          --textarea-line-height-current: var(--text-line-height);
+          --textarea-padding-block-current: var(--space-200);
+          --textarea-padding-inline-current: var(--space-300);
         }
         textarea.size-x-small {
-          min-height: 7.2rem;
-          padding: var(--action-padding-x-small);
-          font-size: var(--text-font-size-xs);
-          line-height: var(--text-line-height-xs);
+          --textarea-font-size-current: var(--text-font-size-xs);
+          --textarea-line-height-current: var(--text-line-height-xs);
+          --textarea-padding-block-current: var(--space-050);
+          --textarea-padding-inline-current: var(--space-200);
         }
         textarea.size-small {
-          min-height: 8.4rem;
-          padding: var(--action-padding-small);
-          font-size: var(--text-font-size-s);
-          line-height: var(--text-line-height-s);
+          --textarea-font-size-current: var(--text-font-size-s);
+          --textarea-line-height-current: var(--text-line-height-s);
+          --textarea-padding-block-current: calc(var(--space-100) - (var(--stroke-size-100) / 2));
+          --textarea-padding-inline-current: var(--space-300);
         }
         textarea.size-medium {
-          min-height: 9.6rem;
-          padding: var(--space-200) var(--space-300);
-          font-size: var(--text-font-size);
-          line-height: var(--text-line-height);
+          --textarea-font-size-current: var(--text-font-size);
+          --textarea-line-height-current: var(--text-line-height);
+          --textarea-padding-block-current: var(--space-200);
+          --textarea-padding-inline-current: var(--space-300);
         }
         textarea.size-large {
-          min-height: 11.2rem;
-          padding: var(--space-300) var(--space-400);
-          font-size: var(--text-font-size-l);
-          line-height: var(--text-line-height-l);
+          --textarea-font-size-current: var(--text-font-size-l);
+          --textarea-line-height-current: var(--text-line-height-l);
+          --textarea-padding-block-current: var(--space-300);
+          --textarea-padding-inline-current: var(--space-400);
         }
 
         textarea:hover {
@@ -269,22 +278,23 @@ class b extends HTMLElement {
         }
       </style>
 
-      ${o ? `<label for="${t}" class="${l ? "vh" : ""}">${o}${c ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+      ${o ? `<label for="${t}" class="${n ? "vh" : ""}">${o}${d ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
 
       <textarea
         id="${t}"
         name="${e}"
-        class="${[g, `size-${x}`].filter(Boolean).join(" ")}"
-        rows="${v}"
+        class="${[g, `size-${u}`].filter(Boolean).join(" ")}"
+        style="--textarea-rows: ${l};"
+        rows="${l}"
         placeholder="${r}"
         ${s ? `maxlength="${s}"` : ""}
-        ${d ? "disabled" : ""}
-        ${u}
+        ${x ? "disabled" : ""}
+        ${v}
       >${a}</textarea>
       ${s ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
     );
-    this.shadowRoot.innerHTML = m, o || console.warn("mui-textarea: Missing required 'label' attribute for accessibility.");
+    this.shadowRoot.innerHTML = b, o || console.warn("mui-textarea: Missing required 'label' attribute for accessibility.");
   }
 }
-customElements.get("mui-textarea") || customElements.define("mui-textarea", b);
+customElements.get("mui-textarea") || customElements.define("mui-textarea", p);

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

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Thu, 07 May 2026 04:13:10 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Mon, 25 May 2026 10:00:49 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */

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

@@ -179,11 +179,13 @@ html[data-theme="light"] {
   --surface-elevated-alpha: var(--white-opacity-50);
   --surface-elevated-100: var(--white);
   --surface-elevated-200: var(--grey-100);
+  --code-background: var(--surface-elevated-200);
   --prompt-preview-dismiss-border-color: var(--black-opacity-30);
   --prompt-preview-box-drop-shadow: drop-shadow(
     0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-10)
   );
   --prompt-preview-surface: var(--surface-elevated-100);
+  --prompt-preview-code-background: var(--code-background);
   --prompt-preview-accent-mix-100: 10%;
   --prompt-preview-accent-mix-200: 8%;
   --prompt-preview-accent-mix-300: 6%;
@@ -314,7 +316,8 @@ html[data-theme="light"] {
   --tab-background-active: var(--white);
   --tab-icon-active: var(--black);
   --tab-text-color-active: var(--black);
-  --tab-shadow-active: var(--black-opacity-10);
+  --tab-shadow-active-color: var(--black-opacity-10);
+  --tab-shadow-active: 0 0 var(--stroke-size-400) var(--stroke-size-400) var(--tab-shadow-active-color);
   --tabs-ghost-box-shadow: none;
 
   /* Carousel */
@@ -395,6 +398,7 @@ html[data-theme="light"] {
 
   /* Dialog */
   --dialog-background: var(--white);
+  --dialog-border: none;
 
   /* Drawer */
   --drawer-background: var(--white);
@@ -529,11 +533,13 @@ html[data-theme="dark"] {
   --surface-elevated-alpha: var(--white-opacity-10);
   --surface-elevated-100: var(--grey-800);
   --surface-elevated-200: var(--grey-900);
+  --code-background: var(--surface-elevated-200);
   --prompt-preview-dismiss-border-color: var(--white-opacity-30);
   --prompt-preview-box-drop-shadow: drop-shadow(
     0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20)
   );
   --prompt-preview-surface: var(--surface-elevated-200);
+  --prompt-preview-code-background: var(--code-background);
   --prompt-preview-accent-mix-100: 14%;
   --prompt-preview-accent-mix-200: 10%;
   --prompt-preview-accent-mix-300: 8%;
@@ -663,7 +669,8 @@ html[data-theme="dark"] {
   --tab-background-active: var(--grey-700);
   --tab-icon-active: var(--white);
   --tab-text-color-active: var(--white);
-  --tab-shadow-active: var(--black-opacity-40);
+  --tab-shadow-active-color: var(--black-opacity-40);
+  --tab-shadow-active: 0 0 var(--stroke-size-400) var(--stroke-size-400) var(--tab-shadow-active-color);
   --tabs-ghost-box-shadow: none;
 
   /* Carousel */
@@ -744,6 +751,7 @@ html[data-theme="dark"] {
 
   /* Dialog */
   --dialog-background: var(--grey-800);
+  --dialog-border: none;
 
   /* Drawer */
   --drawer-background: var(--grey-800);
@@ -974,7 +982,8 @@ html[data-theme="dark"] {
   /* Dialog */
   --dialog-radius: var(--radius-150);
   /* Avatar */
-  --avatar-x-small: var(--space-500); /* 24px */
+  --avatar-xx-small: var(--space-500); /* 24px */
+  --avatar-x-small: calc(var(--space-500) + var(--space-200)); /* 32px */
   --avatar-small: calc(var(--space-600) + var(--space-025)); /* 38px */
   --avatar-medium: var(--space-700); /* 48px */
   --avatar-large: calc(var(--space-700) + var(--space-200)); /* 56px */