@muibook/components 20.0.0 → 20.1.0

package/dist/esm/components/mui-icons/speaker-two-wave/index.js

@@ -0,0 +1,5 @@
+import { defineMuiIcon as a } from "../icon-helper/index.js";
+a(
+  "mui-icon-speaker-two-wave",
+  '<path d="M15.44 22.5q-.493 0-.903-.197-.402-.187-.867-.616l-3.432-3.191a.24.24 0 0 0-.134-.036H7.699q-1.305 0-2.002-.733T5 15.645v-3.29q0-1.35.697-2.073.697-.733 2.002-.733h2.414q.053 0 .134-.063l3.423-3.164q.483-.447.894-.634.411-.188.867-.188.768 0 1.287.527.518.519.518 1.278v13.398q0 .76-.518 1.279a1.74 1.74 0 0 1-1.278.518m3.79-3.825a1.36 1.36 0 0 1-.671-.975q-.108-.634.366-1.465.287-.492.438-1.064.153-.572.152-1.18 0-.607-.152-1.18a4.1 4.1 0 0 0-.438-1.063q-.482-.831-.375-1.466.116-.644.68-.974a1.5 1.5 0 0 1 1.09-.215q.572.107.884.536a7.6 7.6 0 0 1 1.002 2.038q.366 1.11.366 2.324 0 1.215-.366 2.324a7.4 7.4 0 0 1-1.001 2.02 1.33 1.33 0 0 1-.885.554 1.56 1.56 0 0 1-1.09-.214m4.736 2.645q-.625-.348-.706-1.01-.08-.67.322-1.35.634-1.072.983-2.341a9.9 9.9 0 0 0 .349-2.628q0-1.367-.349-2.628a9.7 9.7 0 0 0-.983-2.35q-.402-.67-.322-1.341t.706-1.01a1.57 1.57 0 0 1 1.127-.179q.58.125.92.653.938 1.483 1.44 3.226.5 1.743.5 3.63 0 1.885-.5 3.628a12.3 12.3 0 0 1-1.44 3.217 1.42 1.42 0 0 1-.92.653q-.582.135-1.127-.17"></path>'
+);

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

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -12,7 +12,7 @@ class r extends HTMLElement {
     (t === "size" || t === "color") && e !== i && this.render();
   }
   render() {
-    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), r = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[e] || e || "var(--icon-color-default)", s = {
@@ -20,7 +20,9 @@ class r extends HTMLElement {
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
-      large: "2.8rem"
+      large: "2.8rem",
+      "x-large": "3.6rem",
+      "xx-large": "4.8rem"
     }, o = s[t] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
@@ -31,7 +33,7 @@ class r extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${l};
+          fill: ${r};
         }
         svg {
           width: 100%;
@@ -53,4 +55,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-spinner") || customElements.define("mui-icon-spinner", r);
+customElements.get("mui-icon-spinner") || customElements.define("mui-icon-spinner", l);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as i } from "../icon-helper/index.js";
+i(
+  "mui-icon-stop-fill",
+  '<path d="M6.046 19.8V8.2q0-1.026.576-1.593.586-.566 1.611-.566h11.534q1.035 0 1.61.566.577.567.577 1.592v11.602q0 1.015-.576 1.582-.576.576-1.611.576H8.233q-1.025 0-1.61-.576-.577-.567-.577-1.582"></path>'
+);

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class o extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -12,7 +12,7 @@ class l extends HTMLElement {
     (e === "size" || e === "color") && t !== c && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), o = t && {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
@@ -31,7 +31,7 @@ class l extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${o};
+          fill: ${l};
         }
         svg {
           width: 100%;
@@ -45,7 +45,7 @@ class l extends HTMLElement {
         viewBox="0 0 36 36"
       >
         <path
-          d="M17.993 7.606c-1.081 0-1.994-.914-1.994-1.996V3.024c0-1.096.913-2.024 1.994-2.024 1.095 0 2.008.928 2.008 2.024V5.61c0 1.082-.913 1.996-2.008 1.996m7.373 3.12c-.772-.773-.787-2.094-.042-2.839l1.84-1.841c.758-.76 2.064-.787 2.808-.042.773.773.787 2.08.043 2.839l-1.826 1.841c-.773.773-2.079.787-2.823.042m-14.746 0c-.744.745-2.05.731-2.809-.042L5.986 8.83c-.745-.745-.73-2.052.042-2.825.744-.745 2.05-.717 2.808.042l1.826 1.841c.744.745.73 2.066-.042 2.84m7.373 15.377c-4.424 0-8.075-3.655-8.075-8.096s3.651-8.096 8.075-8.096c4.438 0 8.09 3.655 8.09 8.096s-3.652 8.096-8.09 8.096m10.42-8.096c0-1.082.913-1.996 1.995-1.996h2.584c1.095 0 2.008.914 2.008 1.996s-.913 1.996-2.008 1.996h-2.584c-1.082 0-1.995-.914-1.995-1.996m-20.812 0c0 1.082-.927 1.996-2.023 1.996H2.994C1.913 20.003 1 19.089 1 18.007s.913-1.996 1.994-1.996h2.584c1.096 0 2.023.914 2.023 1.996m17.723 7.337c.772-.773 2.078-.787 2.837-.042L30 27.143c.772.759.786 2.066.041 2.811-.772.773-2.078.787-2.836.042l-1.84-1.827c-.772-.773-.787-2.08-.042-2.825m-14.662 0c.744.745.73 2.052-.042 2.825l-1.84 1.827c-.744.745-2.05.731-2.837-.042-.73-.745-.73-2.066.043-2.825l1.853-1.827c.745-.745 2.05-.731 2.823.042m7.331 3.05c1.095 0 2.008.914 2.008 2.01v2.586c0 1.082-.913 2.01-2.008 2.01-1.081 0-1.994-.928-1.994-2.01v-2.586c0-1.096.913-2.01 1.994-2.01"
+          d="M17.994 8.794c-.959 0-1.768-.81-1.768-1.768v-2.29c0-.972.81-1.793 1.768-1.793.97 0 1.78.821 1.78 1.792v2.291c0 .959-.81 1.768-1.78 1.768m6.536 2.763c-.685-.684-.698-1.854-.038-2.514l1.631-1.631c.672-.672 1.83-.697 2.49-.037.685.684.697 1.842.037 2.514l-1.618 1.631c-.685.685-1.843.697-2.502.037m-13.072 0c-.66.66-1.818.648-2.49-.037L7.35 9.877c-.66-.66-.648-1.818.037-2.502.66-.66 1.818-.635 2.49.037l1.618 1.63c.66.66.648 1.83-.037 2.515m6.536 13.62c-3.922 0-7.158-3.237-7.158-7.17 0-3.935 3.236-7.172 7.158-7.172 3.934 0 7.17 3.237 7.17 7.171s-3.236 7.171-7.17 7.171m9.237-7.17c0-.96.81-1.769 1.768-1.769h2.29c.972 0 1.78.81 1.78 1.768 0 .959-.808 1.768-1.78 1.768H29c-.959 0-1.768-.81-1.768-1.768m-18.45 0c0 .958-.821 1.767-1.792 1.767H4.698c-.959 0-1.768-.81-1.768-1.768s.81-1.768 1.768-1.768h2.29c.972 0 1.793.81 1.793 1.768m15.711 6.498c.685-.685 1.843-.697 2.515-.038l1.63 1.631c.686.672.698 1.83.038 2.49-.684.685-1.842.697-2.515.037l-1.63-1.618c-.685-.685-.698-1.842-.038-2.502m-12.997 0c.66.66.648 1.817-.037 2.502l-1.63 1.618c-.66.66-1.819.648-2.516-.037-.647-.66-.647-1.83.038-2.502l1.643-1.619c.66-.66 1.818-.647 2.502.038m6.499 2.701c.97 0 1.78.81 1.78 1.78v2.291c0 .959-.81 1.78-1.78 1.78-.959 0-1.768-.821-1.768-1.78v-2.29c0-.972.81-1.78 1.768-1.78"
         ></path>
       </svg>
 
@@ -53,4 +53,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-sun") || customElements.define("mui-icon-sun", l);
+customElements.get("mui-icon-sun") || customElements.define("mui-icon-sun", o);

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

@@ -0,0 +1,54 @@
+class a extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "xx-small": "1.3rem",
+      "x-small": "1.6rem",
+      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*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M17.993 32.585q-3.01 0-5.663-1.146a14.7 14.7 0 0 1-4.64-3.136 14.9 14.9 0 0 1-3.15-4.64Q3.41 21.01 3.409 18q0-2.528.815-4.793a14.6 14.6 0 0 1 2.251-4.115q.594-.83 1.423-.912.842-.097 1.436.47.608.58.539 1.27-.056.69-.566 1.437-1.05 1.38-1.658 3.066A10.4 10.4 0 0 0 7.041 18q0 2.28.842 4.268a11.2 11.2 0 0 0 2.362 3.48 11.1 11.1 0 0 0 3.494 2.348 10.6 10.6 0 0 0 4.254.856q2.28 0 4.254-.856a10.9 10.9 0 0 0 3.494-2.348 11.3 11.3 0 0 0 2.362-3.494q.855-1.989.856-4.254 0-2.28-.814-4.185a10.7 10.7 0 0 0-2.183-3.328 11.2 11.2 0 0 0-3.107-2.307q-1.74-.87-3.605-1.05v1.893q0 .649-.414 1.09-.415.429-1.064.429-.65 0-1.063-.428a1.54 1.54 0 0 1-.415-1.091V5.03q0-.759.456-1.188.47-.428 1.257-.428 3.024 0 5.663 1.133a14.4 14.4 0 0 1 4.64 3.135 14.55 14.55 0 0 1 3.15 4.654Q32.59 14.975 32.591 18q0 3.01-1.147 5.663a14.7 14.7 0 0 1-7.79 7.776q-2.638 1.146-5.662 1.146m0-12.085q-.676 0-1.243-.332a2.86 2.86 0 0 1-.94-.939l-3.866-6.077q-.304-.51-.166-.925a.83.83 0 0 1 .552-.566q.428-.153.926.18l6.09 4.046a2.5 2.5 0 0 1 .857.925q.304.552.304 1.188 0 1.036-.732 1.768a2.42 2.42 0 0 1-1.782.732"
+        ></path>
+      </svg>
+    `);
+  }
+}
+customElements.get("mui-icon-timer") || customElements.define("mui-icon-timer", a);

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

@@ -1,6 +1,6 @@
-class a extends HTMLElement {
+class i extends HTMLElement {
   static get observedAttributes() {
-    return ["toggle", "rotate", "size"];
+    return ["toggle", "rotate", "morph", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -18,8 +18,8 @@ class a extends HTMLElement {
         small: "2.1rem",
         medium: "2.4rem",
         large: "2.8rem"
-      }, i = l[s] ?? l.medium;
-      this.style.setProperty("--icon-toggle-size", i), this.applySize();
+      }, r = l[s] ?? l.medium;
+      this.style.setProperty("--icon-toggle-size", r), this.applySize();
     }
   }
   get toggle() {
@@ -34,6 +34,12 @@ class a extends HTMLElement {
   set rotate(t) {
     this.toggleAttribute("rotate", !!t);
   }
+  get morph() {
+    return this.hasAttribute("morph");
+  }
+  set morph(t) {
+    this.toggleAttribute("morph", !!t);
+  }
   /* ------------------------------------------------------------------ */
   /* PRIVATE: force size="small" on all assigned elements               */
   /* ------------------------------------------------------------------ */
@@ -60,10 +66,14 @@ class a extends HTMLElement {
           position: absolute;
           transform-origin: 50% 50%;
           translate: 0 0;
-          transition: transform var(--speed-200) ease-in-out, translate var(--speed-200) ease-in-out;
           fill: currentColor; 
         }
 
+        :host([morph]) ::slotted(*),
+        :host([rotate]) ::slotted(*) {
+          transition: transform var(--speed-200) ease-in-out, translate var(--speed-200) ease-in-out;
+        }
+
         ::slotted([slot="start"]) {
           transform: scale(1);
         }
@@ -90,4 +100,4 @@ class a extends HTMLElement {
     `;
   }
 }
-customElements.get("mui-icon-toggle") || customElements.define("mui-icon-toggle", a);
+customElements.get("mui-icon-toggle") || customElements.define("mui-icon-toggle", i);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as i } from "../icon-helper/index.js";
+i(
+  "mui-icon-vertical-ellipsis",
+  '<path d="M11.622 6.902a2.375 2.375 0 0 1 2.373-2.372 2.383 2.383 0 0 1 2.383 2.372 2.377 2.377 0 1 1-4.755 0m0 6.628a2.37 2.37 0 0 1 2.373-2.373 2.377 2.377 0 1 1 0 4.755 2.377 2.377 0 0 1-2.373-2.382m0 6.627a2.377 2.377 0 1 1 2.373 2.373 2.375 2.375 0 0 1-2.373-2.373"></path>'
+);

package/dist/esm/components/mui-illustrations/trash/index.js

@@ -8,19 +8,20 @@ class c extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(l, t, a) {
-    (l === "size" || l === "color") && t !== a && this.render();
+  attributeChangedCallback(t, l, a) {
+    (t === "size" || t === "color") && l !== a && this.render();
   }
   render() {
-    const l = this.getAttribute("size") || "medium", t = this.getAttribute("color"), a = {
+    const t = this.getAttribute("size") || "medium", l = this.getAttribute("color"), a = {
       default: "var(--illustration-main-color-default)",
       inverted: "var(--illustration-main-color-inverted)"
-    }, o = t && a[t] || t || a.default, s = "color-mix(in srgb, var(--illustration-main-color) 35%, transparent)", e = "color-mix(in srgb, var(--illustration-main-color) 14%, transparent)", n = t === "inverted" ? "var(--illustration-shadow-color-inverted)" : "var(--illustration-shadow-color-default)", i = {
+    }, o = l && a[l] || l || a.default, s = "color-mix(in srgb, var(--illustration-main-color) 35%, transparent)", e = "color-mix(in srgb, var(--illustration-main-color) 14%, transparent)", n = l === "inverted" ? "var(--illustration-shadow-color-inverted)" : "var(--illustration-shadow-color-default)", i = {
+      "x-small": "var(--illustration-size-x-small)",
       small: "var(--illustration-size-small)",
       medium: "var(--illustration-size-medium)",
       large: "var(--illustration-size-large)",
       "x-large": "var(--illustration-size-x-large)"
-    }, r = i[l] ?? i.medium;
+    }, r = i[t] ?? i.medium;
     this.classList.add("mui-illustration"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>

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

@@ -13,12 +13,26 @@ class I extends HTMLElement {
       "optional",
       "max-length",
       "size",
-      "slot-layout"
+      "slot-layout",
+      "autofocus"
     ];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  get value() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    return (e == null ? void 0 : e.value) ?? this.getAttribute("value") ?? "";
+  }
+  set value(e) {
+    this.setAttribute("value", e ?? "");
+  }
+  focus(e) {
+    var t;
+    const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    i ? i.focus(e) : super.focus(e);
+  }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
@@ -26,114 +40,116 @@ class I extends HTMLElement {
     var e;
     this.cleanupListeners(), (e = this._slotResizeObserver) == null || e.disconnect();
   }
-  attributeChangedCallback(e, r, t) {
+  attributeChangedCallback(e, i, t) {
     var h;
-    const o = (h = this.shadowRoot) == null ? void 0 : h.querySelector("input");
-    if (o) {
+    const r = (h = this.shadowRoot) == null ? void 0 : h.querySelector("input");
+    if (r) {
       if (e === "value") {
-        o.value = t ?? "", this.updateCharacterCount();
+        r.value = t ?? "", this.updateCharacterCount();
         return;
       }
       if (e === "disabled") {
-        t === null || t === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
+        t === null || t === "false" ? r.removeAttribute("disabled") : r.setAttribute("disabled", "");
         return;
       }
-      ["type", "placeholder", "label", "hide-label", "variant", "optional", "max-length", "size", "slot-layout"].includes(
-        e
-      ) && (this.render(), this.setupListener());
+      if (e === "autofocus" && t !== null) {
+        requestAnimationFrame(() => this.focus({ preventScroll: !0 }));
+        return;
+      }
+      ["type", "placeholder", "label", "hide-label", "variant", "optional", "max-length", "size", "slot-layout"].includes(e) && (this.render(), this.setupListener());
     }
   }
   cleanupListeners() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
     e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("input");
-    e && (this.cleanupListeners(), this._changeHandler = (r) => {
-      const t = r.target;
+    e && (this.cleanupListeners(), this._changeHandler = (i) => {
+      const t = i.target;
       this.setAttribute("value", t.value);
-      const o = {
+      const r = {
         detail: { value: t.value },
         bubbles: !0,
         composed: !0
       };
-      this.dispatchEvent(new CustomEvent("change", o)), this.dispatchEvent(new CustomEvent("input", o)), this.updateCharacterCount();
-    }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler), this.updateCharacterCount());
+      this.dispatchEvent(new CustomEvent("change", r)), this.dispatchEvent(new CustomEvent("input", r)), this.updateCharacterCount();
+    }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler), this.updateCharacterCount(), this.hasAttribute("autofocus") && requestAnimationFrame(() => this.focus({ preventScroll: !0 })));
   }
   updateCharacterCount() {
-    var t, o;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input"), r = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".char-count");
-    !e || !r || e.maxLength <= 0 || (r.textContent = `${e.value.length}/${e.maxLength}`);
+    var t, r;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input"), i = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".char-count");
+    !e || !i || e.maxLength <= 0 || (i.textContent = `${e.value.length}/${e.maxLength}`);
   }
   updateSlottedButtons() {
     requestAnimationFrame(() => {
-      var T, E, S, A, O, f, m, R;
-      const e = this.getAttribute("size") || "medium", t = ["x-small", "small", "medium", "large"].includes(e) ? e : "medium", o = (T = this.shadowRoot) == null ? void 0 : T.querySelector('slot[name="before"]'), h = (E = this.shadowRoot) == null ? void 0 : E.querySelector('slot[name="after"]'), N = (S = this.shadowRoot) == null ? void 0 : S.querySelector('slot[name="inside-before"]'), g = (A = this.shadowRoot) == null ? void 0 : A.querySelector('slot[name="inside-after"]'), l = (O = this.shadowRoot) == null ? void 0 : O.querySelector('slot[name="hint"]'), x = {
+      var A, T, S, E, R, O, f, m;
+      const e = this.getAttribute("size") || "medium", t = ["x-small", "small", "medium", "large"].includes(e) ? e : "medium", r = (A = this.shadowRoot) == null ? void 0 : A.querySelector('slot[name="before"]'), h = (T = this.shadowRoot) == null ? void 0 : T.querySelector('slot[name="after"]'), N = (S = this.shadowRoot) == null ? void 0 : S.querySelector('slot[name="inside-before"]'), x = (E = this.shadowRoot) == null ? void 0 : E.querySelector('slot[name="inside-after"]'), l = (R = this.shadowRoot) == null ? void 0 : R.querySelector('slot[name="hint"]'), z = {
         "x-small": "var(--action-size-x-small)",
         small: "var(--action-size-small)",
         medium: "var(--action-size-medium)",
         large: "var(--action-size-large)"
-      }[t] || "var(--action-size-medium)", z = (s) => {
+      }[t] || "var(--action-size-medium)", w = (s) => {
         if (!s) return;
         s.assignedNodes({ flatten: !0 }).forEach((a) => {
           if (a.nodeType === Node.ELEMENT_NODE) {
-            const i = a, p = i.tagName.toLowerCase();
-            (p === "mui-button" || p === "mui-link") && (i.setAttribute("usage", "input"), i.setAttribute("size", t), i.style.setProperty("--input-slot-min-height", x), i.removeAttribute("variant"), i.removeAttribute("weight")), p === "mui-chip" && (i.setAttribute("usage", "input"), i.setAttribute("size", t)), p === "mui-addon" && i.setAttribute("size", t);
+            const o = a, c = o.tagName.toLowerCase();
+            (c === "mui-button" || c === "mui-link") && (o.setAttribute("usage", "input"), o.setAttribute("size", t), o.style.setProperty("--input-slot-min-height", z), o.removeAttribute("variant"), o.removeAttribute("weight")), c === "mui-chip" && (o.setAttribute("usage", "input"), o.setAttribute("size", t)), c === "mui-addon" && o.setAttribute("size", t);
           }
         });
       };
-      z(o), z(h);
+      w(r), w(h);
       const L = {
         "x-small": "xx-small",
         small: "x-small",
-        medium: "x-small",
-        large: "small"
+        medium: "small",
+        large: "medium"
       }, v = {
         "x-small": "xx-small",
         small: "x-small",
         medium: "small",
         large: "medium"
-      }, b = L[t] || "x-small", w = v[t] || "small", C = (s) => {
-        s && s.assignedNodes({ flatten: !0 }).forEach((u) => {
-          if (u.nodeType !== Node.ELEMENT_NODE) return;
-          const a = u, i = a.tagName.toLowerCase();
-          if (i === "mui-hint") {
+      }, b = L[t] || "x-small", y = v[t] || "small", C = (s) => {
+        s && s.assignedNodes({ flatten: !0 }).forEach((n) => {
+          if (n.nodeType !== Node.ELEMENT_NODE) return;
+          const a = n, o = a.tagName.toLowerCase();
+          if (o === "mui-hint") {
             a.removeAttribute("aria-hidden");
             return;
           }
-          i.startsWith("mui-icon-") && a.setAttribute("size", b), i === "mui-badge" && a.setAttribute("size", w), a.setAttribute("aria-hidden", "true");
+          o.startsWith("mui-icon-") && a.setAttribute("size", b), o === "mui-badge" && a.setAttribute("size", y), a.setAttribute("aria-hidden", "true");
         });
       };
-      if (C(N), C(g), l) {
+      if (C(N), C(x), l) {
         const s = {
           "x-small": "xx-small",
           small: "x-small",
-          medium: "x-small",
-          large: "small"
-        }, u = {
+          medium: "small",
+          large: "medium"
+        }, n = {
           "x-small": "xx-small",
           small: "x-small",
           medium: "small",
           large: "medium"
-        }, a = s[t] || "x-small", i = u[t] || "small";
-        l.assignedNodes({ flatten: !0 }).forEach((p) => {
-          if (p.nodeType !== Node.ELEMENT_NODE) return;
-          const c = p, $ = c.tagName.toLowerCase();
+        }, a = s[t] || "x-small", o = n[t] || "small";
+        l.assignedNodes({ flatten: !0 }).forEach((c) => {
+          if (c.nodeType !== Node.ELEMENT_NODE) return;
+          const p = c, $ = p.tagName.toLowerCase();
           if ($ === "mui-hint") {
-            c.removeAttribute("aria-hidden");
+            p.removeAttribute("aria-hidden");
             return;
           }
-          $.startsWith("mui-icon-") && !c.hasAttribute("size") && c.setAttribute("size", a), $ === "mui-badge" && !c.hasAttribute("size") && c.setAttribute("size", i), c.setAttribute("aria-hidden", "true");
+          $.startsWith("mui-icon-") && !p.hasAttribute("size") && p.setAttribute("size", a), $ === "mui-badge" && !p.hasAttribute("size") && p.setAttribute("size", o), p.setAttribute("aria-hidden", "true");
         });
       }
-      (f = this._slotResizeObserver) == null || f.disconnect();
-      const d = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".inside-before-slot"), n = (R = this.shadowRoot) == null ? void 0 : R.querySelector(".inside-after-cluster"), y = () => {
-        const s = (d == null ? void 0 : d.offsetWidth) || 0, u = (n == null ? void 0 : n.offsetWidth) || 0;
-        this.style.setProperty("--input-inside-before-space", `${s}px`), this.style.setProperty("--input-inside-after-space", `${u}px`);
+      (O = this._slotResizeObserver) == null || O.disconnect();
+      const d = (f = this.shadowRoot) == null ? void 0 : f.querySelector(".inside-before-slot"), u = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".inside-after-cluster"), g = () => {
+        const s = (d == null ? void 0 : d.offsetWidth) || 0, n = (u == null ? void 0 : u.offsetWidth) || 0;
+        this.style.setProperty("--input-inside-before-space", `${s}px`), this.style.setProperty("--input-inside-after-space", `${n}px`);
       };
-      y(), typeof ResizeObserver < "u" && (this._slotResizeObserver = new ResizeObserver(() => y()), d && this._slotResizeObserver.observe(d), n && this._slotResizeObserver.observe(n));
+      g(), typeof ResizeObserver < "u" && (this._slotResizeObserver = new ResizeObserver(() => g()), d && this._slotResizeObserver.observe(d), u && this._slotResizeObserver.observe(u));
     });
   }
   render() {
@@ -150,14 +166,14 @@ class I extends HTMLElement {
       "datetime-local",
       "month",
       "week"
-    ], r = this.getAttribute("type") || "text", t = e.includes(r) ? r : "text", o = this.getAttribute("name") || "", h = this.getAttribute("value") || "", N = this.getAttribute("placeholder") || "", g = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, l = this.getAttribute("label") || "", k = this.hasAttribute("optional"), x = this.hasAttribute("hide-label"), z = this.hasAttribute("disabled"), L = x && l ? `aria-label="${l}"` : "", v = this.getAttribute("max-length"), b = v && Number(v) > 0 ? String(Number(v)) : "", w = this.getAttribute("size") || "medium", d = ["x-small", "small", "medium", "large"].includes(w) ? w : "medium", n = this.getAttribute("variant") || "", y = n || "", E = (this.getAttribute("slot-layout") || "inline") === "stack-mobile" ? "input-wrapper stack-mobile" : "input-wrapper", S = this.querySelector('[slot="before"]') !== null, A = this.querySelector('[slot="after"]') !== null, O = this.querySelector('[slot="inside-before"]') !== null, f = this.querySelector('[slot="inside-after"]') !== null, m = this.querySelector('[slot="hint"]') !== null, R = [
-      y,
-      S ? "before" : "",
-      A ? "after" : "",
+    ], i = this.getAttribute("type") || "text", t = e.includes(i) ? i : "text", r = this.getAttribute("name") || "", h = this.getAttribute("value") || "", N = this.getAttribute("placeholder") || "", x = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, l = this.getAttribute("label") || "", k = this.hasAttribute("optional"), z = this.hasAttribute("hide-label"), w = this.hasAttribute("disabled"), L = z && l ? `aria-label="${l}"` : "", v = this.getAttribute("max-length"), b = v && Number(v) > 0 ? String(Number(v)) : "", y = this.getAttribute("size") || "medium", d = ["x-small", "small", "medium", "large"].includes(y) ? y : "medium", u = this.hasAttribute("autofocus"), g = this.getAttribute("variant") || "", A = g || "", S = (this.getAttribute("slot-layout") || "inline") === "stack-mobile" ? "input-wrapper stack-mobile" : "input-wrapper", E = this.querySelector('[slot="before"]') !== null, R = this.querySelector('[slot="after"]') !== null, O = this.querySelector('[slot="inside-before"]') !== null, f = this.querySelector('[slot="inside-after"]') !== null, m = this.querySelector('[slot="hint"]') !== null, s = [
+      A,
+      E ? "before" : "",
+      R ? "after" : "",
       O ? "inside-before" : "",
       f ? "inside-after" : "",
       m ? "hint" : ""
-    ].filter(Boolean).join(" "), s = (
+    ].filter(Boolean).join(" "), n = (
       /*html*/
       `
       <style>
@@ -258,11 +274,15 @@ class I extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          color: var(--text-color-optional);
+          color: var(--input-inside-before-color, var(--text-color-optional));
           gap: var(--space-100);
           overflow: visible;
           flex: 0 0 auto;
         }
+        .input-shell:focus-within .inside-before-slot {
+          color: var(--input-inside-before-color-focus, var(--input-inside-before-color, var(--text-color-optional)));
+          z-index: 3;
+        }
         .inside-after-cluster {
           position: absolute;
           right: var(--input-inline-offset);
@@ -406,7 +426,7 @@ class I extends HTMLElement {
           padding: var(--space-200) var(--space-300);
           box-sizing: border-box;
           font-size: var(--text-font-size);
-          border-radius: var(--radius-100);
+          border-radius: var(--form-radius-medium);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
           color: var(--form-default-text-color);
@@ -417,6 +437,7 @@ class I extends HTMLElement {
           padding: var(--action-padding-x-small);
           font-size: var(--text-font-size-xs);
           line-height: var(--text-line-height-xs);
+          border-radius: var(--form-radius-x-small);
           --input-inline-padding-current: var(--space-200);
         }
         input.size-x-small.inside-before:not(.before) {
@@ -431,6 +452,7 @@ class I extends HTMLElement {
           padding: var(--action-padding-small);
           font-size: var(--text-font-size-s);
           line-height: var(--text-line-height-s);
+          border-radius: var(--form-radius-small);
           --input-inline-padding-current: var(--space-300);
         }
         input.size-small.inside-before:not(.before) {
@@ -445,6 +467,7 @@ class I extends HTMLElement {
           padding: var(--space-200) var(--space-300);
           font-size: var(--text-font-size);
           line-height: var(--text-line-height);
+          border-radius: var(--form-radius-medium);
           --input-inline-padding-current: var(--space-300);
         }
         input.size-medium.inside-before:not(.before) {
@@ -459,6 +482,7 @@ class I extends HTMLElement {
           padding: var(--space-300) var(--space-400);
           font-size: var(--text-font-size-l);
           line-height: var(--text-line-height-l);
+          border-radius: var(--form-radius-large);
           --input-inline-padding-current: var(--space-400);
         }
         input.size-large.inside-before:not(.before) {
@@ -630,8 +654,8 @@ class I extends HTMLElement {
         
 
       </style>
-      ${l ? `<label for="${g}" class="${[x ? "vh" : "", k ? "label-with-optional" : ""].filter(Boolean).join(" ")}">${l}${k ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
-    <div class="${E}">
+      ${l ? `<label for="${x}" class="${[z ? "vh" : "", k ? "label-with-optional" : ""].filter(Boolean).join(" ")}">${l}${k ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+    <div class="${S}">
       <div class="before-slot">
         <slot name="before"></slot>
       </div>
@@ -640,15 +664,16 @@ class I extends HTMLElement {
           <slot name="inside-before"></slot>
         </div>
         <input
-          class="${[R, `size-${d}`].filter(Boolean).join(" ")}"
+          class="${[s, `size-${d}`].filter(Boolean).join(" ")}"
           type="${t}"
-          name="${o}"
-          id="${g}"
+          name="${r}"
+          id="${x}"
           value="${h}"
           placeholder="${N}"
-          ${z ? 'disabled aria-disabled="true"' : ""}
+          ${w ? 'disabled aria-disabled="true"' : ""}
           ${b ? `maxlength="${b}"` : ""}
           ${L}
+          ${u ? "autofocus" : ""}
         />
         ${f || m ? `<div class="inside-after-cluster">
           ${f ? `<div class="inside-after-slot">
@@ -666,7 +691,7 @@ class I extends HTMLElement {
     ${b ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
     );
-    this.shadowRoot && (this.shadowRoot.innerHTML = s, this.updateSlottedButtons());
+    this.shadowRoot && (this.shadowRoot.innerHTML = n, this.updateSlottedButtons());
   }
 }
 customElements.get("mui-input") || customElements.define("mui-input", I);