@muibook/components 10.0.1 → 11.0.0

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

@@ -9,66 +9,66 @@ class u extends HTMLElement {
   async connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), await this.waitForPartMap(), this.render(), requestAnimationFrame(() => this.updateSlotState());
   }
-  attributeChangedCallback(a, o, e) {
+  attributeChangedCallback(t, o, e) {
     if (this.shadowRoot) {
-      if (a === "href") {
-        const t = this.shadowRoot.querySelector("a");
-        t && t.setAttribute("href", e || "#");
-      }
-      if (a === "target") {
-        const t = this.shadowRoot.querySelector("a");
-        t && t.setAttribute("target", e || "_self");
-      }
-      if (a === "disabled") {
-        const t = this.shadowRoot.querySelector("a");
-        t && (e !== null ? (t.setAttribute("aria-disabled", "true"), t.setAttribute("href", "javascript:void(0)")) : (t.setAttribute("aria-disabled", "false"), t.setAttribute("href", this.getAttribute("href") || "#")));
-      }
-      if (a === "download") {
-        const t = this.shadowRoot.querySelector("a");
-        if (!t) return;
-        e !== null ? t.setAttribute("download", e === "" ? "" : e) : t.removeAttribute("download");
-      }
-      a === "size" && o !== e && this.shadowRoot && requestAnimationFrame(() => {
-        const t = this.shadowRoot;
-        if (!t) return;
-        const d = [
-          t.querySelector("slot:not([name])"),
-          t.querySelector('slot[name="before"]'),
-          t.querySelector('slot[name="after"]')
+      if (t === "href") {
+        const a = this.shadowRoot.querySelector("a");
+        a && a.setAttribute("href", e || "#");
+      }
+      if (t === "target") {
+        const a = this.shadowRoot.querySelector("a");
+        a && a.setAttribute("target", e || "_self");
+      }
+      if (t === "disabled") {
+        const a = this.shadowRoot.querySelector("a");
+        a && (e !== null ? (a.setAttribute("aria-disabled", "true"), a.setAttribute("href", "javascript:void(0)")) : (a.setAttribute("aria-disabled", "false"), a.setAttribute("href", this.getAttribute("href") || "#")));
+      }
+      if (t === "download") {
+        const a = this.shadowRoot.querySelector("a");
+        if (!a) return;
+        e !== null ? a.setAttribute("download", e === "" ? "" : e) : a.removeAttribute("download");
+      }
+      t === "size" && o !== e && this.shadowRoot && requestAnimationFrame(() => {
+        const a = this.shadowRoot;
+        if (!a) return;
+        const n = [
+          a.querySelector("slot:not([name])"),
+          a.querySelector('slot[name="before"]'),
+          a.querySelector('slot[name="after"]')
         ], s = this.hasAttribute("icon-only");
-        d.forEach((r) => {
-          if (r) {
-            const i = r.assignedNodes({ flatten: !0 });
-            this.updateIconSizes(i, s), this.updateAvatarSizes(i);
+        n.forEach((i) => {
+          if (i) {
+            const r = i.assignedNodes({ flatten: !0 });
+            this.updateIconSizes(r, s), this.updateAvatarSizes(r), this.updateBadgeSizes(r);
           }
         });
       });
     }
   }
   updateSlotState() {
-    const a = this.shadowRoot, o = a.querySelector("slot:not([name])"), e = a.querySelector('slot[name="before"]'), t = a.querySelector('slot[name="after"]'), d = (l) => !!l && l.assignedNodes({ flatten: !0 }).some(
-      (n) => {
+    const t = this.shadowRoot, o = t.querySelector("slot:not([name])"), e = t.querySelector('slot[name="before"]'), a = t.querySelector('slot[name="after"]'), n = (d) => !!d && d.assignedNodes({ flatten: !0 }).some(
+      (l) => {
         var c;
-        return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((c = n.textContent) != null && c.trim());
+        return l.nodeType === Node.ELEMENT_NODE || l.nodeType === Node.TEXT_NODE && !!((c = l.textContent) != null && c.trim());
       }
-    ), s = d(e), r = d(t);
-    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", r);
-    const i = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], v = i.length > 0 && i.every(
-      (l) => {
-        var n;
-        return l.nodeType === Node.ELEMENT_NODE ? l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "svg" : !((n = l.textContent) != null && n.trim());
+    ), s = n(e), i = n(a);
+    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", i);
+    const r = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], v = r.length > 0 && r.every(
+      (d) => {
+        var l;
+        return d.nodeType === Node.ELEMENT_NODE ? d.classList.contains("mui-icon") || d.tagName.toLowerCase() === "svg" : !((l = d.textContent) != null && l.trim());
       }
     );
-    this.toggleAttribute("icon-only", v), v ? this.updateIconSizes(i, !0) : [e, o, t].forEach((n) => {
-      if (n) {
-        const c = n.assignedNodes({ flatten: !0 });
-        this.updateIconSizes(c, !1), this.updateAvatarSizes(c);
+    this.toggleAttribute("icon-only", v), v ? this.updateIconSizes(r, !0) : [e, o, a].forEach((l) => {
+      if (l) {
+        const c = l.assignedNodes({ flatten: !0 });
+        this.updateIconSizes(c, !1), this.updateAvatarSizes(c), this.updateBadgeSizes(c);
       }
     });
   }
   render() {
     if (!this.shadowRoot) return;
-    const a = h("text", "spacing", "layout", "visual");
+    const t = h("text", "spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
     <style>
@@ -96,6 +96,11 @@ class u extends HTMLElement {
       a, a:before, a:after {box-sizing: border-box;}
       a:focus-visible { outline: var(--outline-thick); }
 
+      :host([size="xx-small"]) a {
+        font-size: var(--font-size-15);
+        line-height: var(--line-height-25);
+      }
+
       :host([size="x-small"]) a {
         font-size: var(--text-font-size-xs);
         line-height: var(--text-line-height-xs);
@@ -127,12 +132,14 @@ class u extends HTMLElement {
       :host([variant="primary"]),
       :host([variant="secondary"]),
       :host([variant="tertiary"]),
+      :host([variant="overlay"]),
       :host([variant="attention"]),
       :host([usage="input"]) { display: inline-block; text-align: center; }
 
       :host([variant="primary"]) a,
       :host([variant="secondary"]) a,
       :host([variant="tertiary"]) a,
+      :host([variant="overlay"]) a,
       :host([variant="attention"]) a,
       :host([usage="input"]) a {
         display: inherit;
@@ -245,6 +252,46 @@ class u extends HTMLElement {
       :host([variant="tertiary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
       :host([variant="tertiary"]) a[aria-disabled="true"] ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
 
+      /* Button Overlay
+      ========================================= */
+      :host([variant="overlay"]) a {
+        background: color-mix(in srgb, var(--action-overlay-background) 85%, transparent);
+        color: var(--action-overlay-text-color);
+        border: var(--action-overlay-border);
+        -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+        backdrop-filter: blur(var(--space-100)) saturate(120%);
+      }
+
+      :host([variant="overlay"]) a:hover {
+        background: color-mix(in srgb, var(--action-overlay-background-hover) 85%, transparent);
+        color: var(--action-overlay-text-color-hover);
+        border: var(--action-overlay-border-hover);
+        -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+        backdrop-filter: blur(var(--space-100)) saturate(120%);
+      }
+
+      :host([variant="overlay"]) a:focus-visible {
+        background: color-mix(in srgb, var(--action-overlay-background-focus) 85%, transparent);
+        color: var(--action-overlay-text-color-focus);
+        border: var(--action-overlay-border-focus);
+        -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+        backdrop-filter: blur(var(--space-100)) saturate(120%);
+      }
+
+      :host([variant="overlay"]) a[aria-disabled="true"] {
+        background: color-mix(in srgb, var(--action-overlay-background-disabled) 85%, transparent);
+        color: var(--action-overlay-text-color-disabled);
+        border: var(--action-overlay-border-disabled);
+        -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+        backdrop-filter: blur(var(--space-100)) saturate(120%);
+        cursor: not-allowed;
+      }
+
+      :host([variant="overlay"]) a ::slotted(.mui-icon) { fill: var(--action-overlay-text-color); }
+      :host([variant="overlay"]) a:hover ::slotted(.mui-icon) { fill: var(--action-overlay-text-color-hover); }
+      :host([variant="overlay"]) a:focus ::slotted(.mui-icon) { fill: var(--action-overlay-text-color-focus); }
+      :host([variant="overlay"]) a[aria-disabled="true"] ::slotted(.mui-icon) { fill: var(--action-overlay-text-color-disabled); }
+
       /* Button Attention
       ========================================= */
       :host([variant="attention"]) a {
@@ -333,6 +380,7 @@ class u extends HTMLElement {
       /* AVATAR */
 
       /* Link - Default */
+      :host([variant="default"][size="xx-small"]) a ::slotted(mui-avatar),
       :host([variant="default"][size="x-small"]) a ::slotted(mui-avatar) {
         margin-right: var(--space-025);
       }
@@ -348,6 +396,7 @@ class u extends HTMLElement {
       }
 
       /* Link Button: Sizes */
+      :host(:not([variant="default"])[size="xx-small"]) a ::slotted(mui-avatar),
       :host(:not([variant="default"])[size="x-small"]) a ::slotted(mui-avatar) {
         margin-right: var(--space-025);
       }
@@ -376,6 +425,30 @@ class u extends HTMLElement {
         --avatar-background-override: var(--action-avatar-background-hover);
       }
 
+      /* Badge Spacing */
+      :host([has-before]) a ::slotted(mui-badge[slot="before"]) {
+        margin-right: var(--space-025);
+      }
+
+      :host([has-after]) a ::slotted(mui-badge[slot="after"]) {
+        margin-left: var(--space-025);
+      }
+
+      :host([size="x-small"][has-before]) a ::slotted(mui-badge[slot="before"]) {
+        margin-right: var(--space-025);
+      }
+
+      :host([size="x-small"][has-after]) a ::slotted(mui-badge[slot="after"]) {
+        margin-left: var(--space-025);
+      }
+
+      :host([size="large"][has-before]) a ::slotted(mui-badge[slot="before"]) {
+        margin-right: var(--space-050);
+      }
+
+      :host([size="large"][has-after]) a ::slotted(mui-badge[slot="after"]) {
+        margin-left: var(--space-050);
+      }
 
 
       /* Before & After Icon
@@ -488,6 +561,18 @@ class u extends HTMLElement {
       /* Size Variants with Before & After Icon padding adjustments                 */
       /* ========================================================================== */
 
+      :host([size="xx-small"][variant]:not([variant="default"])) a,
+      :host([size="xx-small"][variant]:not([variant="default"])) a:hover,
+      :host([size="xx-small"][variant]:not([variant="default"])) a:focus,
+      :host([size="xx-small"][variant]:not([variant="default"])) a[aria-disabled="true"] {
+        font-size: var(--font-size-15);
+        line-height: var(--line-height-25);
+        font-weight: var(--font-weight-semi-bold);
+        padding: var(--space-025) var(--space-100);
+        border-width: var(--stroke-size-100);
+        border-radius: var(--action-radius-x-small);
+      }
+
       :host([size="x-small"][variant]:not([variant="default"])) a,
       :host([size="x-small"][variant]:not([variant="default"])) a:hover,
       :host([size="x-small"][variant]:not([variant="default"])) a:focus,
@@ -522,6 +607,12 @@ class u extends HTMLElement {
       }
 
       /* Icon-only size variants */
+      :host([size="xx-small"][variant]:not([variant="default"])[icon-only]) a {
+        height: calc(var(--action-icon-only-size-x-small) - var(--space-100));
+        width: calc(var(--action-icon-only-size-x-small) - var(--space-100));
+        padding: var(--action-icon-only-padding);
+      }
+
       :host([size="x-small"][variant]:not([variant="default"])[icon-only]) a {
         height: var(--action-icon-only-size-x-small);
         width: var(--action-icon-only-size-x-small);
@@ -546,11 +637,30 @@ class u extends HTMLElement {
         padding: var(--action-icon-only-padding);
       }
 
+      :host([size="xx-small"][variant]:not([variant="default"])[has-after]) a,
+      :host([size="xx-small"][variant]:not([variant="default"])[has-before]) a,
+      :host([size="xx-small"][variant]:not([variant="default"])[has-after][has-before]) a { 
+        gap: var(--space-050);
+      }
+
+      :host([size="xx-small"][variant]:not([variant="default"])[has-after][has-before]) a {
+        padding-right: var(--action-after-slot-padding-x-small);
+        padding-left: var(--action-before-slot-padding-x-small);
+      }
+
+      :host([size="xx-small"][variant]:not([variant="default"])[has-after]) a {
+        padding-right: var(--action-after-slot-padding-x-small);
+      }
+
+      :host([size="xx-small"][variant]:not([variant="default"])[has-before]) a {
+        padding-left: var(--action-before-slot-padding-x-small);
+      }
+
       /* Before & After Icon padding adjustments for x-small */
       :host([size="x-small"][variant]:not([variant="default"])[has-after]) a,
       :host([size="x-small"][variant]:not([variant="default"])[has-before]) a,
       :host([size="x-small"][variant]:not([variant="default"])[has-after][has-before]) a { 
-        gap: var(--space-025);
+        gap: var(--space-050);
       }
 
       :host([size="x-small"][variant]:not([variant="default"])[has-after][has-before]) a {
@@ -570,7 +680,7 @@ class u extends HTMLElement {
       :host([size="small"][variant]:not([variant="default"])[has-after]) a,
       :host([size="small"][variant]:not([variant="default"])[has-before]) a,
       :host([size="small"][variant]:not([variant="default"])[has-after][has-before]) a { 
-        gap: var(--space-050);
+        gap: var(--space-100);
       }
 
       :host([size="small"][variant]:not([variant="default"])[has-after][has-before]) a {
@@ -624,7 +734,7 @@ class u extends HTMLElement {
     </style>
 
     <a
-      part="${a}" 
+      part="${t}" 
       target="${this.getAttribute("target") || "_self"}" 
       href="${this.hasAttribute("disabled") ? "javascript:void(0)" : this.getAttribute("href") || "#"}"
       aria-disabled="${this.hasAttribute("disabled") ? "true" : "false"}"
@@ -637,44 +747,62 @@ class u extends HTMLElement {
     `;
   }
   // Update avatar sizes based on button size
-  updateAvatarSizes(a) {
+  updateAvatarSizes(t) {
     const o = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
+      "xx-small": "x-small",
       "x-small": "x-small",
       small: "x-small",
       medium: "x-small",
       large: "small"
     } : {
+      "xx-small": "x-small",
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
       large: "medium"
     })[o] || "small";
-    a.forEach((r) => {
-      if (r.nodeType === Node.ELEMENT_NODE) {
-        const i = r;
-        i.tagName.toLowerCase() === "mui-avatar" && i.setAttribute("size", s);
+    t.forEach((i) => {
+      if (i.nodeType === Node.ELEMENT_NODE) {
+        const r = i;
+        r.tagName.toLowerCase() === "mui-avatar" && r.setAttribute("size", s);
       }
     });
   }
-  updateIconSizes(a, o) {
-    const e = this.getAttribute("size") || "medium", d = {
+  updateIconSizes(t, o) {
+    const e = this.getAttribute("size") || "medium", n = {
+      "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
       medium: o ? "medium" : "small",
       large: o ? "large" : "medium"
     }[e] || "small";
-    a.forEach((s) => {
+    t.forEach((s) => {
       if (s.nodeType === Node.ELEMENT_NODE) {
-        const r = s, i = r.tagName.toLowerCase();
-        (i === "svg" || r.classList.contains("mui-icon") || i === "mui-icon") && !r.hasAttribute("size") && r.setAttribute("size", d);
+        const i = s, r = i.tagName.toLowerCase();
+        (r === "svg" || i.classList.contains("mui-icon") || r === "mui-icon") && !i.hasAttribute("size") && i.setAttribute("size", n);
+      }
+    });
+  }
+  updateBadgeSizes(t) {
+    const o = this.getAttribute("size") || "medium", a = {
+      "xx-small": "x-small",
+      "x-small": "x-small",
+      small: "small",
+      medium: "medium",
+      large: "large"
+    }[o] || "medium";
+    t.forEach((n) => {
+      if (n.nodeType === Node.ELEMENT_NODE) {
+        const s = n;
+        s.tagName.toLowerCase() === "mui-badge" && s.setAttribute("size", a);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((a) => {
-      if (typeof h == "function") return a();
+    return new Promise((t) => {
+      if (typeof h == "function") return t();
       const o = () => {
-        typeof h == "function" ? a() : requestAnimationFrame(o);
+        typeof h == "function" ? t() : requestAnimationFrame(o);
       };
       o();
     });

package/dist/esm/components/mui-list/item/index.js

@@ -20,6 +20,9 @@ class e extends HTMLElement {
         margin: var(--space-000);
         color: var(--text-color);
       }
+      :host(:not(:last-child)) {
+        margin-bottom: var(--space-025);
+      }
 
       /* Size styles */
 

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

@@ -0,0 +1,149 @@
+import { marked as m } from "../../node_modules/marked/lib/marked.esm/index.js";
+const u = (n) => n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#39;"), p = (n) => {
+  const i = n.split(`
+`);
+  let d = !1, t = !1;
+  const o = [];
+  for (const e of i) {
+    if (e.match(/^--\s*box\s*--$/i)) {
+      t ? (o.push("</div>"), t = !1) : (o.push("<div>"), t = !0);
+      continue;
+    }
+    if (e.match(/^--\s*rule\s*--$/i)) {
+      o.push("<mui-rule></mui-rule>");
+      continue;
+    }
+    const c = e.match(/^--\s*space-(\d{3})\s*--$/i);
+    if (c) {
+      const l = c[1];
+      o.push(`<div style="height:var(--space-${l});"></div>`);
+      continue;
+    }
+    const r = e.match(/^--\s*grid-col-([^-]+(?:-[^-]+)*)\s*--$/);
+    if (r) {
+      if (d)
+        o.push("</div>"), d = !1;
+      else {
+        const l = r[1].split("-").join(" ");
+        o.push(
+          `<div style="display:grid;grid-template-columns:${l};gap:var(--space-300);align-items:start;">`
+        ), d = !0;
+      }
+      continue;
+    }
+    o.push(e);
+  }
+  return d && o.push("</div>"), t && o.push("</div>"), o.join(`
+`);
+}, h = (n) => n.toLowerCase().trim().replace(/<[^>]+>/g, "").replace(/[^\w\s-]/g, "").replace(/\s+/g, "-"), b = (n) => {
+  const { bodySize: i, codeSize: d } = n, t = new m.Renderer(), o = /* @__PURE__ */ new Map();
+  return t.heading = (e, s) => {
+    const a = {
+      1: { size: "2", level: "2" },
+      2: { size: "2", level: "2" },
+      3: { size: "4", level: "4" },
+      4: { size: "5", level: "5" },
+      5: { size: "5", level: "5" },
+      6: { size: "5", level: "5" }
+    }, c = a[s] ?? a[4], r = h(e), l = (o.get(r) ?? 0) + 1;
+    return o.set(r, l), `<mui-heading id="${l > 1 ? `${r}-${l}` : r}" size="${c.size}" level="${c.level}">${e}</mui-heading>`;
+  }, t.paragraph = (e) => `<mui-body size="${i}" weight="regular" variant="default">${e}</mui-body>`, t.link = (e, s, a) => {
+    const c = e ? u(e) : "", r = s ? ` title="${u(s)}"` : "";
+    return `<mui-link href="${c}"${r}>${a}</mui-link>`;
+  }, t.list = (e, s) => `<mui-list size="${i}" as="${s ? "ol" : "ul"}">${e}</mui-list>`, t.listitem = (e) => `<mui-list-item size="${i}">${e}</mui-list-item>`, t.hr = () => "<mui-rule></mui-rule>", t.blockquote = (e) => `<mui-quote>${e}</mui-quote>`, t.codespan = (e) => `<span class="md-inline-code">${u(e)}</span>`, t.code = (e) => `<div class="md-code-block">
+      <mui-button class="md-code-copy" size="x-small" variant="tertiary" data-copy-code>Copy</mui-button>
+      <mui-code size="${d}" scrollable>${u(e)}</mui-code>
+    </div>`, t.image = (e, s, a) => {
+    const c = e ? u(e) : "", r = a ? u(a) : "", l = s ? ` title="${u(s)}"` : "";
+    return `<mui-image src="${c}" alt="${r}"${l}></mui-image>`;
+  }, t.table = (e, s) => `<mui-card class="md-table-card">
+      <mui-card-body condensed>
+        <div class="md-table-scroll">
+          <mui-table class="md-table">
+            <mui-row-group heading>${e}</mui-row-group>
+            <mui-row-group>${s}</mui-row-group>
+          </mui-table>
+        </div>
+      </mui-card-body>
+    </mui-card>`, t.tablerow = (e) => {
+    const s = (e.match(/<mui-cell\b/g) || []).length;
+    return `<mui-row columns="${s ? Array(s).fill("1fr").join(" ") : "1fr"}">${e}</mui-row>`;
+  }, t.tablecell = (e) => `<mui-cell>${e}</mui-cell>`, t;
+};
+class g extends HTMLElement {
+  static get observedAttributes() {
+    return ["markdown", "body-size", "code-size"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.hasAttribute("markdown") || (this.observer = new MutationObserver(() => this.render()), this.observer.observe(this, { childList: !0, subtree: !0, characterData: !0 }));
+  }
+  disconnectedCallback() {
+    this.observer && this.observer.disconnect();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getBodySize() {
+    const i = this.getAttribute("body-size");
+    return i || "small";
+  }
+  getCodeSize() {
+    const i = this.getAttribute("code-size");
+    return i || "x-small";
+  }
+  getMarkdown() {
+    const i = this.getAttribute("markdown");
+    return i !== null ? i : this.textContent ?? "";
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const i = this.getMarkdown(), d = p(i), t = b({
+      bodySize: this.getBodySize(),
+      codeSize: this.getCodeSize()
+    }), o = m.parse(d, { renderer: t, gfm: !0 });
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host { display: block; }
+        .md-inline-code {
+          display: inline-block;
+          padding: var(--space-025) var(--space-050) var(--space-050);
+          border-radius: var(--radius-100);
+          background: var(--surface-recessed-200);
+          font-size: var(--text-font-size-xs);
+          line-height: 1;
+        }
+        .md-code-block {
+          position: relative;
+        }
+        .md-code-copy {
+          position: absolute;
+          top: var(--space-200);
+          right: var(--space-200);
+          z-index: 1;
+        }
+        .md-table-card {
+          overflow-x: auto;
+        }
+        .md-table-scroll {
+          overflow-x: auto;
+        }
+        .md-table {
+          min-width: 888px;
+        }
+      </style>
+      <div class="md-root">${o}</div>
+    `, this.shadowRoot.querySelectorAll("[data-copy-code]").forEach((s) => {
+      s.onclick = () => {
+        var l;
+        const a = s.closest(".md-code-block"), c = a == null ? void 0 : a.querySelector("mui-code"), r = (c == null ? void 0 : c.textContent) ?? "";
+        r && ((l = navigator.clipboard) == null || l.writeText(r).catch(() => {
+        }));
+      };
+    });
+  }
+}
+customElements.get("mui-markdown") || customElements.define("mui-markdown", g);