@muibook/components 19.6.0 → 20.1.0

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

@@ -6,41 +6,62 @@ class c extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  get checked() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    return (e == null ? void 0 : e.checked) ?? this.hasAttribute("checked");
+  }
+  set checked(e) {
+    this.toggleAttribute("checked", !!e);
+  }
+  get value() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    return (e == null ? void 0 : e.value) ?? this.getAttribute("value") ?? "";
+  }
+  set value(e) {
+    this.setAttribute("value", e ?? "");
+  }
+  focus(e) {
+    var a;
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("input");
+    t ? t.focus(e) : super.focus(e);
+  }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, i, a) {
+  attributeChangedCallback(e, t, a) {
     var r;
-    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
     if (e === "checked") {
-      t && (t.checked = a !== null);
+      i && (i.checked = a !== null);
       return;
     }
     if (e === "disabled") {
-      t && (t.disabled = a !== null);
+      i && (i.disabled = a !== null);
       return;
     }
     ["id", "name", "value", "aria-label", "size"].includes(e) && (this.render(), this.setupListener());
   }
   cleanupListeners() {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
     e && this._changeHandler && e.removeEventListener("change", this._changeHandler);
   }
   setupListener() {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
     e && (this.cleanupListeners(), this._changeHandler = (a) => {
-      const t = a.target;
-      t.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(
+      const i = a.target;
+      i.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(
         new CustomEvent("change", {
           detail: {
-            checked: t.checked,
-            value: t.value,
-            name: t.name
+            checked: i.checked,
+            value: i.value,
+            name: i.name
           },
           bubbles: !0,
           composed: !0
@@ -49,7 +70,7 @@ class c extends HTMLElement {
     }, e.addEventListener("change", this._changeHandler));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-radio-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("name") || "", a = this.getAttribute("value") || "", t = this.hasAttribute("checked"), r = this.hasAttribute("disabled"), o = this.getAttribute("aria-label") || "", s = this.getAttribute("size") || "medium", d = ["x-small", "small", "medium", "large"].includes(s) ? s : "medium", l = this.innerHTML.trim().length > 0;
+    const e = this.getAttribute("id") || `mui-radio-${Math.random().toString(36).substr(2, 9)}`, t = this.getAttribute("name") || "", a = this.getAttribute("value") || "", i = this.hasAttribute("checked"), r = this.hasAttribute("disabled"), s = this.getAttribute("aria-label") || "", o = this.getAttribute("size") || "medium", d = ["x-small", "small", "medium", "large"].includes(o) ? o : "medium", l = this.innerHTML.trim().length > 0;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -141,11 +162,11 @@ class c extends HTMLElement {
         <input
           type="radio"
           id="${e}"
-          name="${i}"
+          name="${t}"
           value="${a}"
-          ${t ? "checked" : ""}
+          ${i ? "checked" : ""}
           ${r ? "disabled" : ""}
-          ${o ? `aria-label="${o}"` : ""}
+          ${s ? `aria-label="${s}"` : ""}
         />
         ${l ? `<mui-body size="${d === "x-small" || d === "small" ? "x-small" : "small"}"><slot></slot></mui-body>` : ""}
       </label>

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

@@ -18,6 +18,11 @@ class u extends HTMLElement {
   set value(e) {
     this.setAttribute("value", String(Number.isFinite(e) ? e : 0));
   }
+  focus(e) {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    t ? t.focus(e) : super.focus(e);
+  }
   getThumbSize() {
     return Number(this.getAttribute("thumb-size") || "16");
   }
@@ -32,8 +37,8 @@ class u extends HTMLElement {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("input"), t = this.shadowRoot.querySelector('[data-role="bubble"]');
     if (!e || !t) return;
-    const r = Number(e.min || "0"), a = Number(e.max || "0"), i = Number(e.value || "0"), o = Math.max(0, a - r), s = o > 0 ? Math.max(0, Math.min(1, (i - r) / o)) : 0, n = this.getThumbSize();
-    t.textContent = this.formatBubble(i), t.style.left = `calc(${s * 100}% - ${(s - 0.5) * n}px)`;
+    const r = Number(e.min || "0"), a = Number(e.max || "0"), i = Number(e.value || "0"), s = Math.max(0, a - r), o = s > 0 ? Math.max(0, Math.min(1, (i - r) / s)) : 0, n = this.getThumbSize();
+    t.textContent = this.formatBubble(i), t.style.left = `calc(${o * 100}% - ${(o - 0.5) * n}px)`;
   }
   bind() {
     if (!this.shadowRoot) return;
@@ -64,7 +69,7 @@ class u extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("min") || "0", t = this.getAttribute("max") || "100", r = this.getAttribute("value") || "0", a = this.getAttribute("step") || "1", i = this.hasAttribute("disabled"), o = this.getAttribute("label") || "Range input";
+    const e = this.getAttribute("min") || "0", t = this.getAttribute("max") || "100", r = this.getAttribute("value") || "0", a = this.getAttribute("step") || "1", i = this.hasAttribute("disabled"), s = this.getAttribute("label") || "Range input";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -111,7 +116,7 @@ class u extends HTMLElement {
           max="${t}"
           value="${r}"
           step="${a}"
-          aria-label="${o.replace(/"/g, "&quot;")}"
+          aria-label="${s.replace(/"/g, "&quot;")}"
           ${i ? "disabled" : ""}
         />
         <mui-body data-role="bubble" size="x-small" variant="optional" aria-hidden="true">0</mui-body>

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

@@ -1,19 +1,19 @@
 class a extends HTMLElement {
   constructor() {
-    super(), this.slotEl = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null, this.cleanup = null;
-    const t = this.attachShadow({ mode: "open" }), s = (
+    super(), this.slotEl = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null, this.resizeObserver = null, this.cleanup = null;
+    const e = this.attachShadow({ mode: "open" }), s = (
       /*css*/
       `
       :host { display: block; }
     `
     );
-    t.innerHTML = `
+    e.innerHTML = `
       <style>${s}</style>
       <slot></slot>
-    `, this.slotEl = t.querySelector("slot");
+    `, this.slotEl = e.querySelector("slot");
   }
   static get observedAttributes() {
-    return ["breakpoint", "breakpoint-low", "breakpoint-high"];
+    return ["variant", "observe", "breakpoint", "breakpoint-low", "breakpoint-high"];
   }
   connectedCallback() {
     this.setupResponsive();
@@ -21,41 +21,74 @@ class a extends HTMLElement {
   disconnectedCallback() {
     this.teardownResponsive();
   }
-  attributeChangedCallback(t, s, l) {
-    s !== l && a.observedAttributes.includes(t) && this.setupResponsive();
+  attributeChangedCallback(e, s, o) {
+    s !== o && a.observedAttributes.includes(e) && this.setupResponsive();
   }
   teardownResponsive() {
-    var t;
-    (t = this.cleanup) == null || t.call(this), this.cleanup = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null;
+    var e, s;
+    (e = this.cleanup) == null || e.call(this), this.cleanup = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null, (s = this.resizeObserver) == null || s.disconnect(), this.resizeObserver = null;
+  }
+  getSlotName(e, s, o, r) {
+    if (s && o) {
+      const t = parseInt(s), i = parseInt(o);
+      return Number.isNaN(t) || Number.isNaN(i) ? null : e <= t ? "showBelow" : e >= i ? "showAbove" : "showMiddle";
+    }
+    if (r) {
+      const t = parseInt(r);
+      return Number.isNaN(t) ? null : e <= t ? "showBelow" : "showAbove";
+    }
+    return null;
+  }
+  getObservedElement() {
+    const e = this.getAttribute("observe");
+    if (!e || e === "self") return this;
+    if (e === "parent") return this.parentElement || this;
+    try {
+      return this.closest(e) || this;
+    } catch {
+      return this;
+    }
   }
   setupResponsive() {
-    const t = this.getAttribute("breakpoint"), s = this.getAttribute("breakpoint-low"), l = this.getAttribute("breakpoint-high");
-    if (this.teardownResponsive(), !!this.slotEl)
-      if (s && l) {
-        const n = parseInt(s), i = parseInt(l);
-        if (Number.isNaN(n) || Number.isNaN(i)) return;
-        this.mqlLow = window.matchMedia(`(max-width: ${n}px)`), this.mqlHigh = window.matchMedia(`(min-width: ${i}px)`);
-        const e = () => {
-          const o = this.mqlLow.matches, h = this.mqlHigh.matches, r = o ? "showBelow" : h ? "showAbove" : "showMiddle";
-          this.slotEl.setAttribute("name", r);
+    const e = this.getAttribute("variant") || "viewport", s = this.getAttribute("breakpoint"), o = this.getAttribute("breakpoint-low"), r = this.getAttribute("breakpoint-high");
+    if (this.teardownResponsive(), !!this.slotEl) {
+      if (e === "container") {
+        const t = this.getObservedElement(), i = (n) => {
+          const l = this.getSlotName(n, o, r, s);
+          l ? this.slotEl.setAttribute("name", l) : this.slotEl.removeAttribute("name");
+        };
+        i(t.getBoundingClientRect().width), this.resizeObserver = new ResizeObserver((n) => {
+          const l = n[0];
+          l && i(l.contentRect.width);
+        }), this.resizeObserver.observe(t);
+        return;
+      }
+      if (o && r) {
+        const t = parseInt(o), i = parseInt(r);
+        if (Number.isNaN(t) || Number.isNaN(i)) return;
+        this.mqlLow = window.matchMedia(`(max-width: ${t}px)`), this.mqlHigh = window.matchMedia(`(min-width: ${i}px)`);
+        const n = () => {
+          const l = this.mqlLow.matches, h = this.mqlHigh.matches, u = l ? "showBelow" : h ? "showAbove" : "showMiddle";
+          this.slotEl.setAttribute("name", u);
         };
-        e(), this.mqlLow.addEventListener("change", e), this.mqlHigh.addEventListener("change", e), this.cleanup = () => {
-          var o, h;
-          (o = this.mqlLow) == null || o.removeEventListener("change", e), (h = this.mqlHigh) == null || h.removeEventListener("change", e);
+        n(), this.mqlLow.addEventListener("change", n), this.mqlHigh.addEventListener("change", n), this.cleanup = () => {
+          var l, h;
+          (l = this.mqlLow) == null || l.removeEventListener("change", n), (h = this.mqlHigh) == null || h.removeEventListener("change", n);
         };
-      } else if (t) {
-        const n = parseInt(t);
-        if (Number.isNaN(n)) return;
-        this.mqlSingle = window.matchMedia(`(max-width: ${n}px)`);
+      } else if (s) {
+        const t = parseInt(s);
+        if (Number.isNaN(t)) return;
+        this.mqlSingle = window.matchMedia(`(max-width: ${t}px)`);
         const i = () => {
           this.slotEl.setAttribute("name", this.mqlSingle.matches ? "showBelow" : "showAbove");
         };
         i(), this.mqlSingle.addEventListener("change", i), this.cleanup = () => {
-          var e;
-          (e = this.mqlSingle) == null || e.removeEventListener("change", i);
+          var n;
+          (n = this.mqlSingle) == null || n.removeEventListener("change", i);
         };
       } else
         this.slotEl.removeAttribute("name");
+    }
   }
 }
 customElements.get("mui-responsive") || customElements.define("mui-responsive", a);

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

@@ -0,0 +1,300 @@
+import "../mui-button/index.js";
+import "../mui-icons/search/index.js";
+import "../mui-input/index.js";
+class l extends HTMLElement {
+  constructor() {
+    super(), this.slotChangeHandler = () => this.syncAfterSlotState(), this.actionSlotChangeHandler = () => {
+      this.syncAction(), this.syncOpenState();
+    }, this.animationFrame = 0, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["id", "label", "placeholder", "value", "name", "size", "disabled", "open", "autofocus", "cancel-label"];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t ?? "");
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("label") || this.setAttribute("label", "Search"), this.hasAttribute("placeholder") || this.setAttribute("placeholder", "Search..."), this.render(), this.setupListeners(), this.syncAfterSlotState(), this.queueAutofocus();
+  }
+  disconnectedCallback() {
+    this.animationFrame && cancelAnimationFrame(this.animationFrame);
+  }
+  attributeChangedCallback(t, i, s) {
+    if (i !== s) {
+      if (t === "value") {
+        const e = this.inputEl;
+        e && e.getAttribute("value") !== (s || "") && e.setAttribute("value", s || "");
+        return;
+      }
+      if (t === "open") {
+        this.syncOpenState(!0), s !== null && this.queueAutofocus();
+        return;
+      }
+      this.render(), this.setupListeners(), this.syncAfterSlotState(), this.queueAutofocus();
+    }
+  }
+  focus(t) {
+    var i;
+    (i = this.inputEl) == null || i.focus(t);
+  }
+  openSearch() {
+    this.open = !0;
+  }
+  closeSearch() {
+    this.open = !1;
+  }
+  toggleSearch() {
+    this.open = !this.open;
+  }
+  get inputEl() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector("mui-input");
+  }
+  get actionEl() {
+    var s, e;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="action"]');
+    return (t == null ? void 0 : t.assignedElements({ flatten: !0 }).find((a) => a instanceof HTMLElement)) || ((e = this.shadowRoot) == null ? void 0 : e.querySelector(".search-trigger"));
+  }
+  syncAction() {
+    var i;
+    const t = this.actionEl;
+    t && (t.classList.add("search-trigger"), t.setAttribute("aria-expanded", this.open ? "true" : "false"), !t.hasAttribute("aria-label") && !((i = t.textContent) != null && i.trim()) && t.setAttribute("aria-label", "Search"), this.hasAttribute("disabled") ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"), t.onclick = () => this.openSearch());
+  }
+  emitToggleEvent() {
+    this.dispatchEvent(
+      new CustomEvent("toggle", {
+        detail: { open: this.open },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  syncAfterSlotState() {
+    var s;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="after"]'), i = !!(t != null && t.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE || (e.textContent || "").trim()));
+    this.toggleAttribute("has-after", i), this.syncOpenState();
+  }
+  syncOpenState(t = !1) {
+    var n, r, c;
+    const i = this.actionEl, s = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".cancel"), e = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".after-panel"), a = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".search-panel"), o = this.hasAttribute("has-after");
+    this.open ? (i == null || i.setAttribute("aria-expanded", "true"), s == null || s.removeAttribute("tabindex"), e == null || e.setAttribute("aria-hidden", "true"), e == null || e.setAttribute("inert", ""), a == null || a.removeAttribute("inert")) : (i == null || i.setAttribute("aria-expanded", "false"), s == null || s.setAttribute("tabindex", "-1"), e == null || e.setAttribute("aria-hidden", "false"), e == null || e.removeAttribute("inert"), o ? a == null || a.setAttribute("inert", "") : a == null || a.removeAttribute("inert")), t && this.emitToggleEvent();
+  }
+  queueAutofocus() {
+    !this.hasAttribute("autofocus") && !this.open || (this.animationFrame && cancelAnimationFrame(this.animationFrame), this.animationFrame = requestAnimationFrame(() => {
+      this.animationFrame = requestAnimationFrame(() => {
+        this.focus({ preventScroll: !0 });
+      });
+    }));
+  }
+  setupListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.inputEl, i = this.shadowRoot.querySelector('slot[name="after"]'), s = this.shadowRoot.querySelector('slot[name="action"]'), e = this.shadowRoot.querySelector(".cancel");
+    i == null || i.removeEventListener("slotchange", this.slotChangeHandler), i == null || i.addEventListener("slotchange", this.slotChangeHandler), s == null || s.removeEventListener("slotchange", this.actionSlotChangeHandler), s == null || s.addEventListener("slotchange", this.actionSlotChangeHandler), t && (t.oninput = (a) => {
+      var r;
+      a.stopPropagation();
+      const n = ((r = a.detail) == null ? void 0 : r.value) ?? t.getAttribute("value") ?? "";
+      this.setAttribute("value", n), this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: n },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, t.onchange = (a) => {
+      var r;
+      a.stopPropagation();
+      const n = ((r = a.detail) == null ? void 0 : r.value) ?? t.getAttribute("value") ?? "";
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: n },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, t.onkeydown = (a) => {
+      var o;
+      a.key === "Escape" && this.open && (a.preventDefault(), this.closeSearch(), (o = this.actionEl) == null || o.focus());
+    }), this.syncAction(), e == null || e.addEventListener("click", () => {
+      var a;
+      this.closeSearch(), (a = this.actionEl) == null || a.focus();
+    }), this.syncOpenState();
+  }
+  render() {
+    const t = this.getAttribute("id") || `mui-search-input-${Math.random().toString(36).slice(2, 9)}`, i = this.getAttribute("label") || "Search", s = this.getAttribute("placeholder") || "Search...", e = this.getAttribute("name") || "", a = this.value, o = this.getAttribute("size") || "medium", n = this.hasAttribute("disabled"), r = this.getAttribute("cancel-label") || "Cancel";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          --search-transition-duration: 280ms;
+          --search-transition-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+        }
+
+        .shell {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr);
+          align-items: center;
+          width: 100%;
+          gap: var(--space-200);
+        }
+
+        .after-panel {
+          grid-area: 1 / 1;
+          display: none;
+          min-width: 0;
+          opacity: 0;
+          transform: translateY(calc(var(--space-400) * -1));
+          transition:
+            opacity 180ms ease,
+            transform var(--search-transition-duration) var(--search-transition-easing);
+          z-index: 1;
+        }
+
+        :host([has-after]) .after-panel {
+          display: grid;
+          grid-template-columns: auto minmax(0, 1fr);
+          align-items: center;
+          gap: var(--space-200);
+          opacity: 1;
+          transform: translateY(0);
+        }
+
+        :host([has-after][open]) .after-panel {
+          opacity: 0;
+          transform: translateY(var(--space-500));
+          pointer-events: none;
+        }
+
+        .after-content {
+          min-width: 0;
+          overflow: hidden;
+          opacity: 1;
+          transition: opacity 180ms ease;
+        }
+
+        :host([has-after][open]) .after-content {
+          opacity: 0;
+        }
+
+        .search-panel {
+          grid-area: 1 / 1;
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) auto;
+          align-items: center;
+          gap: var(--space-300);
+          min-width: 0;
+          opacity: 1;
+          transform: translateY(0);
+          transition:
+            opacity 180ms ease,
+            transform var(--search-transition-duration) var(--search-transition-easing);
+          z-index: 2;
+        }
+
+        :host(:not([open])) .search-panel {
+          grid-template-columns: minmax(0, 1fr) 0fr;
+        }
+
+        :host([has-after]:not([open])) .search-panel {
+          opacity: 0;
+          transform: translateY(calc(var(--space-500) * -1));
+          pointer-events: none;
+        }
+
+        .cancel-wrap {
+          min-width: 0;
+          overflow: hidden;
+          opacity: 1;
+          transition: opacity 180ms ease;
+        }
+
+        :host(:not([open])) .cancel-wrap {
+          opacity: 0;
+          pointer-events: none;
+        }
+
+        .search-trigger {
+          --action-focus-outline-offset: var(--stroke-size-200);
+        }
+
+        .input-wrap {
+          min-width: 0;
+          opacity: 1;
+          transition: opacity 120ms ease;
+        }
+
+        :host([has-after]:not([open])) .input-wrap {
+          opacity: 0;
+          pointer-events: none;
+        }
+
+        mui-input {
+          display: block;
+          width: 100%;
+        }
+
+        mui-icon-search {
+          pointer-events: none;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .shell,
+          .after-panel,
+          .search-panel,
+          .input-wrap,
+          .cancel-wrap {
+            transition: none;
+          }
+        }
+      </style>
+
+      <div class="shell">
+        <div class="after-panel" aria-hidden="${this.open ? "true" : "false"}">
+          <slot name="action">
+            <mui-button class="search-trigger" variant="tertiary" icon-only aria-label="Search" aria-expanded="${this.open ? "true" : "false"}" ${n ? "disabled" : ""}>
+              <mui-icon-search></mui-icon-search>
+            </mui-button>
+          </slot>
+          <div class="after-content">
+            <slot name="after"></slot>
+          </div>
+        </div>
+
+        <div class="search-panel">
+          <div class="input-wrap">
+            <mui-input
+              id="${t}"
+              type="search"
+              name="${e}"
+              size="${o}"
+              label="${i}"
+              hide-label
+              placeholder="${s}"
+              value="${a}"
+              ${n ? "disabled" : ""}
+              ${this.hasAttribute("autofocus") ? "autofocus" : ""}
+            >
+              <mui-icon-search slot="inside-before"></mui-icon-search>
+            </mui-input>
+          </div>
+          <div class="cancel-wrap">
+            <mui-button class="cancel" variant="tertiary" ${n ? "disabled" : ""} ${this.open ? "" : 'tabindex="-1"'}>
+              ${r}
+            </mui-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.get("mui-search-input") || customElements.define("mui-search-input", l);