@muibook/components 6.1.0 → 7.0.0

package/dist/esm/components/mui-icons/close/index.js

@@ -17,9 +17,9 @@ class c extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, i = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/down-arrow-circle/index.js

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/down-chevron/index.js

@@ -17,9 +17,9 @@ class n extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/ellipsis/index.js

@@ -17,9 +17,9 @@ class r extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/gear/index.js

@@ -17,9 +17,9 @@ class o extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[l] || l || "var(--icon-color-default)", e = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = e[c] ?? e.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/globe/index.js

@@ -17,9 +17,9 @@ class a extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", c = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, i = c[e] ?? c.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/grid/index.js

@@ -17,9 +17,9 @@ class r extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, o = i[c] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/info/index.js

@@ -17,9 +17,9 @@ class c extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/left-arrow/index.js

@@ -17,9 +17,9 @@ class r extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/left-chevron/index.js

@@ -17,9 +17,9 @@ class r extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/left-sidebar/index.js

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, o = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/menu/index.js

@@ -17,9 +17,9 @@ class n extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

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

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[e] || e || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, i = s[t] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/moon/index.js

@@ -17,9 +17,9 @@ class n extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/notification/index.js

@@ -17,9 +17,9 @@ class n extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/right-chevron/index.js

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/stop/index.js

@@ -17,9 +17,9 @@ class c extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, i = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/subtract/index.js

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/sun/index.js

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, i = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

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

@@ -7,18 +7,18 @@ class r extends HTMLElement {
   }
   connectedCallback() {
     this.classList.add("mui-icon"), this.shadowRoot.innerHTML || this.render(), this.attributeChangedCallback("size", null, this.getAttribute("size"));
-    const t = this.shadowRoot.querySelector('slot[name="start"]'), s = this.shadowRoot.querySelector('slot[name="end"]');
-    t.addEventListener("slotchange", () => this.applySize()), s.addEventListener("slotchange", () => this.applySize());
+    const t = this.shadowRoot.querySelector('slot[name="start"]'), e = this.shadowRoot.querySelector('slot[name="end"]');
+    t.addEventListener("slotchange", () => this.applySize()), e.addEventListener("slotchange", () => this.applySize());
   }
-  attributeChangedCallback(t, s, o) {
+  attributeChangedCallback(t, e, o) {
     if (t === "size") {
-      const e = this.getAttribute("size") || "small", l = {
+      const s = this.getAttribute("size") || "medium", i = {
         "x-small": "1.6rem",
-        small: "2.4rem",
-        medium: "3.6rem",
-        large: "4.8rem"
-      }, i = l[e] ?? l.small;
-      this.style.setProperty("--icon-toggle-size", i), this.applySize();
+        small: "2.1rem",
+        medium: "2.4rem",
+        large: "2.8rem"
+      }, l = i[s] ?? i.medium;
+      this.style.setProperty("--icon-toggle-size", l), this.applySize();
     }
   }
   get toggle() {
@@ -37,10 +37,10 @@ class r extends HTMLElement {
   /* PRIVATE: force size="small" on all assigned elements               */
   /* ------------------------------------------------------------------ */
   applySize() {
-    const t = this.getAttribute("size") || "small";
+    const t = this.getAttribute("size") || "medium";
     this.shadowRoot.querySelectorAll("slot").forEach((o) => {
-      o.assignedElements({ flatten: !0 }).forEach((e) => {
-        (!e.hasAttribute("size") || e.getAttribute("size") === "small") && e.setAttribute("size", t);
+      o.assignedElements({ flatten: !0 }).forEach((s) => {
+        s.setAttribute("size", t);
       });
     });
   }
@@ -51,8 +51,8 @@ class r extends HTMLElement {
         :host {
           display: inline-flex;
           position: relative;
-          height: var(--icon-toggle-size, 2.4rem);
-          width: var(--icon-toggle-size, 2.4rem);
+          height: var(--icon-toggle-size);
+          width: var(--icon-toggle-size);
         }
 
         ::slotted(*) {

package/dist/esm/components/mui-icons/translate/index.js

@@ -17,9 +17,9 @@ class r extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", e = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, a = e[c] ?? e.small, s = "M31.727 14.897c2.36 0 4.273 1.888 4.273 4.217v8.771l-.006.219c-.111 2.155-1.863 3.883-4.047 3.993l-.22.007-4.19-.001c-1.416 1.214-3.194 2.634-4.596 3.462-.246.145-.67.374-1.138.422-1.328.133-2.067-.772-2.067-1.937v-1.953h-.787c-2.257-.113-4.052-1.956-4.053-4.212v-8.77c0-2.33 1.914-4.218 4.273-4.218zm-6.279 4.158c-1.032 0-1.692.527-2.054 1.647l-1.747 5.163c-.253.747.044 1.802 1.186 1.802.68 0 1.088-.385 1.264-1.164l.197-.571h2.361l.197.571c.176.78.584 1.164 1.276 1.164 1.142 0 1.427-1.066 1.186-1.802l-1.758-5.163c-.352-1.097-1.043-1.647-2.108-1.647m.746 4.977h-1.438l.692-2.692h.055zM19.056.006c2.523.127 4.53 2.186 4.53 4.707v8.942h-2.98V4.714c0-.92-.767-1.733-1.796-1.733H4.775c-1.028 0-1.795.812-1.796 1.733v9.803l.008.166c.082.812.756 1.5 1.657 1.562h.764a2.98 2.98 0 0 1 2.98 2.98v.724c1.18-.81 2.57-1.924 3.802-2.98l.208-.163a3 3 0 0 1 1.73-.554h.038a4.64 4.64 0 0 0-.51 2.117v1.263c-1.493 1.258-3.25 2.634-4.665 3.469l-.241.135c-.274.143-.638.297-1.03.337l-.272.014c-1.313.007-2.04-.959-2.04-2.18v-2.181H4.53l-.235-.019c-2.334-.23-4.173-2.119-4.29-4.455L0 14.517V4.713C0 2.11 2.138.001 4.775 0H18.81zm-3.45 7.436c.593 0 1.031.406 1.032.955 0 .56-.45.988-1.032.988h-.737a7.4 7.4 0 0 1-1.494 2.746 7.9 7.9 0 0 0 2.373.957c.637.121.956.626.791 1.252-.143.549-.725.813-1.428.66a9 9 0 0 1-3.208-1.473 9.2 9.2 0 0 1-3.361 1.482c-.604.165-1.165-.13-1.32-.679a1.03 1.03 0 0 1 .804-1.242c.945-.241 1.724-.561 2.372-.957a8.2 8.2 0 0 1-1.493-2.746H8.17c-.582 0-1.033-.428-1.033-.988 0-.55.44-.955 1.033-.955zm-4.625 1.943c.22.527.538 1.044.922 1.505.384-.472.682-.978.89-1.505zm-.374-5.24c.495-.263 1.077-.054 1.352.506l.516 1.076c.241.505.043 1.088-.506 1.363-.494.219-1.065 0-1.318-.527l-.505-1.067a.99.99 0 0 1 .461-1.351", o = "M31.727 14.897c2.36 0 4.273 1.888 4.273 4.217v8.771l-.006.218c-.111 2.156-1.863 3.884-4.047 3.994l-.22.007-4.19-.001c-1.416 1.214-3.194 2.634-4.596 3.462-.246.145-.67.375-1.138.422-1.328.134-2.067-.773-2.067-1.937v-1.953h-.787c-2.257-.114-4.052-1.956-4.053-4.212v-8.77c0-2.33 1.913-4.218 4.273-4.218zm-9.84 5.891c-.592 0-1.032.407-1.032.956 0 .56.45.989 1.033.989h.736a8.2 8.2 0 0 0 1.493 2.746c-.648.395-1.428.715-2.372.956a1.03 1.03 0 0 0-.803 1.242c.154.549.715.844 1.32.68a9.2 9.2 0 0 0 3.36-1.483 9 9 0 0 0 3.209 1.472c.703.154 1.285-.11 1.428-.659.164-.626-.155-1.13-.792-1.252a7.9 7.9 0 0 1-2.372-.956 7.4 7.4 0 0 0 1.493-2.746h.737c.582 0 1.032-.43 1.032-.99 0-.548-.439-.954-1.032-.955zm4.626 1.945a5.7 5.7 0 0 1-.89 1.504 6 6 0 0 1-.923-1.504zM19.056.006c2.523.127 4.53 2.186 4.53 4.707v8.942h-2.98V4.713c0-.92-.767-1.733-1.796-1.733H4.775c-1.028 0-1.795.813-1.795 1.733v9.803l.007.166c.082.812.756 1.5 1.656 1.563h.765a2.98 2.98 0 0 1 2.98 2.98v.722c1.18-.809 2.57-1.922 3.802-2.979l.208-.163a2.98 2.98 0 0 1 1.731-.554h.037a4.64 4.64 0 0 0-.51 2.118v1.262c-1.494 1.258-3.25 2.634-4.665 3.47l-.24.134c-.275.143-.639.297-1.031.337l-.272.014c-1.314.007-2.04-.959-2.04-2.18v-2.181H4.53l-.235-.019c-2.334-.23-4.173-2.119-4.29-4.455L0 14.517V4.713C0 2.11 2.138 0 4.775 0H18.81zm6.621 17.992c-.274-.56-.857-.77-1.351-.506a.99.99 0 0 0-.46 1.352l.505 1.066c.252.526.823.746 1.317.527.55-.275.748-.857.506-1.363zM11.831 5.338c1.065 0 1.756.55 2.108 1.647l1.758 5.163c.241.736-.044 1.801-1.186 1.802-.692 0-1.1-.384-1.275-1.164l-.198-.57h-2.361l-.198.57c-.176.78-.583 1.164-1.263 1.164-1.143 0-1.44-1.055-1.187-1.802l1.747-5.163c.362-1.12 1.022-1.647 2.055-1.647m-.693 4.976h1.44l-.693-2.691h-.054z";
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/up-arrow/index.js

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/up-chevron/index.js

@@ -17,9 +17,9 @@ class r extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

package/dist/esm/components/mui-icons/warning/index.js

@@ -17,9 +17,9 @@ class n extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

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

@@ -8,18 +8,18 @@ class m extends HTMLElement {
   connectedCallback() {
     this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, s, r) {
-    var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-    t && (e === "value" && (t.value = r ?? ""), e === "disabled" && (r === null || r === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "")), (e === "type" || e === "placeholder" || e === "label" || e === "hide-label") && (this.render(), this.setupListener()));
+  attributeChangedCallback(e, s, o) {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    t && (e === "value" && (t.value = o ?? ""), e === "disabled" && (o === null || o === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "")), (e === "type" || e === "placeholder" || e === "label" || e === "hide-label") && (this.render(), this.setupListener()));
   }
   setupListener() {
-    var r, t;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    var o, t;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
     if (!e) return;
     const s = e.cloneNode(!0);
-    (t = e.parentNode) == null || t.replaceChild(s, e), s.addEventListener("input", (o) => {
-      const a = o.target;
+    (t = e.parentNode) == null || t.replaceChild(s, e), s.addEventListener("input", (r) => {
+      const a = r.target;
       this.dispatchEvent(
         new CustomEvent("input", {
           detail: { value: a.value },
@@ -27,8 +27,8 @@ class m extends HTMLElement {
           composed: !0
         })
       );
-    }), s.addEventListener("change", (o) => {
-      const a = o.target;
+    }), s.addEventListener("change", (r) => {
+      const a = r.target;
       this.dispatchEvent(
         new CustomEvent("change", {
           detail: { value: a.value },
@@ -38,8 +38,23 @@ class m extends HTMLElement {
       );
     });
   }
+  updateSlottedButtons() {
+    requestAnimationFrame(() => {
+      var t, r;
+      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="before"]'), s = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="after"]'), o = (a) => {
+        if (!a) return;
+        a.assignedNodes({ flatten: !0 }).forEach((l) => {
+          if (l.nodeType === Node.ELEMENT_NODE) {
+            const i = l, n = i.tagName.toLowerCase();
+            (n === "mui-button" || n === "mui-link") && (i.setAttribute("usage", "input"), i.setAttribute("size", "medium"), i.removeAttribute("variant"), i.removeAttribute("weight"));
+          }
+        });
+      };
+      o(e), o(s);
+    });
+  }
   render() {
-    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], s = this.getAttribute("type") || "text", r = e.includes(s) ? s : "text", t = this.getAttribute("name") || "", o = this.getAttribute("value") || "", a = this.getAttribute("placeholder") || "", l = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", n = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), u = n && i ? `aria-label="${i}"` : "", d = this.getAttribute("variant") || "", b = d || "", h = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, v = [b, h ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), f = (
+    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], s = this.getAttribute("type") || "text", o = e.includes(s) ? s : "text", t = this.getAttribute("name") || "", r = this.getAttribute("value") || "", a = this.getAttribute("placeholder") || "", d = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, l = this.getAttribute("label") || "", i = this.hasAttribute("hide-label"), n = this.hasAttribute("disabled"), c = i && l ? `aria-label="${l}"` : "", u = this.getAttribute("variant") || "", b = u || "", h = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, f = [b, h ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), v = (
       /*html*/
       `
       <style>
@@ -163,39 +178,47 @@ class m extends HTMLElement {
         /* is focusable will be addressed.                                            */
         /* ========================================================================== */
 
-           slot[name="before"]::slotted(*:focus),
-           input:focus,
-           slot[name="after"]::slotted(*:focus) { z-index: 1; }
+        slot[name="before"]::slotted(*:focus),
+        input:focus,
+        slot[name="after"]::slotted(*:focus),
+        slot[name="before"]::slotted(*:hover),
+        input:hover,
+        slot[name="after"]::slotted(*:hover) { z-index: 1; }
+
+      /* Ensure feedback styles appear above SELECT and focusable Items */
+        input.success,
+        input.warning,
+        input.error {
+          z-index: 1;
+        }
+
 
-          /* Ensure feedback styles appear above SELECT and focusable Items */
-           input.success,
-           input.warning,
-           input.error {
-             z-index: 1;
-           }
+        /* Slotted items */
+        slot[name="before"]::slotted(*),
+        slot[name="after"]::slotted(*) { flex: none; }
 
         /* ========================================================================== */
         
 
       </style>
-      ${i ? `<label for="${l}" class="${n ? "vh" : ""}">${i}</label>` : ""}
+      ${l ? `<label for="${d}" class="${i ? "vh" : ""}">${l}</label>` : ""}
     <div class="input-wrapper">
       <slot name="before"></slot>
       <input
-        class="${v}"
-        type="${r}"
+        class="${f}"
+        type="${o}"
         name="${t}"
-        id="${l}"
-        value="${o}"
+        id="${d}"
+        value="${r}"
         placeholder="${a}"
-        ${c ? 'disabled aria-disabled="true"' : ""}
-        ${u}
+        ${n ? 'disabled aria-disabled="true"' : ""}
+        ${c}
       />
       <slot name="after"></slot>
     </div>
     `
     );
-    this.shadowRoot && (this.shadowRoot.innerHTML = f);
+    this.shadowRoot && (this.shadowRoot.innerHTML = v, this.updateSlottedButtons());
   }
 }
 customElements.get("mui-input") || customElements.define("mui-input", m);