@muibook/components 10.0.1 → 11.0.1

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

@@ -0,0 +1,114 @@
+import "../mui-body/index.js";
+class u extends HTMLElement {
+  constructor() {
+    super(), this.resizeObserver = null, this.avatarSlotEl = null, this.contentSlotEl = null, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["size", "variant", "density"];
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("density") || this.setAttribute("density", "default"), this.render(), this.bindLayoutSync(), this.bindSlotSync();
+  }
+  attributeChangedCallback(t, e, s) {
+    e !== s && (this.render(), this.bindLayoutSync(), this.bindSlotSync());
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = null, this.avatarSlotEl = null, this.contentSlotEl = null;
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("size") || "medium", e = {
+      "x-small": { gap: "var(--space-100)", padding: "var(--space-200)" },
+      small: { gap: "var(--space-200)", padding: "var(--space-300)" },
+      medium: { gap: "var(--space-300)", padding: "var(--space-400)" },
+      large: { gap: "var(--space-400)", padding: "var(--space-500)" }
+    }, s = e[t] || e.medium;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+        .bubble {
+          display: grid;
+          grid-template-columns: auto 1fr;
+          align-items: center;
+          gap: ${s.gap};
+          width: 100%;
+          box-sizing: border-box;
+          padding: ${s.padding};
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--radius-300);
+          background: var(--surface-elevated-100);
+        }
+        :host([density="compact"]) .bubble {
+          padding: var(--stroke-size-100);
+          border-top-left-radius: var(--avatar-medium);
+          border-bottom-left-radius: var(--avatar-medium);
+        }
+        :host([variant="ghost"]) .bubble {
+          border: none;
+          background: transparent;
+        }
+        .content {
+          min-width: 0;
+        }
+        :host([multi-line]) .bubble {
+          align-items: start;
+        }
+        :host([multi-line]) .content {
+          margin-top: var(--space-050);
+        }
+      </style>
+
+      <div class="bubble">
+        <slot name="avatar" id="avatarSlot"></slot>
+        <div class="content">
+          <slot id="contentSlot">
+            <mui-body size="small"></mui-body>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+  bindSlotSync() {
+    if (!this.shadowRoot || (this.avatarSlotEl = this.shadowRoot.querySelector("#avatarSlot"), this.contentSlotEl = this.shadowRoot.querySelector("#contentSlot"), !this.avatarSlotEl || !this.contentSlotEl)) return;
+    const t = () => {
+      var r, o;
+      const e = this.getAttribute("size") || "medium", s = {
+        "x-small": "x-small",
+        small: "small",
+        medium: "small",
+        large: "medium"
+      }, i = {
+        "x-small": "x-small",
+        small: "small",
+        medium: "small",
+        large: "medium"
+      }, d = s[e] || "small", l = i[e] || "small";
+      (((r = this.avatarSlotEl) == null ? void 0 : r.assignedElements({ flatten: !0 })) || []).forEach((a) => {
+        a.tagName.toLowerCase() === "mui-avatar" && a.setAttribute("size", d);
+      }), (((o = this.contentSlotEl) == null ? void 0 : o.assignedElements({ flatten: !0 })) || []).forEach((a) => {
+        a.tagName.toLowerCase() === "mui-body" && a.setAttribute("size", l);
+      });
+    };
+    this.avatarSlotEl.addEventListener("slotchange", t), this.contentSlotEl.addEventListener("slotchange", t), t();
+  }
+  bindLayoutSync() {
+    var i;
+    if (!this.shadowRoot) return;
+    (i = this.resizeObserver) == null || i.disconnect(), this.resizeObserver = null;
+    const t = this.shadowRoot.querySelector(".content"), e = this.shadowRoot.querySelector("#contentSlot");
+    if (!t || !e) return;
+    const s = () => {
+      requestAnimationFrame(() => {
+        const l = e.assignedElements({ flatten: !0 })[0] || t, c = getComputedStyle(l).lineHeight || "0", n = Number.parseFloat(c), r = Number.isFinite(n) && n > 0 ? n : 20, o = Math.round(t.getBoundingClientRect().height / r);
+        this.toggleAttribute("multi-line", o > 1);
+      });
+    };
+    e.addEventListener("slotchange", s), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => s()), this.resizeObserver.observe(t), this.resizeObserver.observe(this)), s();
+  }
+}
+customElements.get("mui-prompt-message") || customElements.define("mui-prompt-message", u);

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

@@ -0,0 +1,497 @@
+import "../mui-badge/index.js";
+import "../mui-body/index.js";
+import "../mui-button/index.js";
+import "../mui-icons/close/index.js";
+import "../mui-icons/play-rectangle/index.js";
+import "../mui-icons/music-microphone/index.js";
+import "../mui-stack/vstack/index.js";
+import { getPartMap as E } from "../../utils/part-map/index.js";
+class C extends HTMLElement {
+  constructor() {
+    super(), this.onDismiss = (e) => {
+      e.preventDefault(), e.stopPropagation(), this.dispatchEvent(
+        new CustomEvent("dismiss", {
+          detail: {
+            id: this.id || "",
+            value: this.getAttribute("value") || "",
+            label: this.getAttribute("label") || "Pasted Content",
+            badge: this.getAttribute("badge") || this.getBadge(this.getAttribute("value") || ""),
+            bgImage: this.getAttribute("bg-image") || "",
+            imageTint: this.getAttribute("image-tint") || ""
+          },
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0
+        })
+      ) && this.remove();
+    }, this.onOpenPreview = (e) => {
+      e.preventDefault(), this.dispatchEvent(
+        new CustomEvent("prompt-preview-open", {
+          detail: {
+            id: this.id || "",
+            value: this.getAttribute("value") || "",
+            label: this.getAttribute("label") || "Pasted Content",
+            badge: this.getAttribute("badge") || this.getBadge(this.getAttribute("value") || ""),
+            bgImage: this.getAttribute("bg-image") || "",
+            imageTint: this.getAttribute("image-tint") || ""
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.onKeyOpenPreview = (e) => {
+      e.key !== "Enter" && e.key !== " " || e.composedPath().some((s) => {
+        var r;
+        return s instanceof HTMLElement && ((r = s.classList) == null ? void 0 : r.contains("dismiss-action"));
+      }) || (e.preventDefault(), this.onOpenPreview(e));
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "badge",
+      "label",
+      "accent",
+      "bg-image",
+      "image-tint",
+      "inverted",
+      "badge-only",
+      "show-text",
+      "animated",
+      "animation-mode",
+      "variant",
+      "clickable"
+    ];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(e) {
+    this.setAttribute("value", e ?? "");
+  }
+  get badge() {
+    return this.getAttribute("badge") || "";
+  }
+  set badge(e) {
+    e == null || e === "" ? this.removeAttribute("badge") : this.setAttribute("badge", e);
+  }
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  set label(e) {
+    e == null || e === "" ? this.removeAttribute("label") : this.setAttribute("label", e);
+  }
+  get accent() {
+    return this.getAttribute("accent") || "";
+  }
+  set accent(e) {
+    e == null || e === "" ? this.removeAttribute("accent") : this.setAttribute("accent", e);
+  }
+  get bgImage() {
+    return this.getAttribute("bg-image") || "";
+  }
+  set bgImage(e) {
+    e == null || e === "" ? this.removeAttribute("bg-image") : this.setAttribute("bg-image", e);
+  }
+  get imageTint() {
+    return this.getAttribute("image-tint") || "";
+  }
+  set imageTint(e) {
+    e == null || e === "" ? this.removeAttribute("image-tint") : this.setAttribute("image-tint", e);
+  }
+  connectedCallback() {
+    this.applyAnimationDelayOffset(), this.render();
+  }
+  attributeChangedCallback(e, a, t) {
+    a !== t && this.render();
+  }
+  getBadge(e) {
+    const a = this.getAttribute("badge");
+    if (a) return a;
+    const t = e.trim(), s = t.match(/https?:\/\/[^\s]+/i);
+    if (s)
+      try {
+        const r = new URL(s[0]), i = r.hostname.toLowerCase(), n = r.pathname.toLowerCase();
+        if (/\.(png|jpe?g|gif|webp|svg|avif|bmp)$/.test(n)) return "IMG";
+        if (i === "youtu.be" || i.endsWith("youtube.com") || i.endsWith("youtube-nocookie.com") || i.endsWith("vimeo.com") || i.endsWith("twitch.tv")) return "VIDEO";
+        if (i.endsWith("soundcloud.com") || i.endsWith("spotify.com") || i.endsWith("bandcamp.com") || i.endsWith("mixcloud.com"))
+          return "MUSIC";
+        if (/\.(mp4|webm|mov|m4v|ogv)$/.test(n)) return "VIDEO";
+        if (/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(n)) return "MUSIC";
+      } catch {
+      }
+    return t.startsWith("{") || t.startsWith("[") ? "JSON" : /\{[\s\S]*\}/.test(t) && /:/.test(t) ? "CSS" : "Insightful";
+  }
+  getAccessibleSummary(e, a) {
+    const t = this.getAttribute("aria-label");
+    if (t) return t;
+    const s = this.getAttribute("label") || "Pasted content", r = e.trim(), i = r ? r.slice(0, 120) : "No preview text";
+    return `${s}. Type: ${a}. ${i}`;
+  }
+  extractUrl(e) {
+    const a = e.trim().match(/https?:\/\/[^\s]+/i);
+    if (!a) return null;
+    try {
+      return new URL(a[0]).toString();
+    } catch {
+      return null;
+    }
+  }
+  isImageUrl(e) {
+    try {
+      const a = new URL(e);
+      return /\.(png|jpe?g|gif|webp|svg|avif|bmp)$/i.test(a.pathname);
+    } catch {
+      return !1;
+    }
+  }
+  escapeHtml(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  applyAnimationDelayOffset() {
+    const e = this.parentElement;
+    if (!e) return;
+    const a = Array.from(e.querySelectorAll("mui-prompt-preview")), t = Math.max(0, a.indexOf(this));
+    this.style.setProperty("--prompt-preview-sheen-delay", `${t * 220}ms`);
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.getAttribute("value") || "", a = e.trim() || "Paste long content to preview it here.", t = this.getBadge(e), s = E("text", "spacing", "layout", "visual"), r = this.getAttribute("accent") || "var(--prompt-preview-accent, var(--surface-elevated-200))", i = this.getAttribute("bg-image") || "", n = this.getAttribute("image-tint") || r, m = i ? n : r, b = this.hasAttribute("inverted"), u = this.hasAttribute("badge-only") ? !1 : !i || this.hasAttribute("show-text"), d = (this.getAttribute("animation-mode") || "loop").toLowerCase(), v = (this.getAttribute("variant") || "").toLowerCase(), h = (this.hasAttribute("animated") || !!i) && d !== "off", g = d === "once" ? "1" : "infinite", c = v === "overlay" || !!i, w = c ? "overlay" : "neutral", f = c ? "overlay" : "secondary", x = `dismiss-action${c ? "" : " dismiss-secondary"}`, y = this.hasAttribute("clickable"), o = this.extractUrl(e), A = !!(o && this.isImageUrl(o)), k = !!(o && !i && (t === "VIDEO" || t === "MUSIC")), $ = o ? this.escapeHtml(o) : "", z = i.replace(/"/g, "&quot;"), I = i ? `
+            linear-gradient(
+              180deg,
+              color-mix(in srgb, ${n} 42%, transparent 58%) 0%,
+              color-mix(in srgb, ${n} 22%, transparent 78%) 30%,
+              color-mix(in srgb, #000 24%, transparent 76%) 100%
+            ),
+            url("${z}") center / cover no-repeat
+      ` : `
+            radial-gradient(
+              circle at 12% 18%,
+              color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-100), transparent) 0 14%,
+              transparent 46%
+            ),
+            radial-gradient(
+              circle at 82% 22%,
+              color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-200), transparent) 0 11%,
+              transparent 42%
+            ),
+            radial-gradient(
+              circle at 34% 76%,
+              color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-300), transparent) 0 12%,
+              transparent 44%
+            ),
+            radial-gradient(
+              circle at 74% 70%,
+              color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-400), transparent) 0 9%,
+              transparent 40%
+            ),
+            linear-gradient(
+              180deg,
+              color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-400), transparent) 0%,
+              color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-500), transparent) 30%,
+              transparent 100%
+            )
+      `, P = `box${i ? " has-image" : ""}${c ? " variant-overlay" : ""}${b ? " inverted" : ""}`;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: min(100%, calc(var(--space-800) * 2));
+        }
+        :host([clickable]) {
+          cursor: pointer;
+        }
+        :host([clickable]:focus-visible) {
+          outline: none;
+        }
+        :host([clickable]:focus-visible) .box {
+          outline: var(--outline-thick);
+          outline-width: var(--stroke-size-200);
+          outline-offset: 0;
+        }
+        .box {
+          position: relative;
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--radius-200);
+          box-shadow:
+            var(--shadow-200),
+            0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20),
+            inset 0 0 0 1px color-mix(in srgb, ${m} 12%, transparent 88%),
+            inset 0 calc(var(--space-050) * -1) var(--space-300) color-mix(in srgb, #000 12%, transparent 88%);
+          filter: var(
+            --prompt-preview-box-drop-shadow,
+            drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20))
+          );
+          background: ${I};
+          box-sizing: border-box;
+          width: 100%;
+          min-height: calc(var(--space-600) * 2);
+          max-height: calc(var(--space-600) * 2);
+          overflow: hidden;
+          padding: var(--space-200);
+          display: flex;
+          flex-direction: column;
+          --prompt-preview-text-color: var(--text-color);
+          --prompt-preview-top-shade-start-active: var(--prompt-preview-top-shade-start);
+          --prompt-preview-top-shade-end-active: var(--prompt-preview-top-shade-end);
+          color: var(--prompt-preview-text-color);
+        }
+        .box.animated {
+          overflow: hidden;
+        }
+        .box.variant-overlay,
+        .box.has-image,
+        .box.inverted {
+          --prompt-preview-text-color: var(--white);
+          --prompt-preview-top-shade-start-active: var(--prompt-preview-top-shade-start-overlay);
+          --prompt-preview-top-shade-end-active: var(--prompt-preview-top-shade-end-overlay);
+        }
+        .top-shade {
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
+          height: var(--prompt-preview-top-shade-height);
+          pointer-events: none;
+          z-index: 1;
+          background: linear-gradient(
+            180deg,
+            var(--prompt-preview-top-shade-start-active) 0%,
+            var(--prompt-preview-top-shade-end-active) 100%
+          );
+        }
+        .box::before,
+        .box::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          pointer-events: none;
+          z-index: 0;
+        }
+        .box::before {
+          background: radial-gradient(
+            120% 80% at 50% -10%,
+            color-mix(in srgb, ${m} 32%, transparent 68%) 0%,
+            transparent 70%
+          );
+          filter: blur(var(--space-050));
+        }
+        .box::after {
+          background: radial-gradient(
+            120% 90% at 50% 110%,
+            color-mix(in srgb, #000 14%, transparent 86%) 0%,
+            transparent 72%
+          );
+          filter: blur(var(--space-100));
+        }
+        .box.animated::before {
+          animation: previewPulse 2400ms ease-in-out var(--prompt-preview-iterations);
+        }
+        .box.animated::after {
+          animation: previewPulse 3000ms ease-in-out var(--prompt-preview-iterations) reverse;
+        }
+        .box.animated .snippet {
+          animation: previewSnippetPulse 2600ms ease-in-out var(--prompt-preview-iterations);
+        }
+        .box.animated:not(.has-image)::before,
+        .box.animated:not(.has-image)::after {
+          opacity: 0.28;
+        }
+        .box.animated:not(.has-image) .snippet {
+          animation: none;
+        }
+        .scanline {
+          display: none;
+        }
+        .box.animated .scanline {
+          display: block;
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          border-radius: inherit;
+          z-index: 2;
+          background: linear-gradient(
+            100deg,
+            transparent 0%,
+            color-mix(in srgb, var(--white-opacity-70) 35%, transparent 65%) 45%,
+            transparent 100%
+          );
+          transform: translateX(-120%);
+          animation: previewScanline 3600ms cubic-bezier(0.22, 1, 0.36, 1) var(--prompt-preview-iterations);
+          animation-delay: var(--prompt-preview-sheen-delay, 0ms);
+          opacity: 0.16;
+        }
+        .box.animated:not(.has-image) .scanline {
+          opacity: 0.08;
+          filter: blur(var(--space-025));
+          animation-duration: 4200ms;
+          background: linear-gradient(
+            100deg,
+            transparent 0%,
+            color-mix(in srgb, var(--white-opacity-30) 35%, transparent 65%) 45%,
+            transparent 100%
+          );
+        }
+        @keyframes previewScanline {
+          0% { transform: translateX(-120%); opacity: 0; }
+          10% { opacity: 0.62; }
+          65% { opacity: 0.62; }
+          100% { transform: translateX(120%); opacity: 0; }
+        }
+        @keyframes previewPulse {
+          0%, 100% { opacity: 0.78; }
+          50% { opacity: 1; }
+        }
+        @keyframes previewSnippetPulse {
+          0%, 100% { opacity: 0.9; }
+          50% { opacity: 1; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .box.animated::before,
+          .box.animated::after,
+          .box.animated .snippet,
+          .box.animated .scanline {
+            animation: none;
+          }
+        }
+        mui-badge {
+          position: absolute;
+          z-index: 3;
+          top: calc(var(--space-100) + var(--stroke-size-100));
+          left: calc(var(--space-100) + var(--stroke-size-100));
+
+        }
+        .dismiss-action {
+          position: absolute;
+          top: var(--space-100);
+          right: var(--space-100);
+          z-index: 3;
+          opacity: 0;
+          pointer-events: none;
+          transform: translateY(calc(var(--stroke-size-100) * -1));
+          transition: opacity var(--speed-200) ease, transform var(--speed-200) ease;
+        }
+        :host(:hover) .dismiss-action,
+        :host(:focus-within) .dismiss-action {
+          opacity: 1;
+          pointer-events: auto;
+          transform: translateY(0);
+        }
+        .dismiss-secondary::part(background) {
+          background: var(--prompt-preview-dismiss-secondary-background);
+        }
+        .dismiss-secondary:hover::part(background),
+        .dismiss-secondary:focus-visible::part(background) {
+          background: var(--prompt-preview-dismiss-secondary-background-hover);
+        }
+        .dismiss-secondary::part(border) {
+          border: var(--prompt-preview-dismiss-secondary-border);
+        }
+        .dismiss-secondary:hover::part(border),
+        .dismiss-secondary:focus-visible::part(border) {
+          border: var(--prompt-preview-dismiss-secondary-border-hover);
+        }
+        .dismiss-action::part(outline) {
+          outline-width: var(--stroke-size-200);
+        }
+        .box.variant-overlay mui-badge,
+        .box.has-image mui-badge,
+        .box.inverted mui-badge {
+          box-shadow:
+            0 var(--space-025) var(--space-100) var(--black-opacity-60);
+          border-radius: var(--badge-radius);
+          -webkit-backdrop-filter: blur(var(--space-050));
+          backdrop-filter: blur(var(--space-050));
+        }
+
+        .name,
+        .snippet {
+          flex: 1 1 auto;
+          min-height: 0;
+          min-width: 0;
+          position: relative;
+          z-index: 1;
+        }
+
+        .name::part(font-size),
+        .snippet::part(font-size) {
+          font-size: calc(var(--font-size-15) / 2);
+          line-height: var(--line-height-100);
+        }
+
+        .name {
+          max-width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          color: var(--prompt-preview-text-color);
+        }
+
+        .snippet {
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          line-clamp: 3;
+          white-space: normal;
+          overflow-wrap: anywhere;
+          word-break: break-word;
+          color: color-mix(in srgb, var(--prompt-preview-text-color) 84%, transparent 16%);
+        }
+        .snippet-media-only {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          min-height: calc(var(--space-500) + var(--space-300));
+        }
+        .snippet-media-icon {
+          flex: 0 0 auto;
+          opacity: 0.5;
+        }
+        .snippet-image {
+          display: block;
+          width: 100%;
+          height: 100%;
+          max-height: calc(var(--space-600) + var(--space-200));
+          object-fit: cover;
+          border-radius: var(--radius-100);
+        }
+
+        .inner {
+          margin-top: var(--space-500);
+          min-width: 0;
+          width: 100%;
+        }
+        .inner.media-inline {
+          margin-top: var(--space-300);
+        }
+
+
+        .box.inverted .snippet {
+          color: color-mix(in srgb, var(--prompt-preview-text-color) 88%, transparent 12%);
+        }
+      </style>
+
+      <div class="${P}${h ? " animated" : ""}" part="${s}" style="--prompt-preview-iterations: ${g};">
+        <span class="top-shade"></span>
+        <span class="scanline"></span>
+        <mui-button class="${x}" icon-only size="xx-small" variant="${f}" aria-label="Dismiss preview">
+          <mui-icon-close size="xx-small"></mui-icon-close>
+        </mui-button>
+        <mui-badge variant="${w}" size="x-small">${t}</mui-badge>
+        <mui-v-stack class="inner${k ? " media-inline" : ""}" space="var(--space-025)" alignX="stretch">
+          ${u ? A && !i ? `<img class="snippet-image" src="${$}" alt="${this.escapeHtml(t)} preview image" />` : `<mui-body class="snippet" size="x-small" variant="optional">${o ? `${t === "VIDEO" ? '<span class="snippet-media-only"><mui-icon-play-rectangle class="snippet-media-icon" size="medium"></mui-icon-play-rectangle></span>' : t === "MUSIC" ? '<span class="snippet-media-only"><mui-icon-music-microphone class="snippet-media-icon" size="medium"></mui-icon-music-microphone></span>' : this.escapeHtml(a.slice(0, 260))}` : this.escapeHtml(a.slice(0, 260))}</mui-body>` : ""}
+        </mui-v-stack>
+      </div>
+    `;
+    const l = this.shadowRoot.querySelector(".dismiss-action");
+    l == null || l.addEventListener("click", this.onDismiss);
+    const p = this.shadowRoot.querySelector(".box");
+    p == null || p.removeEventListener("click", this.onOpenPreview), this.removeEventListener("keydown", this.onKeyOpenPreview), y ? (this.setAttribute("tabindex", this.getAttribute("tabindex") || "0"), this.setAttribute("role", this.getAttribute("role") || "button"), this.setAttribute("aria-haspopup", this.getAttribute("aria-haspopup") || "dialog"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", this.getAccessibleSummary(e, t)), p == null || p.addEventListener("click", this.onOpenPreview), this.addEventListener("keydown", this.onKeyOpenPreview)) : (this.getAttribute("tabindex") === "0" && this.removeAttribute("tabindex"), this.getAttribute("role") === "button" && this.removeAttribute("role"), this.getAttribute("aria-haspopup") === "dialog" && this.removeAttribute("aria-haspopup"));
+  }
+}
+customElements.get("mui-prompt-preview") || customElements.define("mui-prompt-preview", C);

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

@@ -0,0 +1,48 @@
+class r extends HTMLElement {
+  constructor() {
+    super(), this.observer = null, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["mode"];
+  }
+  connectedCallback() {
+    this.hasAttribute("mode") || this.setAttribute("mode", "icon"), this.observer = new MutationObserver(() => this.syncMode()), this.observer.observe(this, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["hidden"] }), this.render();
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.observer) == null || t.disconnect();
+  }
+  attributeChangedCallback(t, s, i) {
+    t !== "mode" || s === i || this.syncMode();
+  }
+  normalizeMode() {
+    return this.getAttribute("mode") === "chip" ? "chip" : "icon";
+  }
+  syncMode() {
+    const t = this.normalizeMode(), s = Array.from(this.querySelectorAll('[slot="toggle"], [context-toggle]')), i = Array.from(
+      this.querySelectorAll(
+        '[slot="active"], [context-active], [context-close], [slot="chip"], [context-chip], [slot="spinner"], [context-spinner]'
+      )
+    );
+    s.forEach((e) => {
+      const o = t === "icon";
+      e.toggleAttribute("hidden", !o), e.style.display = o ? "" : "none";
+    }), i.forEach((e) => {
+      const o = t === "chip";
+      e.toggleAttribute("hidden", !o), e.style.display = o ? "" : "none";
+    });
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+        }
+      </style>
+      <slot></slot>
+    `, this.syncMode());
+  }
+}
+customElements.get("mui-prompt-toggle") || customElements.define("mui-prompt-toggle", r);