@muibook/components 10.0.1 → 11.0.0

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

@@ -0,0 +1,155 @@
+import "../mui-body/index.js";
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["checked", "disabled", "id", "name", "value", "aria-label", "size"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
+  }
+  disconnectedCallback() {
+    this.cleanupListeners();
+  }
+  attributeChangedCallback(e, i, a) {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    if (e === "checked") {
+      t && (t.checked = a !== null);
+      return;
+    }
+    if (e === "disabled") {
+      t && (t.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");
+    e && this._changeHandler && e.removeEventListener("change", this._changeHandler);
+  }
+  setupListener() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    e && (this.cleanupListeners(), this._changeHandler = (a) => {
+      const t = a.target;
+      t.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            checked: t.checked,
+            value: t.value,
+            name: t.name
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, 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;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+        }
+
+        label {
+          display: flex;
+          align-items: center;
+          gap: var(--space-200);
+          cursor: pointer;
+        }
+        :host([disabled]) label {
+          cursor: not-allowed;
+        }
+        :host([disabled]) mui-body {
+          cursor: not-allowed;
+        }
+
+        input[type="radio"] {
+          all: unset;
+          width: var(--radio-size);
+          height: var(--radio-size);
+          border: var(--border-thin);
+          border-color: var(--radio-border-color);
+          border-radius: var(--radius-500);
+          display: inline-block;
+          vertical-align: middle;
+          cursor: pointer;
+          background: var(--radio-background);
+          position: relative;
+          box-sizing: border-box;
+        }
+        :host([size="x-small"]) input[type="radio"] {
+          width: calc(var(--radio-size) - var(--space-100));
+          height: calc(var(--radio-size) - var(--space-100));
+        }
+        :host([size="small"]) input[type="radio"] {
+          width: calc(var(--radio-size) - var(--space-050));
+          height: calc(var(--radio-size) - var(--space-050));
+        }
+        :host([size="large"]) input[type="radio"] {
+          width: calc(var(--radio-size) + var(--space-100));
+          height: calc(var(--radio-size) + var(--space-100));
+        }
+
+        input[type="radio"]:hover {
+          border-color: var(--radio-border-color-hover);
+        }
+
+        input[type="radio"]:focus {
+          outline: var(--outline-medium);
+        }
+
+        input[type="radio"]::after {
+          content: "";
+          position: absolute;
+          inset: 50%;
+          width: 55%;
+          height: 55%;
+          transform: translate(-50%, -50%);
+          border-radius: var(--radius-500);
+          background: var(--radio-dot-color-checked);
+          opacity: 0;
+        }
+
+        input[type="radio"]:checked {
+          border-color: var(--radio-border-color-checked);
+          background: var(--radio-background);
+        }
+
+        input[type="radio"]:checked::after {
+          opacity: 1;
+        }
+
+        input:disabled {
+          background: var(--radio-background-disabled);
+          border-color: var(--radio-border-color-disabled);
+          cursor: not-allowed;
+        }
+
+        input[type="radio"]:disabled::after {
+          background: var(--radio-dot-color-checked-disabled);
+        }
+      </style>
+
+      <label>
+        <input
+          type="radio"
+          id="${e}"
+          name="${i}"
+          value="${a}"
+          ${t ? "checked" : ""}
+          ${r ? "disabled" : ""}
+          ${o ? `aria-label="${o}"` : ""}
+        />
+        ${l ? `<mui-body size="${d === "x-small" || d === "small" ? "x-small" : "small"}"><slot></slot></mui-body>` : ""}
+      </label>
+    `;
+  }
+}
+customElements.get("mui-radio") || customElements.define("mui-radio", c);

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

@@ -0,0 +1,104 @@
+class r extends HTMLElement {
+  constructor() {
+    super(), this._groupName = "", this.onRadioChange = (e) => {
+      const t = e.target;
+      if (t.tagName.toLowerCase() !== "mui-radio" || !t.hasAttribute("checked")) return;
+      const a = t.getAttribute("value") || "";
+      this.setAttribute("value", a), this.getRadios().forEach((s) => {
+        s !== t && s.removeAttribute("checked");
+      }), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: a, name: this._groupName },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["name", "value", "disabled", "size", "label", "hide-label", "optional"];
+  }
+  connectedCallback() {
+    var e, t;
+    this.hasAttribute("role") || this.setAttribute("role", "radiogroup"), this.hasAttribute("size") || this.setAttribute("size", "medium"), this._groupName = this.getAttribute("name") || this.generateGroupName(), this.render(), this.syncRadios(), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot")) == null || t.addEventListener("slotchange", () => this.syncRadios()), this.addEventListener("change", this.onRadioChange);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("change", this.onRadioChange);
+  }
+  attributeChangedCallback(e, t, a) {
+    e === "name" && a && (this._groupName = a), this.syncRadios();
+  }
+  generateGroupName() {
+    return `mui-radio-group-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  getRadios() {
+    return Array.from(this.querySelectorAll("mui-radio"));
+  }
+  syncRadios() {
+    const e = this.hasAttribute("disabled"), t = this.getAttribute("value") || "", a = this.getAttribute("size") || "medium";
+    this.getRadios().forEach((i) => {
+      i.setAttribute("name", this._groupName), i.setAttribute("size", a), e ? (i.setAttribute("disabled", ""), i.setAttribute("data-group-disabled", "")) : i.hasAttribute("data-group-disabled") && (i.removeAttribute("disabled"), i.removeAttribute("data-group-disabled"));
+      const o = i.getAttribute("value") || "";
+      t && o === t ? i.setAttribute("checked", "") : t && i.removeAttribute("checked");
+    });
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.getAttribute("label") || "", t = this.hasAttribute("hide-label"), a = this.hasAttribute("optional"), s = `mui-radio-group-label-${this._groupName}`, i = a ? '<span class="optional"><span class="optional-dot">&bull;</span><span class="optional-text">Optional</span></span>' : "";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: grid;
+          gap: var(--space-200);
+        }
+        label {
+          font-size: var(--text-font-size);
+          font-weight: var(--font-weight-medium);
+          margin-bottom: var(--space-100);
+          color: var(--text-color);
+          display: block;
+        }
+        .label-with-optional {
+          display: flex;
+          align-items: center;
+          gap: var(--space-100);
+        }
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+        .optional {
+          color: var(--text-color-optional);
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-050);
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          text-transform: uppercase;
+          font-weight: var(--font-weight-medium);
+        }
+        .optional-dot {
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+        .optional-text {
+          transform: translateY(calc(var(--stroke-size-100) * -1));
+        }
+      </style>
+      ${e ? `<label id="${s}" class="${t ? "vh" : ""}">
+               <span class="label-with-optional">${e}${i}</span>
+             </label>` : ""}
+      <slot></slot>
+    `, e ? this.setAttribute("aria-labelledby", s) : this.removeAttribute("aria-labelledby");
+  }
+}
+customElements.get("mui-radio-group") || customElements.define("mui-radio-group", r);

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

@@ -0,0 +1,122 @@
+import "../mui-body/index.js";
+class u extends HTMLElement {
+  static get observedAttributes() {
+    return ["min", "max", "value", "step", "disabled", "bubble", "bubble-format"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.bind();
+  }
+  attributeChangedCallback(e, t) {
+    e !== t && (this.render(), this.bind());
+  }
+  get value() {
+    return Number(this.getAttribute("value") || "0");
+  }
+  set value(e) {
+    this.setAttribute("value", String(Number.isFinite(e) ? e : 0));
+  }
+  getThumbSize() {
+    return Number(this.getAttribute("thumb-size") || "16");
+  }
+  formatTime(e) {
+    const t = Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0, r = Math.floor(t / 60), a = t % 60;
+    return `${r}:${String(a).padStart(2, "0")}`;
+  }
+  formatBubble(e) {
+    return (this.getAttribute("bubble-format") || "number").toLowerCase() === "time" ? this.formatTime(e) : String(Math.round(e * 100) / 100);
+  }
+  updateBubble() {
+    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)`;
+  }
+  bind() {
+    if (!this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector(".range-wrap"), t = this.shadowRoot.querySelector("input");
+    if (!e || !t) return;
+    const r = () => {
+      this.hasAttribute("bubble") && (e.classList.add("show-bubble"), this.updateBubble());
+    }, a = () => e.classList.remove("show-bubble");
+    t.oninput = () => {
+      this.setAttribute("value", t.value), r(), this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: Number(t.value || "0") },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.updateBubble();
+    }, t.onchange = () => {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: Number(t.value || "0") },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, t.onpointerdown = r, t.onpointerup = a, t.onfocus = r, t.onblur = a, t.onmouseenter = r, t.onmouseleave = a, t.onmousemove = () => {
+      e.classList.contains("show-bubble") && this.updateBubble();
+    }, this.updateBubble();
+  }
+  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";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: inline-flex;
+          width: 100%;
+        }
+        .range-wrap {
+          position: relative;
+          width: 100%;
+          min-width: 0;
+          display: flex;
+          align-items: center;
+        }
+        input[type="range"] {
+          width: 100%;
+          margin: 0;
+          accent-color: var(--range-input-accent-color, var(--grey-1200));
+        }
+        [data-role="bubble"] {
+          position: absolute;
+          bottom: calc(100% + var(--space-100));
+          left: 0;
+          transform: translateX(-50%);
+          white-space: nowrap;
+          pointer-events: none;
+          opacity: 0;
+          transition: opacity var(--speed-200) ease;
+          border: var(--border-thin);
+          border-color: var(--range-input-bubble-border-color, var(--border-color));
+          border-radius: var(--radius-100);
+          background: var(--range-input-bubble-background, var(--surface-elevated-100));
+          padding: var(--space-025) var(--space-100);
+          z-index: 2;
+        }
+        .range-wrap.show-bubble [data-role="bubble"] {
+          opacity: 1;
+        }
+      </style>
+      <div class="range-wrap">
+        <input
+          type="range"
+          min="${e}"
+          max="${t}"
+          value="${r}"
+          step="${a}"
+          aria-label="${o.replace(/"/g, "&quot;")}"
+          ${i ? "disabled" : ""}
+        />
+        <mui-body data-role="bubble" size="x-small" variant="optional" aria-hidden="true">0</mui-body>
+      </div>
+    `;
+  }
+}
+customElements.get("mui-range-input") || customElements.define("mui-range-input", u);

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

@@ -1,4 +1,4 @@
-class s extends HTMLElement {
+class o extends HTMLElement {
   static get observedAttributes() {
     return ["length", "weight", "direction"];
   }
@@ -6,11 +6,15 @@ class s extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.shadowRoot && (this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.setAttribute("role", "presentation"), this.updateStyles());
+    this.shadowRoot && (this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.setAttribute("role", "presentation"), this.syncContextAttributes(), this.updateStyles());
   }
   attributeChangedCallback() {
     this.updateStyles();
   }
+  syncContextAttributes() {
+    const t = !!this.closest("mui-card"), e = !!this.closest("mui-form-section");
+    this.toggleAttribute("in-card", t), this.toggleAttribute("in-form-section", e);
+  }
   updateStyles() {
     const t = this.getAttribute("length") || "100%", e = this.getAttribute("weight") || "1px", i = (
       /*css*/
@@ -19,6 +23,10 @@ class s extends HTMLElement {
         display: block;
         background: var(--border-color);
       }
+      :host([in-card]),
+      :host([in-form-section]) {
+        background: color-mix(in srgb, var(--border-color) 50%, transparent);
+      }
       :host([direction="horizontal"]) {
         width: ${t};
         height: ${e};
@@ -32,4 +40,4 @@ class s extends HTMLElement {
     this.shadowRoot.innerHTML = `<style>${i}</style>`;
   }
 }
-customElements.get("mui-rule") || customElements.define("mui-rule", s);
+customElements.get("mui-rule") || customElements.define("mui-rule", o);

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

@@ -1,44 +1,44 @@
 import { getPartMap as s } from "../../utils/part-map/index.js";
 import "../mui-icons/down-chevron/index.js";
-class p extends HTMLElement {
+class x extends HTMLElement {
   constructor() {
     super(), this.partMap = "", this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["name", "value", "id", "label", "options", "disabled", "hide-label", "variant"];
+    return ["name", "value", "id", "label", "options", "disabled", "hide-label", "variant", "optional", "size"];
   }
   async connectedCallback() {
-    await this.waitForPartMap(), this.partMap = s("text", "visual"), this.render(), this.setupListener();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), this.partMap = s("text", "visual"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, r, t) {
-    if (!this.shadowRoot || r === t) return;
+  attributeChangedCallback(e, t, r) {
+    if (!this.shadowRoot || t === r) return;
     const o = this.shadowRoot.querySelector("select");
     if (e === "value" && o) {
-      o.value = t || "";
+      o.value = r || "";
       return;
     }
     if (e === "disabled" && o) {
-      t === null || t === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
+      r === null || r === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
       return;
     }
-    ["options", "label", "hide-label", "variant"].includes(e) && (this.render(), this.setupListener());
+    ["options", "label", "hide-label", "variant", "optional", "size"].includes(e) && (this.render(), this.setupListener());
   }
   cleanupListeners() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("select");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("select");
     e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("select");
-    e && (this.cleanupListeners(), this._changeHandler = (r) => {
-      const t = r.target;
-      this.setAttribute("value", t.value);
+    e && (this.cleanupListeners(), this._changeHandler = (t) => {
+      const r = t.target;
+      this.setAttribute("value", r.value);
       const o = {
-        detail: { value: t.value },
+        detail: { value: r.value },
         bubbles: !0,
         composed: !0
       };
@@ -47,16 +47,21 @@ class p extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("name") || "", r = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, t = this.getAttribute("label") || "", o = this.getAttribute("value") || "", i = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), d = this.getAttribute("options") || "[]", n = this.getAttribute("variant") || "", h = n || "", u = i && t ? `aria-label="${t}"` : "";
-    let l = [];
+    const e = this.getAttribute("name") || "", t = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, r = this.getAttribute("label") || "", o = this.getAttribute("value") || "", i = this.hasAttribute("hide-label"), h = this.hasAttribute("optional"), v = this.hasAttribute("disabled"), p = this.getAttribute("options") || "[]", n = this.getAttribute("size") || "medium", l = ["x-small", "small", "medium", "large"].includes(n) ? n : "medium", u = {
+      "x-small": "xx-small",
+      small: "x-small",
+      medium: "x-small",
+      large: "small"
+    }[l] || "x-small", c = this.getAttribute("variant") || "", b = c || "", m = i && r ? `aria-label="${r}"` : "";
+    let d = [];
     try {
-      l = JSON.parse(d);
+      d = JSON.parse(p);
     } catch (a) {
       console.error("Invalid JSON in options attribute", a);
     }
-    const b = l.map(
+    const g = d.map(
       (a) => `<option value="${a.value}" ${a.value === o ? "selected" : ""} ${a.disabled ? "disabled" : ""}>${a.label}</option>`
-    ).join(""), v = (
+    ).join(""), f = (
       /*html*/
       `
       <style>
@@ -85,6 +90,30 @@ class p extends HTMLElement {
           box-sizing: border-box;
           appearance: none;
         }
+        select.size-x-small {
+          min-height: var(--action-icon-only-size-x-small);
+          padding: var(--action-padding-x-small);
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        select.size-small {
+          min-height: var(--action-icon-only-size-small);
+          padding: var(--action-padding-small);
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        select.size-medium {
+          min-height: 4.4rem;
+          padding: var(--space-200) var(--space-300);
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
+        select.size-large {
+          min-height: var(--action-icon-only-size-large);
+          padding: var(--space-300) var(--space-400);
+          font-size: var(--text-font-size-l);
+          line-height: var(--text-line-height-l);
+        }
         select:hover {
           border-color: var(--form-default-border-color-hover);
           color: var(--form-default-text-color-hover);
@@ -138,6 +167,24 @@ class p extends HTMLElement {
           white-space: nowrap;
           border: 0;
         }
+        .optional {
+          color: var(--text-color-optional);
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-050);
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          text-transform: uppercase;
+          font-weight: var(--font-weight-medium);
+        }
+        .optional-dot {
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+        .optional-text {
+          transform: translateY(calc(var(--stroke-size-100) * -1));
+        }
         .chevron {
           position: absolute; 
           right: var(--space-300);
@@ -150,6 +197,18 @@ class p extends HTMLElement {
           box-shadow: -4px 0 4px 0 var(--input-background);
           pointer-events: none;
         }
+        :host([size="x-small"]) .chevron,
+        :host([size="small"]) .chevron {
+          right: var(--space-200);
+          padding: var(--space-000);
+          box-shadow: none;
+        }
+        :host([size="large"]) .chevron {
+          right: var(--space-400);
+          padding: var(--space-300);
+          padding-left: var(--space-000);
+          padding-right: var(--space-000);
+        }
 
         select:disabled + .chevron {
           background: transparent;
@@ -192,29 +251,29 @@ class p extends HTMLElement {
         /* ========================================================================== */
 
       </style>
-      ${t ? (
+      ${r ? (
         /*html*/
-        `<label for="${r}" class="${i ? "vh" : ""}">${t}</label>`
+        `<label for="${t}" class="${i ? "vh" : ""}">${r}${h ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>`
       ) : ""}
       <div style="position: relative;">
-        <select class="${h}" part="${this.partMap || ""}" name="${e}" id="${r}" ${u} 
-        ${c ? "disabled" : ""}>
-          ${b}
+        <select class="${[b, `size-${l}`].filter(Boolean).join(" ")}" part="${this.partMap || ""}" name="${e}" id="${t}" ${m} 
+        ${v ? "disabled" : ""}>
+          ${g}
         </select>
-        <mui-icon-down-chevron class="chevron" size="x-small"></mui-icon-down-chevron>
+        <mui-icon-down-chevron class="chevron" size="${u}"></mui-icon-down-chevron>
       </div>
     `
     );
-    this.shadowRoot.innerHTML = v;
+    this.shadowRoot.innerHTML = f;
   }
   waitForPartMap() {
     return new Promise((e) => {
       if (typeof s == "function") return e();
-      const r = () => {
-        typeof s == "function" ? e() : requestAnimationFrame(r);
+      const t = () => {
+        typeof s == "function" ? e() : requestAnimationFrame(t);
       };
-      r();
+      t();
     });
   }
 }
-customElements.get("mui-select") || customElements.define("mui-select", p);
+customElements.get("mui-select") || customElements.define("mui-select", x);