@muibook/components 1.0.0

package/dist/esm/mui-input/index.js

@@ -0,0 +1,207 @@
+class m extends HTMLElement {
+  static get observedAttributes() {
+    return ["type", "name", "value", "placeholder", "id", "label", "disabled", "hide-label", "variant"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.setupListener();
+  }
+  attributeChangedCallback(e, a, t) {
+    var o;
+    const r = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+    r && (e === "value" && (r.value = t ?? ""), e === "disabled" && (t === null || t === "false" ? r.removeAttribute("disabled") : r.setAttribute("disabled", "")), (e === "type" || e === "placeholder" || e === "label" || e === "hide-label") && (this.render(), this.setupListener()));
+  }
+  setupListener() {
+    var t, r;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    if (!e) return;
+    const a = e.cloneNode(!0);
+    (r = e.parentNode) == null || r.replaceChild(a, e), a.addEventListener("input", (o) => {
+      const s = o.target;
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: s.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }), a.addEventListener("change", (o) => {
+      const s = o.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: s.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    });
+  }
+  render() {
+    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], a = this.getAttribute("type") || "text", t = e.includes(a) ? a : "text", r = this.getAttribute("name") || "", o = this.getAttribute("value") || "", s = this.getAttribute("placeholder") || "", n = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", l = this.hasAttribute("hide-label"), u = this.hasAttribute("disabled"), d = l && i ? `aria-label="${i}"` : "", c = this.getAttribute("variant") || "", b = c || "", h = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, v = [b, h ? "before" : "", p ? "after" : ""].filter(Boolean).join(" ");
+    l && !i && console.warn(
+      "mui-input Accessibility warning: When using 'hide-label', please provide a 'label' attribute so an 'aria-label' can be generated for screen reader support."
+    ), !i && !d && console.warn(
+      "mui-input Accessibility warning: A 'label' or 'aria-label' attribute is required for screen reader accessibility."
+    );
+    const f = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+        }
+        label {
+          display: block;
+          font-size: var(--text-font-size);
+          font-weight: var(--font-weight-medium);
+          margin-bottom: var(--space-100);
+          color: var(--text-color);
+        }
+        .input-wrapper {
+          display: flex;
+          width: 100%;
+        }
+        input {
+          min-height: 4.4rem;
+          width: 100%;
+          line-height: var(--text-line-height);
+          padding: var(--space-200) var(--space-300);
+          box-sizing: border-box;
+          font-size: var(--text-font-size);
+          border-radius: var(--radius-100);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          color: var(--text-color);
+          background: var(--input-background);
+        }
+        input:hover {
+          border-color: var(--form-default-border-color-hover);
+        }
+        input:focus {
+          outline: var(--outline-thick);
+        }
+        input:disabled {
+          opacity: 0.4;
+          cursor: not-allowed;
+          background-color: var(--input-background-disabled);
+        }
+        input.success {
+          color: var(--form-success-text-color);
+          border-color: var(--form-success-border-color);
+          box-shadow: 0 0 0 2px var(--form-success-border-color);
+        }
+        input.warning {
+          color: var(--form-warning-text-color);
+          border-color: var(--form-warning-border-color);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color);
+        }
+        input.error {
+          color: var(--form-error-text-color);
+          border-color: var(--form-error-border-color);
+          box-shadow: 0 0 0 2px var(--form-error-border-color);
+        }
+        input.success:hover {
+          color: var(--form-success-text-color-hover);
+          border-color: var(--form-success-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-success-border-color-hover);
+        }
+        input.warning:hover {
+          color: var(--form-warning-text-color-hover);
+          border-color: var(--form-warning-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color-hover);
+        }
+        input.error:hover {
+          color: var(--form-error-text-color-hover);
+          border-color: var(--form-error-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-error-border-color-hover);
+        }
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+
+        /* ========================================================================== */
+        /* STYLES FOR BEFORE & AFTER (ADDON & SELECT)                                 */
+        /* ========================================================================== */
+
+           input.before { border-top-left-radius: 0; border-bottom-left-radius: 0;}
+           input.after { border-top-right-radius: 0; border-bottom-right-radius: 0;}
+
+        /* ========================================================================== */
+        /* LOGIC FOR FOCUS ORDER of BEFORE, AFTER & INPUT                             */
+        /* The goal is to not exceed 1 order to avoid potential UI bugs               */
+        /* when input and the before/after feature is used in compositions.           */
+        /* ========================================================================== */
+
+        /* ========================================================================== */
+        /* 1. BEFORE: Slotted items are Z-INDEX AUTO by default                       */
+        /* ========================================================================== */
+
+        /* If slotted item is BEFORE & FOCUSED then sit ABOVE INPUT                   */
+
+        /* ========================================================================== */
+        /* 2. INPUT: Slotted items are Z-INDEX AUTO by default                        */
+        /* ========================================================================== */
+
+        /* If INPUT is FOCUSED then sit ABOVE BEFORE & AFTER ITEMS                    */
+
+        /* ========================================================================== */
+        /* 3. AFTER: Slotted items are Z-INDEX AUTO by default                        */
+        /* ========================================================================== */
+
+        /* If slotted item is AFTER & FOCUSED then sit ABOVE INPUT                    */
+
+        /* ========================================================================== */
+        /* 4. FINAL CONCLUSION ON APPROACH                                            */
+        /* ========================================================================== */
+        /* Currently only mui-select is slotted, this might be the only               */
+        /* use-case, but for now we will use '*' to ensure any element that           */
+        /* is focusable will be addressed.                                            */
+        /* ========================================================================== */
+
+           slot[name="before"]::slotted(*:focus),
+           input:focus,
+           slot[name="after"]::slotted(*:focus) { z-index: 1; }
+
+          /* Ensure feedback styles appear above SELECT and focusable Items */
+           input.success,
+           input.warning,
+           input.error {
+             z-index: 1;
+           }
+
+        /* ========================================================================== */
+        
+
+      </style>
+      ${i ? `<label for="${n}" class="${l ? "vh" : ""}">${i}</label>` : ""}
+    <div class="input-wrapper">
+      <slot name="before"></slot>
+      <input
+        class="${v}"
+        type="${t}"
+        name="${r}"
+        id="${n}"
+        value="${o}"
+        placeholder="${s}"
+        ${u ? 'disabled aria-disabled="true"' : ""}
+        ${d}
+      />
+      <slot name="after"></slot>
+    </div>
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = f);
+  }
+}
+customElements.define("mui-input", m);

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

@@ -0,0 +1,263 @@
+import { getPartMap as i } from "../mui-utils/part-map/index.js";
+class s extends HTMLElement {
+  static get observedAttributes() {
+    return ["target", "href", "variant", "weight", "size"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+    const o = this.getAttribute("size") || "medium", t = this.getAttribute("weight") || "regular";
+    this.setAttribute("size", o), this.setAttribute("weight", t);
+  }
+  async connectedCallback() {
+    if (!this.shadowRoot) return;
+    await this.waitForPartMap();
+    let t = (
+      /*html*/
+      `
+    <style>
+
+      :host { display: inline-flex; }
+
+      a {
+        color: var(--link-text-color-default);
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-sizing: border-box;
+      }
+
+      /* Turned back on for focus-visible */
+      a:focus, a:active, a:hover { outline: var(--space-000); }
+      a:hover { color: var(--link-text-color-default-hover); }
+      a:focus { color: var(--link-text-color-default-focus); }
+      a:disabled { color: var(--link-text-color-default-disabled); cursor: not-allowed; }
+      a, a:before, a:after {box-sizing: border-box;}
+      a:focus-visible { outline: var(--outline-thick); }
+
+      :host([size="x-small"]) a {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) a {
+        font-size: var(--text-font-size-s); 
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) a {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+      :host([size="large"]) a {
+        font-size: var(--text-font-size-l); 
+        line-height: var(--text-line-height-l);
+      }
+
+      :host([weight="regular"]) a { font-weight: var(--font-weight-regular); }
+      :host([weight="medium"]) a { font-weight: var(--font-weight-medium); }
+      :host([weight="bold"]) a { font-weight: var(--font-weight-bold); }
+
+
+
+      /* Button  
+      ========================================= */
+
+      :host([variant="primary"]) a,
+      :host([variant="secondary"]) a,
+      :host([variant="tertiary"]) a,
+      :host([variant="attention"]) a {
+        display: inline-block;
+        text-decoration: none;
+        padding: var(--space-200) var(--space-500);
+        border-radius: var(--action-radius);
+        font-size: var(--action-font-size);
+        font-weight: var(--action-font-weight);
+        line-height: var(--action-line-height);
+      }
+
+      :host([variant="primary"]),
+      :host([variant="secondary"])
+      :host([variant="tertiary"]),
+      :host([variant="attention"]) { display: inline-block; }
+
+      /* Button Primary 
+      ========================================= */
+
+      :host([variant="primary"]) a {
+        background: var(--action-primary-background);
+        color: var(--action-primary-text-color);
+        border: var(--action-primary-stroke);
+      }
+
+      :host([variant="primary"]) a:hover {
+        background: var(--action-primary-background-hover);
+        color: var(--action-primary-text-color-hover);
+        border: var(--action-primary-stroke-hover);
+      }
+
+      :host([variant="primary"]) a:focus,
+      :host([variant="tertiary"]) a:focus-visible {
+        background: var(--action-primary-background-focus); 
+        color: var(--action-primary-text-color-focus);
+        border: var(--action-primary-stroke-focus);
+      }
+
+      :host([variant="primary"]) a:disabled {
+        background: var(--action-primary-background-disabled); 
+        color: var(--action-primary-text-color-disabled);
+        border: var(--action-primary-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="primary"]) a ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
+      :host([variant="primary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
+      :host([variant="primary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
+      :host([variant="primary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+
+      /* Button Secondary 
+      ========================================= */
+      :host([variant="secondary"]) a {
+        background: var(--action-secondary-background);
+        color: var(--action-secondary-text-color);
+        border: var(--action-secondary-stroke); 
+      }
+
+      :host([variant="secondary"]) a:hover {
+        background: var(--action-secondary-background-hover);
+        color: var(--action-secondary-text-color-hover);
+        border: var(--action-secondary-stroke-hover); 
+      }
+
+      :host([variant="secondary"]) a:focus,
+      :host([variant="secondary"]) a:focus-visible {
+        background: var(--action-secondary-background-focus);
+        color: var(--action-secondary-text-color-focus);
+        border: var(--action-secondary-stroke-focus); 
+      }
+
+      :host([variant="secondary"]) a:disabled {
+        background: var(--action-secondary-background-disabled);
+        color: var(--action-secondary-text-color-disabled);
+        border: var(--action-secondary-stroke-disabled); 
+        cursor: not-allowed;
+      }
+
+      :host([variant="secondary"]) a ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
+      :host([variant="secondary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
+      :host([variant="secondary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
+      :host([variant="secondary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
+
+      /* Button Tertiary
+      ========================================= */
+      :host([variant="tertiary"]) a {
+        background: var(--action-tertiary-background);
+        color: var(--action-tertiary-text-color);
+        border: var(--action-tertiary-stroke);
+      }
+
+      :host([variant="tertiary"]) a:hover {
+        color: var(--action-tertiary-text-color-hover);
+        background: var(--action-tertiary-background-hover);
+        border: var(--action-tertiary-stroke-hover);
+      }
+
+      :host([variant="tertiary"]) a:focus,
+      :host([variant="tertiary"]) a:focus-visible {
+        color: var(--action-tertiary-text-color-focus);
+        background: var(--action-tertiary-background-focus); 
+        border: var(--action-tertiary-stroke-focus);
+      }
+
+      :host([variant="tertiary"]) a:disabled {
+        background: var(--action-tertiary-background-disabled);
+        color: var(--action-tertiary-text-color-disabled);
+        border: var(--action-tertiary-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="tertiary"]) a ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
+      :host([variant="tertiary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
+      :host([variant="tertiary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
+      :host([variant="tertiary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
+
+      /* Button Attention
+      ========================================= */
+      :host([variant="attention"]) a {
+        background: var(--action-attention-background);
+        color: var(--action-attention-text-color);
+        border: var(--action-attention-stroke);
+      }
+
+      :host([variant="attention"]) a:hover {
+        background: var(--action-attention-background-hover);
+        color: var(--action-attention-text-color-hover);
+        border: var(--action-attention-stroke-hover);
+      }
+
+      :host([variant="attention"]) a:focus,
+      :host([variant="attention"]) a:focus-visible  {
+        background: var(--action-attention-background-focus);
+        color: var(--action-attention-text-color-focus);
+        border: var(--action-attention-stroke-focus);
+      }
+
+      :host([variant="attention"]) a:disabled {
+        background: var(--action-attention-background-disabled);
+        color: var(--action-attention-text-color-disabled);
+        border: var(--action-attention-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="attention"]) a ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
+      :host([variant="attention"]) a:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
+      :host([variant="attention"]) a:focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
+      :host([variant="attention"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
+
+      /* Icon only
+      ========================================= */
+      :host([icon-only]) a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 44px;
+        width: 44px;
+        padding: var(--action-icon-only-padding);
+      }
+      /* ===================================== */
+
+
+    </style>
+
+    <a
+      part="${i("text", "spacing", "layout", "visual")}" 
+      target="${this.getAttribute("target") || "_self"}" 
+      href="${this.getAttribute("href") || "#"}"
+      >
+      <slot></slot>
+    </a>
+    `
+    );
+    this.shadowRoot.innerHTML = t, await customElements.whenDefined("mui-link"), requestAnimationFrame(() => {
+      var e;
+      const r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+      ((r == null ? void 0 : r.assignedNodes({ flatten: !0 })) || []).every((a) => {
+        var n;
+        if (a.nodeType === Node.ELEMENT_NODE) {
+          const c = a;
+          return c.tagName.toLowerCase() === "svg" || c.classList.contains("mui-icon");
+        }
+        return a.nodeType === Node.TEXT_NODE && !((n = a.textContent) != null && n.trim());
+      }) ? this.setAttribute("icon-only", "") : this.removeAttribute("icon-only");
+    });
+  }
+  waitForPartMap() {
+    return new Promise((o) => {
+      if (typeof i == "function") return o();
+      const t = () => {
+        typeof i == "function" ? o() : requestAnimationFrame(t);
+      };
+      t();
+    });
+  }
+}
+customElements.define("mui-link", s);

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

@@ -0,0 +1,2 @@
+import "./item/index.js";
+import "./list/index.js";

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

@@ -0,0 +1,65 @@
+class e extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size", "weight"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.setAttribute("role", "listitem"), this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const t = (
+      /*css*/
+      `
+      :host {
+        display: list-item;
+        margin: var(--space-000);
+        color: var(--text-color);
+      }
+
+      /* Size styles */
+
+      :host([size="x-small"]) {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) {
+        font-size: var(--text-font-size-s);
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+
+      :host([size="large"]) {
+        font-size: var(--text-font-size-l);
+        line-height: var(--text-line-height-l);
+      }
+
+
+      /* Weight styles */
+      :host([weight="regular"]) {
+        font-weight: var(--font-weight-regular);
+      }
+
+      :host([weight="medium"]) {
+        font-weight: var(--font-weight-medium);
+      }
+
+      :host([weight="bold"]) {
+        font-weight: var(--font-weight-bold);
+      }
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${t}</style>
+      <slot></slot>
+    `);
+  }
+}
+customElements.define("mui-list-item", e);

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

@@ -0,0 +1,31 @@
+class t extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.setAttribute("role", "list"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+
+        :host { 
+          display: block;
+          width: 100%;
+          list-style-position: outside;
+          padding: var(--space-000);
+          margin: var(--space-000);
+          padding-left: var(--space-400);
+          box-sizing: border-box;
+        }
+        
+        :host([as="ol"]) {
+          list-style-type: decimal;
+        }
+        :host([as="ul"]) {
+          list-style-type: disc;
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
+}
+customElements.define("mui-list", t);

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

@@ -0,0 +1,90 @@
+const l = ["neutral", "positive", "info", "warning", "attention"], b = {
+  neutral: "background-color: var(--feedback-neutral-background); border: var(--feedback-neutral-border);",
+  positive: "background-color: var(--feedback-positive-background); border: var(--feedback-positive-border);",
+  info: "background-color: var(--feedback-info-background); border: var(--feedback-info-border);",
+  warning: "background-color: var(--feedback-warning-background); border: var(--feedback-warning-border);",
+  attention: "background-color: var(--feedback-attention-background); border: var(--feedback-attention-border);"
+}, g = {
+  neutral: "polite",
+  positive: "polite",
+  info: "polite",
+  warning: "assertive",
+  attention: "assertive"
+}, u = {
+  neutral: "status",
+  positive: "status",
+  info: "status",
+  warning: "alert",
+  attention: "alert"
+}, v = {
+  neutral: "--feedback-neutral-icon",
+  positive: "--feedback-positive-icon",
+  info: "--feedback-info-icon",
+  warning: "--feedback-warning-icon",
+  attention: "--feedback-attention-icon"
+}, f = {
+  neutral: "color: var(--feedback-neutral-text);",
+  positive: "color: var(--feedback-positive-text);",
+  info: "color: var(--feedback-info-text);",
+  warning: "color: var(--feedback-warning-text);",
+  attention: "color: var(--feedback-attention-text);"
+}, k = {
+  neutral: "mui-icon-message",
+  positive: "mui-icon-check",
+  info: "mui-icon-info",
+  warning: "mui-icon-warning",
+  attention: "mui-icon-attention"
+};
+class p extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    const a = this.getAttribute("variant") || "neutral", e = l.includes(a) ? a : "neutral", t = this.getAttribute("heading") || "Heading...", o = this.getAttribute("icon") || k[e], n = v[e], i = f[e], r = b[e], s = g[e], c = u[e], d = (
+      /*css*/
+      `
+      :host {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      section {
+        padding: var(--message-padding);
+        border-radius: var(--message-radius);
+        ${r}
+      }
+
+      .icon {
+        margin-top: var(--space-025);
+        display: flex;
+      }
+
+      .heading {
+        font-weight: var(--font-weight-bold);
+        font-size: var(--font-size-200);
+        ${i}
+      }
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+        <style>${d}</style>
+    
+      <section aria-labelledby="message-heading" aria-live="${s}" role="${c}">
+        <mui-h-stack space="var(--message-gap-horizontal)">
+          <div class="icon">
+            <${o} color="var(${n})"></${o}>
+          </div>
+          <mui-v-stack space="var(--message-gap-vertical)">
+            <div class="heading" id="message-heading">${t}</div>
+            <slot>
+              <mui-body>Body content...</mui-body>
+            </slot>
+          </mui-v-stack>
+        </mui-h-stack>
+      </section>
+      `);
+  }
+}
+customElements.define("mui-message", p);

package/dist/esm/mui-quote/index.js

@@ -0,0 +1,27 @@
+class t extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    let e = (
+      /*html*/
+      `
+    <style>
+      @import url("./css/mui-reset.css");
+      :host { display: block; }
+      blockquote {
+        border-left: var(--border-thick);
+        padding-left: var(--space-500);
+        font-size: var(--space-500);
+        line-height: 1.5;
+        margin: var(--space-500) var(--space-000);
+        font-style: italic;
+      }
+    </style>
+    <blockquote><slot></slot></blockquote>
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = e);
+  }
+}
+customElements.define("mui-quote", t);