@muibook/components 11.0.0 → 12.0.0

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

@@ -1,4 +1,4 @@
-class p extends HTMLElement {
+class b extends HTMLElement {
   static get observedAttributes() {
     return [
       "name",
@@ -68,7 +68,7 @@ class p 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") || "", h = this.hasAttribute("optional"), l = this.hasAttribute("hide-label"), d = this.hasAttribute("disabled"), u = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", n = this.getAttribute("size") || "medium", v = ["x-small", "small", "medium", "large"].includes(n) ? n : "medium", x = l && o ? `aria-label="${o}"` : "", c = this.getAttribute("variant") || "", b = c || "", 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") || "", 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 = (
       /*html*/
       `
       <style>
@@ -80,10 +80,27 @@ class p extends HTMLElement {
         label {
           display: block;
           font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
           font-weight: var(--font-weight-medium);
           margin-bottom: var(--space-100);
           color: var(--text-color);
         }
+        :host([size="x-small"]) label {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="small"]) label {
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        :host([size="medium"]) label {
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
+        :host([size="large"]) label {
+          font-size: var(--text-font-size-l);
+          line-height: var(--text-line-height-l);
+        }
 
         textarea {
           width: 100%;
@@ -226,6 +243,22 @@ class p extends HTMLElement {
           text-transform: uppercase;
           font-weight: var(--font-weight-medium);
         }
+        :host([size="x-small"]) .optional {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="small"]) .optional {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="medium"]) .optional {
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        :host([size="large"]) .optional {
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
         .optional-dot {
           display: inline-flex;
           align-items: center;
@@ -236,17 +269,17 @@ class p extends HTMLElement {
         }
       </style>
 
-      ${o ? `<label for="${t}" class="${l ? "vh" : ""}">${o}${h ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+      ${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>` : ""}
 
       <textarea
         id="${t}"
         name="${e}"
-        class="${[b, `size-${v}`].filter(Boolean).join(" ")}"
-        rows="${u}"
+        class="${[g, `size-${x}`].filter(Boolean).join(" ")}"
+        rows="${v}"
         placeholder="${r}"
         ${s ? `maxlength="${s}"` : ""}
         ${d ? "disabled" : ""}
-        ${x}
+        ${u}
       >${a}</textarea>
       ${s ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
@@ -254,4 +287,4 @@ class p extends HTMLElement {
     this.shadowRoot.innerHTML = m, o || console.warn("mui-textarea: Missing required 'label' attribute for accessibility.");
   }
 }
-customElements.get("mui-textarea") || customElements.define("mui-textarea", p);
+customElements.get("mui-textarea") || customElements.define("mui-textarea", b);

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

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Wed, 25 Feb 2026 01:13:26 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Fri, 27 Feb 2026 02:33:05 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */

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

@@ -41,6 +41,14 @@
   --avatar-blue-800: oklch(45.925% 0.11981 252.499);
   --avatar-indigo-200: oklch(69.039% 0.10593 274.775);
   --avatar-indigo-800: oklch(38.197% 0.13614 269.807);
+
+  /* Slide Frame - Foundation */
+  --slide-frame-padding-small: var(--space-300);
+  --slide-frame-padding-medium: var(--space-500);
+  --slide-frame-padding-large: var(--space-700);
+  --slide-frame-gap: var(--space-400);
+  --slide-frame-radius: var(--radius-300);
+  --slide-frame-shadow: var(--shadow-200);
 }
 
 /* ==================================================================================================== */
@@ -208,12 +216,20 @@ html[data-theme="light"] {
   --prompt-placeholder-color: var(--form-default-placeholder-color);
   --prompt-placeholder-color-hover: var(--form-default-placeholder-color-hover);
   --prompt-placeholder-color-focus: var(--form-default-placeholder-color-focus);
+  --slide-frame-background: var(--surface-elevated-100);
+  --slide-frame-border-color: var(--border-color);
+  --slide-frame-background-present: var(--slide-frame-background);
   --media-player-seek-color: var(--grey-1200);
   --media-player-seek-time-background: var(--surface-elevated-100);
   --media-player-seek-time-border-color: var(--border-color);
   --range-input-accent-color: var(--media-player-seek-color);
   --range-input-bubble-background: var(--media-player-seek-time-background);
   --range-input-bubble-border-color: var(--media-player-seek-time-border-color);
+  --skeleton-background: var(--surface-elevated-200);
+  --skeleton-highlight: var(--white-opacity-70);
+  --skeleton-radius: var(--radius-200);
+  --skeleton-animation-speed: 2000ms;
+  --skeleton-gap: var(--space-200);
   --surface-recessed-alpha: var(--black-opacity-10);
   --surface-recessed-100: var(--grey-300);
   --surface-recessed-200: var(--grey-400);
@@ -290,6 +306,7 @@ html[data-theme="light"] {
   --tab-icon-active: var(--black);
   --tab-text-color-active: var(--black);
   --tab-shadow-active: var(--black-opacity-10);
+  --tabs-ghost-box-shadow: none;
 
   /* Carousel */
   --carousel-background: var(--white);
@@ -540,12 +557,20 @@ html[data-theme="dark"] {
   --prompt-placeholder-color: var(--form-default-placeholder-color);
   --prompt-placeholder-color-hover: var(--form-default-placeholder-color-hover);
   --prompt-placeholder-color-focus: var(--form-default-placeholder-color-focus);
+  --slide-frame-background: var(--surface-elevated-200);
+  --slide-frame-border-color: var(--border-color);
+  --slide-frame-background-present: var(--slide-frame-background);
   --media-player-seek-color: var(--white);
   --media-player-seek-time-background: var(--surface-recessed-100);
   --media-player-seek-time-border-color: var(--white-opacity-20);
   --range-input-accent-color: var(--media-player-seek-color);
   --range-input-bubble-background: var(--media-player-seek-time-background);
   --range-input-bubble-border-color: var(--media-player-seek-time-border-color);
+  --skeleton-background: var(--surface-elevated-200);
+  --skeleton-highlight: var(--white-opacity-30);
+  --skeleton-radius: var(--radius-200);
+  --skeleton-animation-speed: 2000ms;
+  --skeleton-gap: var(--space-200);
   --surface-elevated-300: var(--grey-1000);
   --surface-recessed-alpha: var(--black-opacity-30);
   --surface-recessed-100: var(--grey-1000);
@@ -621,6 +646,7 @@ html[data-theme="dark"] {
   --tab-icon-active: var(--white);
   --tab-text-color-active: var(--white);
   --tab-shadow-active: var(--black-opacity-40);
+  --tabs-ghost-box-shadow: none;
 
   /* Carousel */
   --carousel-background: var(--grey-700);