@muibook/components 19.3.0 → 19.5.0

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

@@ -31,13 +31,13 @@ class S extends HTMLElement {
       e.forEach((r) => {
         const n = r.name === "actions";
         r.assignedElements({ flatten: !0 }).forEach((a) => {
-          [a, ...Array.from(a.querySelectorAll("*"))].forEach((h) => {
-            const p = h.tagName.toLowerCase();
+          [a, ...Array.from(a.querySelectorAll("*"))].forEach((m) => {
+            const p = m.tagName.toLowerCase();
             if (p === "mui-button") {
-              h.setAttribute("variant", "tertiary"), o(h, n);
+              m.setAttribute("variant", "tertiary"), o(m, n);
               return;
             }
-            p === "mui-dropdown" && h.querySelectorAll('[slot="action"]').forEach((d) => {
+            p === "mui-dropdown" && m.querySelectorAll('[slot="action"]').forEach((d) => {
               d instanceof HTMLElement && d.tagName.toLowerCase() === "mui-button" && (d.setAttribute("variant", "tertiary"), o(d, n));
             });
           });
@@ -48,9 +48,9 @@ class S extends HTMLElement {
     }, this.onPaste = (t) => {
       const e = t, o = e.clipboardData;
       if (!o) return;
-      const r = Array.from(o.files || []), n = o.getData("text/plain") || "", i = n.trim(), a = i.length > 0, l = a ? this.detectMediaUrl(i) : null, h = this.getAttribute("preview-overflow-to-preview") !== "false", p = this.getAttribute("preview-threshold-chars"), c = Number.isFinite(Number.parseInt(p || "", 10)) ? Math.max(1, Number.parseInt(p || "", 10)) : 220, d = a ? this.detectBadge(i) : "", u = d !== "" && d !== "Insightful", b = h && a && (!!(l != null && l.url) || i.length >= c || u), m = r.length > 0;
-      if (!m && !a) return;
-      (m || b) && e.preventDefault();
+      const r = Array.from(o.files || []), n = o.getData("text/plain") || "", i = n.trim(), a = i.length > 0, l = a ? this.detectMediaUrl(i) : null, m = this.getAttribute("preview-overflow-to-preview") !== "false", p = this.getAttribute("preview-threshold-chars"), c = Number.isFinite(Number.parseInt(p || "", 10)) ? Math.max(1, Number.parseInt(p || "", 10)) : 220, d = a ? this.detectBadge(i) : "", u = d !== "" && d !== "Insightful", b = m && a && (!!(l != null && l.url) || i.length >= c || u), h = r.length > 0;
+      if (!h && !a) return;
+      (h || b) && e.preventDefault();
       const v = r.map((s) => ({
         kind: s.type.startsWith("image/") ? "image" : s.type.startsWith("video/") ? "video" : s.type.startsWith("audio/") ? "audio" : "file",
         mimeType: s.type || "",
@@ -240,14 +240,14 @@ class S extends HTMLElement {
       )
     ).flatMap((r) => r.assignedElements({ flatten: !0 })).forEach((r) => {
       [r, ...Array.from(r.querySelectorAll("*"))].forEach((i) => {
-        const l = i.tagName.toLowerCase() === "mui-prompt-toggle", h = i.hasAttribute("context-toggle"), p = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
+        const l = i.tagName.toLowerCase() === "mui-prompt-toggle", m = i.hasAttribute("context-toggle"), p = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
         if (l) {
           i.setAttribute("mode", t);
           return;
         }
-        if (h || p) {
+        if (m || p) {
           i.hasAttribute("context-chip") && i.tagName.toLowerCase() === "mui-chip" && !i.hasAttribute("variant") && i.setAttribute("variant", "ghost");
-          const c = h ? t === "icon" : t === "chip";
+          const c = m ? t === "icon" : t === "chip";
           i.toggleAttribute("hidden", !c), i.style.display = c ? "inline-flex" : "none";
         }
       });
@@ -434,10 +434,10 @@ class S extends HTMLElement {
     t == null || t.focus();
   }
   syncTextareaHeight(t) {
-    const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10), n = getComputedStyle(t), a = (Number.parseFloat(n.fontSize) || 16) * 1.55, l = Number.parseFloat(n.paddingTop) || 0, h = Number.parseFloat(n.paddingBottom) || 0, p = Number.parseFloat(n.borderTopWidth) || 0, c = Number.parseFloat(n.borderBottomWidth) || 0, d = l + h + p + c, u = 3 * a + d, b = r * a + d;
+    const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10), n = getComputedStyle(t), a = (Number.parseFloat(n.fontSize) || 16) * 1.55, l = Number.parseFloat(n.paddingTop) || 0, m = Number.parseFloat(n.paddingBottom) || 0, p = Number.parseFloat(n.borderTopWidth) || 0, c = Number.parseFloat(n.borderBottomWidth) || 0, d = l + m + p + c, u = 3 * a + d, b = r * a + d;
     t.style.height = "auto";
-    const m = t.scrollHeight, v = Math.max(u, Math.min(m, b));
-    t.style.height = `${Math.ceil(v)}px`, t.style.overflowY = m > b ? "auto" : "hidden";
+    const h = t.scrollHeight, v = Math.max(u, Math.min(h, b));
+    t.style.height = `${Math.ceil(v)}px`, t.style.overflowY = h > b ? "auto" : "hidden";
   }
   detectBadge(t) {
     const e = t.trim();
@@ -559,7 +559,7 @@ class S extends HTMLElement {
   openInternalPreviewDialog(t) {
     var f;
     if (!this.shadowRoot) return;
-    const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"), n = this.shadowRoot.querySelector("#promptAutoPreviewImage"), i = this.shadowRoot.querySelector("#promptAutoPreviewMedia"), a = this.shadowRoot.querySelector("#promptAutoPreviewMediaUrl"), l = this.normalizePreviewDetail(t), h = this.getAttribute("preview-dialog-title") || l.label, p = l.value, c = l.bgImage, d = l.badge, u = p ? this.detectMediaUrl(p) : null, b = !c && p.length > 0 && (d === "VIDEO" || d === "MUSIC"), m = !c && (!!(u && (u.kind === "video" || u.kind === "audio")) || b), v = c.length > 0, s = p.length > 0, y = (() => {
+    const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"), n = this.shadowRoot.querySelector("#promptAutoPreviewImage"), i = this.shadowRoot.querySelector("#promptAutoPreviewMedia"), a = this.shadowRoot.querySelector("#promptAutoPreviewMediaUrl"), l = this.normalizePreviewDetail(t), m = this.getAttribute("preview-dialog-title") || l.label, p = l.value, c = l.bgImage, d = l.badge, u = p ? this.detectMediaUrl(p) : null, b = !c && p.length > 0 && (d === "VIDEO" || d === "MUSIC"), h = !c && (!!(u && (u.kind === "video" || u.kind === "audio")) || b), v = c.length > 0, s = p.length > 0, y = (() => {
       if (!u || u.kind !== "audio") return !1;
       try {
         const g = new URL(u.url);
@@ -576,10 +576,10 @@ class S extends HTMLElement {
         return "Audio";
       }
     })();
-    if (!(!v && !s && !m)) {
-      if (this.setAttribute("preview-dialog-value", p), this.setAttribute("preview-dialog-image", c), this.setAttribute("preview-dialog-type", d || (v ? "IMG" : "CODE")), o && (o.textContent = h), m ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
+    if (!(!v && !s && !h)) {
+      if (this.setAttribute("preview-dialog-value", p), this.setAttribute("preview-dialog-image", c), this.setAttribute("preview-dialog-type", d || (v ? "IMG" : "CODE")), o && (o.textContent = m), h ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
         a && a.setAttribute("hidden", ""), n && (n.setAttribute("src", c), n.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
-      else if (m && u) {
+      else if (h && u) {
         if (a) {
           const g = y;
           a.textContent = g ? w : u.url, g ? (a.setAttribute("href", u.url), a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer")) : (a.removeAttribute("href"), a.removeAttribute("target"), a.removeAttribute("rel")), a.toggleAttribute("hidden", !g);
@@ -644,11 +644,11 @@ class S extends HTMLElement {
       const s = !r || i;
       e.toggleAttribute("hidden", s), e.style.display = s ? "none" : "inline-flex";
     }
-    const a = i || !r ? null : e, l = o.filter((s) => s !== a), h = a ? [a, ...l] : o, p = this.shadowRoot.querySelector('slot[name="actions-right"]'), c = (p == null ? void 0 : p.assignedElements({ flatten: !0 })) || [], d = l.length > 0;
+    const a = i || !r ? null : e, l = o.filter((s) => s !== a), m = a ? [a, ...l] : o, p = this.shadowRoot.querySelector('slot[name="actions-right"]'), c = (p == null ? void 0 : p.assignedElements({ flatten: !0 })) || [], d = l.length > 0;
     this.toggleAttribute("has-actions", r), this.toggleAttribute("has-extra-actions", d);
-    const u = r || this.hasTruthyFlagAttribute("actions-fan"), b = this.hasAttribute("fan-open"), m = 100, v = "calc(var(--action-icon-only-size-medium) + var(--space-100))";
-    this.enforceActionVariants(), h.forEach((s, y) => {
-      s.style.transition = `transform ${m}ms ease, opacity ${m}ms ease`, s.style.zIndex = "";
+    const u = r || this.hasTruthyFlagAttribute("actions-fan"), b = this.hasAttribute("fan-open"), h = 100, v = "calc(var(--action-icon-only-size-medium) + var(--space-100))";
+    this.enforceActionVariants(), m.forEach((s, y) => {
+      s.style.transition = `transform ${h}ms ease, opacity ${h}ms ease`, s.style.zIndex = "";
       const w = this.fanAnimations.get(s);
       if (w && (w.cancel(), this.fanAnimations.delete(s)), !u) {
         this.setFanItemInert(s, !1), s.style.transitionDelay = "", s.style.transform = "", s.style.opacity = "", s.style.pointerEvents = "", s.style.filter = "";
@@ -663,7 +663,7 @@ class S extends HTMLElement {
         return;
       }
       const f = `calc(${v} * -${y})`, g = y * 50;
-      s.style.transition = `opacity ${Math.max(120, m - 40)}ms ease, transform ${m}ms cubic-bezier(0.22, 1, 0.36, 1)`, s.style.transitionDelay = `${g}ms`, s.style.transform = "translateX(0) scale(0.92)", s.style.opacity = "0", s.style.pointerEvents = "none", s.style.filter = "", this.setFanItemInert(s, !0), requestAnimationFrame(() => {
+      s.style.transition = `opacity ${Math.max(120, h - 40)}ms ease, transform ${h}ms cubic-bezier(0.22, 1, 0.36, 1)`, s.style.transitionDelay = `${g}ms`, s.style.transform = "translateX(0) scale(0.92)", s.style.opacity = "0", s.style.pointerEvents = "none", s.style.filter = "", this.setFanItemInert(s, !0), requestAnimationFrame(() => {
         if (s.style.transform = `translateX(${f})`, s.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
           s.style.pointerEvents = "", this.setFanItemInert(s, !1);
           return;
@@ -676,7 +676,7 @@ class S extends HTMLElement {
             { transform: `translateX(${f}) scale(1)` }
           ],
           {
-            duration: m + 180,
+            duration: h + 180,
             delay: g,
             easing: "cubic-bezier(0.22, 1, 0.36, 1)",
             fill: "forwards"
@@ -693,34 +693,38 @@ class S extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"), n = this.getAttribute("preview-dialog-width") || "560px", i = this.getAttribute("color-top-start") || "", a = this.getAttribute("color-top-mid") || "", l = this.getAttribute("color-top-end") || "", h = this.getAttribute("color-top-accent") || "", c = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", d = c ? l || "var(--prompt-color-top-end, var(--green-500))" : i || "var(--prompt-color-top-start, var(--blue-500))", u = c ? h || "var(--prompt-color-top-accent, var(--orange-500))" : a || "var(--prompt-color-top-mid, var(--blue-500))", b = c ? i || "var(--prompt-color-top-start, var(--blue-500))" : l || "var(--prompt-color-top-end, var(--green-500))", m = c ? a || "var(--prompt-color-top-mid, var(--blue-500))" : h || "var(--prompt-color-top-accent, var(--orange-500))", v = this.getAttribute("aria-label"), s = this.getAttribute("aria-labelledby"), y = this.getAttribute("aria-describedby"), w = !v && !s ? "Prompt input" : "", f = (this.getAttribute("error-message") || "").trim(), g = f;
+    const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"), n = this.getAttribute("preview-dialog-width") || "560px", i = this.getAttribute("color-top-start") || "", a = this.getAttribute("color-top-mid") || "", l = this.getAttribute("color-top-end") || "", m = this.getAttribute("color-top-accent") || "", c = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", d = c ? l || "var(--prompt-color-top-end, var(--green-500))" : i || "var(--prompt-color-top-start, var(--blue-500))", u = c ? m || "var(--prompt-color-top-accent, var(--orange-500))" : a || "var(--prompt-color-top-mid, var(--blue-500))", b = c ? i || "var(--prompt-color-top-start, var(--blue-500))" : l || "var(--prompt-color-top-end, var(--green-500))", h = c ? a || "var(--prompt-color-top-mid, var(--blue-500))" : m || "var(--prompt-color-top-accent, var(--orange-500))", v = this.getAttribute("aria-label"), s = this.getAttribute("aria-labelledby"), y = this.getAttribute("aria-describedby"), w = !v && !s ? "Prompt input" : "", f = (this.getAttribute("error-message") || "").trim(), g = f;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
           display: block;
           --prompt-action-radius: var(--chip-radius-small, var(--radius-400));
-          --_prompt-color-top-start-source: ${d};
-          --_prompt-color-top-mid-source: ${u};
-          --_prompt-color-top-end-source: ${b};
-          --_prompt-color-top-accent-source: ${m};
-          --_prompt-accent-primary: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--blue-500)));
-          --_prompt-accent-secondary: var(--prompt-accent-secondary, var(--blue-500));
-          --_prompt-accent-mid: color-mix(in srgb, var(--_prompt-accent-primary) 52%, var(--_prompt-accent-secondary) 48%);
-          --_prompt-start-tint: color-mix(in srgb, var(--_prompt-color-top-start-source) 24%, transparent 76%);
-          --_prompt-mid-tint: color-mix(in srgb, var(--_prompt-color-top-mid-source) 18%, transparent 82%);
-          --_prompt-end-tint: color-mix(in srgb, var(--_prompt-color-top-end-source) 20%, transparent 80%);
-          --_prompt-accent-tint: color-mix(
+          --prompt-color-top-start-source: ${d};
+          --prompt-color-top-mid-source: ${u};
+          --prompt-color-top-end-source: ${b};
+          --prompt-color-top-accent-source: ${h};
+          --prompt-accent-primary-derived: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--blue-500)));
+          --prompt-accent-secondary-derived: var(--prompt-accent-secondary, var(--blue-500));
+          --prompt-accent-mid: color-mix(
             in srgb,
-            var(--_prompt-color-top-accent-source) 16%,
+            var(--prompt-accent-primary-derived) 52%,
+            var(--prompt-accent-secondary-derived) 48%
+          );
+          --prompt-start-tint: color-mix(in srgb, var(--prompt-color-top-start-source) 24%, transparent 76%);
+          --prompt-mid-tint: color-mix(in srgb, var(--prompt-color-top-mid-source) 18%, transparent 82%);
+          --prompt-end-tint: color-mix(in srgb, var(--prompt-color-top-end-source) 20%, transparent 80%);
+          --prompt-accent-tint: color-mix(
+            in srgb,
+            var(--prompt-color-top-accent-source) 16%,
             transparent 84%
           );
-          --_prompt-layer-start-tint: ${c ? "var(--_prompt-end-tint)" : "var(--_prompt-start-tint)"};
-          --_prompt-layer-mid-tint: ${c ? "var(--_prompt-accent-tint)" : "var(--_prompt-mid-tint)"};
-          --_prompt-layer-end-tint: ${c ? "var(--_prompt-start-tint)" : "var(--_prompt-end-tint)"};
-          --_prompt-layer-accent-tint: ${c ? "var(--_prompt-mid-tint)" : "var(--_prompt-accent-tint)"};
-          --_prompt-spectrum-blend-mode-hover: normal;
-          --_prompt-spectrum-blend-mode-focus: normal;
+          --prompt-layer-start-tint: ${c ? "var(--prompt-end-tint)" : "var(--prompt-start-tint)"};
+          --prompt-layer-mid-tint: ${c ? "var(--prompt-accent-tint)" : "var(--prompt-mid-tint)"};
+          --prompt-layer-end-tint: ${c ? "var(--prompt-start-tint)" : "var(--prompt-end-tint)"};
+          --prompt-layer-accent-tint: ${c ? "var(--prompt-mid-tint)" : "var(--prompt-accent-tint)"};
+          --prompt-spectrum-blend-mode-hover: normal;
+          --prompt-spectrum-blend-mode-focus: normal;
           --prompt-placeholder-color-hover-light: var(--grey-1200);
           --prompt-placeholder-color-hover-dark: var(--white);
           --prompt-placeholder-color-focus-light: var(--grey-1200);
@@ -753,24 +757,24 @@ class S extends HTMLElement {
             var(--prompt-focus-border-color) 25%,
             transparent 75%
           );
-          --_prompt-border-hover-primary-soft: color-mix(
+          --prompt-border-hover-primary-soft: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 46%,
+            var(--prompt-border-color-hover-primary, var(--prompt-accent-primary-derived)) 46%,
             var(--form-default-border-color-hover) 54%
           );
-          --_prompt-border-hover-primary-strong: color-mix(
+          --prompt-border-hover-primary-strong: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 70%,
+            var(--prompt-border-color-hover-primary, var(--prompt-accent-primary-derived)) 70%,
             var(--form-default-border-color-hover) 30%
           );
-          --_prompt-border-hover-secondary-soft: color-mix(
+          --prompt-border-hover-secondary-soft: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 46%,
+            var(--prompt-border-color-hover-secondary, var(--prompt-accent-secondary-derived)) 46%,
             var(--form-default-border-color-hover) 54%
           );
-          --_prompt-border-hover-secondary-strong: color-mix(
+          --prompt-border-hover-secondary-strong: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 70%,
+            var(--prompt-border-color-hover-secondary, var(--prompt-accent-secondary-derived)) 70%,
             var(--form-default-border-color-hover) 30%
           );
           overflow: visible;
@@ -813,25 +817,25 @@ class S extends HTMLElement {
           background:
             radial-gradient(
               90% 120% at 12% 16%,
-              var(--_prompt-layer-start-tint) 0%,
+              var(--prompt-layer-start-tint) 0%,
               transparent 62%
             ),
             radial-gradient(
               90% 120% at 72% 8%,
-              var(--_prompt-layer-mid-tint) 0%,
+              var(--prompt-layer-mid-tint) 0%,
               transparent 60%
             ),
             radial-gradient(
               80% 120% at 86% 72%,
-              var(--_prompt-layer-end-tint) 0%,
+              var(--prompt-layer-end-tint) 0%,
               transparent 58%
             ),
             radial-gradient(
               110% 120% at 34% 88%,
-              var(--_prompt-layer-accent-tint) 0%,
+              var(--prompt-layer-accent-tint) 0%,
               transparent 64%
             );
-          mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
+          mix-blend-mode: var(--prompt-spectrum-blend-mode-hover);
           filter: blur(var(--space-050));
           transform: translate3d(0, 0, 0) scaleX(0.94) scaleY(1.01);
           transform-origin: center;
@@ -852,26 +856,26 @@ class S extends HTMLElement {
           background:
             radial-gradient(
               90% 120% at 12% 16%,
-              var(--_prompt-layer-start-tint) 0%,
+              var(--prompt-layer-start-tint) 0%,
               transparent 62%
             ),
             radial-gradient(
               90% 120% at 72% 8%,
-              var(--_prompt-layer-mid-tint) 0%,
+              var(--prompt-layer-mid-tint) 0%,
               transparent 60%
             ),
             radial-gradient(
               80% 120% at 86% 72%,
-              var(--_prompt-layer-end-tint) 0%,
+              var(--prompt-layer-end-tint) 0%,
               transparent 58%
             ),
             radial-gradient(
               110% 120% at 34% 88%,
-              var(--_prompt-layer-accent-tint) 0%,
+              var(--prompt-layer-accent-tint) 0%,
               transparent 64%
             ),
             var(--surface-elevated-100);
-          mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
+          mix-blend-mode: var(--prompt-spectrum-blend-mode-hover);
           filter: none;
           animation: promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
         }
@@ -900,26 +904,26 @@ class S extends HTMLElement {
           background:
             radial-gradient(
               90% 120% at 12% 16%,
-              var(--_prompt-layer-start-tint) 0%,
+              var(--prompt-layer-start-tint) 0%,
               transparent 62%
             ),
             radial-gradient(
               90% 120% at 72% 8%,
-              var(--_prompt-layer-mid-tint) 0%,
+              var(--prompt-layer-mid-tint) 0%,
               transparent 60%
             ),
             radial-gradient(
               80% 120% at 86% 72%,
-              var(--_prompt-layer-end-tint) 0%,
+              var(--prompt-layer-end-tint) 0%,
               transparent 58%
             ),
             radial-gradient(
               110% 120% at 34% 88%,
-              var(--_prompt-layer-accent-tint) 0%,
+              var(--prompt-layer-accent-tint) 0%,
               transparent 64%
             ),
             var(--prompt-focus-surface-background, var(--surface-elevated-100));
-          mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
+          mix-blend-mode: var(--prompt-spectrum-blend-mode-hover);
           animation: none;
         }
         :host([effects-off]) .surface::before {
@@ -1158,41 +1162,41 @@ class S extends HTMLElement {
         :host-context([theme="dark"]),
         :host-context(.theme-dark) {
           --prompt-focus-surface-opacity: 0.35;
-          --_prompt-accent-secondary: var(
+          --prompt-accent-secondary-derived: var(
             --prompt-accent-secondary,
-            color-mix(in srgb, var(--_prompt-accent-primary) 64%, var(--grey-1200) 36%)
+            color-mix(in srgb, var(--prompt-accent-primary-derived) 64%, var(--grey-1200) 36%)
           );
-          --_prompt-accent-mid: color-mix(
+          --prompt-accent-mid: color-mix(
             in srgb,
-            var(--_prompt-accent-primary) 56%,
-            var(--_prompt-accent-secondary) 44%
+            var(--prompt-accent-primary-derived) 56%,
+            var(--prompt-accent-secondary-derived) 44%
           );
-          --_prompt-start-tint: color-mix(in srgb, var(--_prompt-color-top-start-source) 22%, transparent 78%);
-          --_prompt-mid-tint: color-mix(in srgb, var(--_prompt-color-top-mid-source) 18%, transparent 82%);
-          --_prompt-end-tint: color-mix(in srgb, var(--_prompt-color-top-end-source) 20%, transparent 80%);
-          --_prompt-accent-tint: color-mix(
+          --prompt-start-tint: color-mix(in srgb, var(--prompt-color-top-start-source) 22%, transparent 78%);
+          --prompt-mid-tint: color-mix(in srgb, var(--prompt-color-top-mid-source) 18%, transparent 82%);
+          --prompt-end-tint: color-mix(in srgb, var(--prompt-color-top-end-source) 20%, transparent 80%);
+          --prompt-accent-tint: color-mix(
             in srgb,
-            var(--_prompt-color-top-accent-source) 16%,
+            var(--prompt-color-top-accent-source) 16%,
             transparent 84%
           );
-          --_prompt-border-hover-primary-soft: color-mix(
+          --prompt-border-hover-primary-soft: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 56%,
+            var(--prompt-border-color-hover-primary, var(--prompt-accent-primary-derived)) 56%,
             var(--form-default-border-color-hover) 44%
           );
-          --_prompt-border-hover-primary-strong: color-mix(
+          --prompt-border-hover-primary-strong: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 78%,
+            var(--prompt-border-color-hover-primary, var(--prompt-accent-primary-derived)) 78%,
             var(--form-default-border-color-hover) 22%
           );
-          --_prompt-border-hover-secondary-soft: color-mix(
+          --prompt-border-hover-secondary-soft: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 56%,
+            var(--prompt-border-color-hover-secondary, var(--prompt-accent-secondary-derived)) 56%,
             var(--form-default-border-color-hover) 44%
           );
-          --_prompt-border-hover-secondary-strong: color-mix(
+          --prompt-border-hover-secondary-strong: color-mix(
             in srgb,
-            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 78%,
+            var(--prompt-border-color-hover-secondary, var(--prompt-accent-secondary-derived)) 78%,
             var(--form-default-border-color-hover) 22%
           );
           --prompt-hover-border-pulse-start: color-mix(
@@ -1212,8 +1216,8 @@ class S extends HTMLElement {
           --prompt-focus-after-opacity: 0.3;
           --prompt-focus-after-opacity-min: 0;
           --prompt-focus-after-opacity-max: 0.3;
-          --_prompt-spectrum-blend-mode-hover: soft-light;
-          --_prompt-spectrum-blend-mode-focus: normal;
+          --prompt-spectrum-blend-mode-hover: soft-light;
+          --prompt-spectrum-blend-mode-focus: normal;
         }
         :host-context([data-theme="light"]),
         :host-context([theme="light"]),
@@ -1349,6 +1353,9 @@ class S extends HTMLElement {
         .auto-preview-media-url::part(text-overflow) {
           text-overflow: ellipsis;
         }
+        #promptAutoPreviewCode {
+          --code-background: var(--prompt-preview-code-background);
+        }
         #promptAutoPreviewCode[hidden],
         #promptAutoPreviewImage[hidden],
         #promptAutoPreviewMediaUrl[hidden],

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

@@ -75,7 +75,7 @@ class d extends HTMLElement {
     const a = () => {
       var i, o;
       const t = this.getAttribute("size") || "medium", e = {
-        "x-small": "x-small",
+        "x-small": "xx-small",
         small: "small",
         medium: "small",
         large: "medium"

package/dist/esm/components/mui-stack/hstack/index.js

@@ -1,26 +1,50 @@
-import { getPartMap as e } from "../../../utils/part-map/index.js";
-class r extends HTMLElement {
+import { getPartMap as a } from "../../../utils/part-map/index.js";
+class h extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "aligny", "alignx"];
+    return ["space", "aligny", "alignx", "padding", "height", "width", "viewport", "fill"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.styles = /*css*/
     `
       :host {
         display: block;
+        --stack-height: auto;
+        --stack-width: auto;
+        height: var(--stack-height);
+        width: var(--stack-width);
+      }
+      :host([fill]) {
+        --stack-height: 100%;
+        --stack-width: 100%;
+      }
+      :host([viewport]) {
+        --stack-height: 100dvh;
       }
       slot {
         display: flex;
+        box-sizing: border-box;
+        height: auto;
+        width: auto;
         gap: var(--space);
+        padding: var(--padding);
         align-items: var(--alignY);
         justify-content: var(--alignX);
       }
+      :host([height]) slot,
+      :host([viewport]) slot,
+      :host([fill]) slot {
+        height: 100%;
+      }
+      :host([width]) slot,
+      :host([fill]) slot {
+        width: 100%;
+      }
     `;
   }
   async connectedCallback() {
     if (!this.shadowRoot) return;
-    await this.waitForPartMap();
-    const t = e("spacing", "layout", "visual");
+    await this.waitForPartMap(), this.syncDimensions();
+    const t = a("spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>${this.styles}</style>
@@ -28,25 +52,30 @@ class r extends HTMLElement {
         part="${t}" 
         style="
           --space: ${this.getAttribute("space") || this.space};
+          --padding: ${this.getAttribute("padding") || "var(--space-000)"};
           --alignY: ${this.getAttribute("aligny") || this.alignY};
           --alignX: ${this.getAttribute("alignx") || this.alignX};
         ">
       </slot>
     `;
   }
-  attributeChangedCallback(t, s, i) {
-    if (s === i || !this.shadowRoot) return;
-    const a = this.shadowRoot.querySelector("slot");
-    a && (t === "space" && a.style.setProperty("--space", i || this.space), t === "aligny" && a.style.setProperty("--alignY", i || this.alignY), t === "alignx" && a.style.setProperty("--alignX", i || this.alignX));
+  attributeChangedCallback(t, i, s) {
+    if (i === s || ((t === "height" || t === "width") && this.syncDimensions(), !this.shadowRoot)) return;
+    const e = this.shadowRoot.querySelector("slot");
+    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX));
+  }
+  syncDimensions() {
+    const t = this.getAttribute("height"), i = this.getAttribute("width");
+    t ? this.style.setProperty("--stack-height", t) : this.style.removeProperty("--stack-height"), i ? this.style.setProperty("--stack-width", i) : this.style.removeProperty("--stack-width");
   }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof e == "function") return t();
-      const s = () => {
-        typeof e == "function" ? t() : requestAnimationFrame(s);
+      if (typeof a == "function") return t();
+      const i = () => {
+        typeof a == "function" ? t() : requestAnimationFrame(i);
       };
-      s();
+      i();
     });
   }
 }
-customElements.get("mui-h-stack") || customElements.define("mui-h-stack", r);
+customElements.get("mui-h-stack") || customElements.define("mui-h-stack", h);

package/dist/esm/components/mui-stack/vstack/index.js

@@ -1,26 +1,50 @@
-import { getPartMap as e } from "../../../utils/part-map/index.js";
-class r extends HTMLElement {
+import { getPartMap as a } from "../../../utils/part-map/index.js";
+class h extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "alignx", "aligny"];
+    return ["space", "alignx", "aligny", "padding", "height", "width", "viewport", "fill"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignX = "normal", this.alignY = "normal", this.styles = /*css*/
     `
       :host {
         display: block;
+        --stack-height: auto;
+        --stack-width: auto;
+        height: var(--stack-height);
+        width: var(--stack-width);
+      }
+      :host([fill]) {
+        --stack-height: 100%;
+        --stack-width: 100%;
+      }
+      :host([viewport]) {
+        --stack-height: 100dvh;
       }
       slot {
         display: grid;
+        box-sizing: border-box;
+        height: auto;
+        width: auto;
         gap: var(--space);
+        padding: var(--padding);
         justify-items: var(--alignX);
         align-items: var(--alignY);
       }
+      :host([height]) slot,
+      :host([viewport]) slot,
+      :host([fill]) slot {
+        height: 100%;
+      }
+      :host([width]) slot,
+      :host([fill]) slot {
+        width: 100%;
+      }
     `;
   }
   async connectedCallback() {
     if (!this.shadowRoot) return;
-    await this.waitForPartMap();
-    const t = e("spacing", "layout", "visual");
+    await this.waitForPartMap(), this.syncDimensions();
+    const t = a("spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>${this.styles}</style>
@@ -28,25 +52,30 @@ class r extends HTMLElement {
         part="${t}" 
         style="
           --space: ${this.getAttribute("space") || this.space};
+          --padding: ${this.getAttribute("padding") || "var(--space-000)"};
           --alignX: ${this.getAttribute("alignx") || this.alignX};
           --alignY: ${this.getAttribute("aligny") || this.alignY};
         ">
       </slot>
     `;
   }
-  attributeChangedCallback(t, s, i) {
-    if (s === i || !this.shadowRoot) return;
-    const a = this.shadowRoot.querySelector("slot");
-    a && (t === "space" && a.style.setProperty("--space", i || this.space), t === "alignx" && a.style.setProperty("--alignX", i || this.alignX), t === "aligny" && a.style.setProperty("--alignY", i || this.alignY));
+  attributeChangedCallback(t, i, s) {
+    if (i === s || ((t === "height" || t === "width") && this.syncDimensions(), !this.shadowRoot)) return;
+    const e = this.shadowRoot.querySelector("slot");
+    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY));
+  }
+  syncDimensions() {
+    const t = this.getAttribute("height"), i = this.getAttribute("width");
+    t ? this.style.setProperty("--stack-height", t) : this.style.removeProperty("--stack-height"), i ? this.style.setProperty("--stack-width", i) : this.style.removeProperty("--stack-width");
   }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof e == "function") return t();
-      const s = () => {
-        typeof e == "function" ? t() : requestAnimationFrame(s);
+      if (typeof a == "function") return t();
+      const i = () => {
+        typeof a == "function" ? t() : requestAnimationFrame(i);
       };
-      s();
+      i();
     });
   }
 }
-customElements.get("mui-v-stack") || customElements.define("mui-v-stack", r);
+customElements.get("mui-v-stack") || customElements.define("mui-v-stack", h);