@muibook/components 19.6.0 → 20.0.0

package/dist/esm/components/mui-chip-rail/index.js

@@ -0,0 +1,239 @@
+import "../mui-button/index.js";
+import "../mui-icons/left-chevron/index.js";
+import "../mui-icons/right-chevron/index.js";
+class n extends HTMLElement {
+  constructor() {
+    super(), this.scrollEl = null, this.slotEl = null, this.resizeObserver = null, this.mutationObserver = null, this.onScroll = () => this.syncEdges(), this.onSlotChange = () => this.syncSlottedItems(), this.onPreviousClick = () => this.scrollByPage(-1), this.onNextClick = () => this.scrollByPage(1), this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["size", "bleed", "bleed-inline-size", "bleed-block-size", "aria-label"];
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.syncBleed(), this.bindEvents(), this.syncSlottedItems();
+  }
+  disconnectedCallback() {
+    this.unbindEvents();
+  }
+  attributeChangedCallback(e, i, t) {
+    if (i !== t && this.shadowRoot) {
+      if (e === "size") {
+        this.syncActionSizes(), this.syncSlottedItems();
+        return;
+      }
+      if (e === "bleed" || e === "bleed-inline-size" || e === "bleed-block-size") {
+        this.syncBleed();
+        return;
+      }
+      e === "aria-label" && this.scrollEl && this.scrollEl.setAttribute("aria-label", t || "Chip rail");
+    }
+  }
+  render() {
+    const e = this.normalizeSize(this.getAttribute("size")), i = this.getAttribute("aria-label") || "Chip rail", t = this.getIconSize(e);
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          width: 100%;
+          min-width: 0;
+          max-width: 100%;
+          overflow: hidden;
+          contain: inline-size;
+          padding-block: var(--chip-rail-bleed-block-size);
+          padding-inline: var(--chip-rail-bleed-inline-size);
+          --chip-rail-background: var(--surface-elevated-100);
+          --chip-rail-bleed-inline-size: 0px;
+          --chip-rail-bleed-block-size: 0px;
+          --chip-rail-gap: var(--space-200);
+          --chip-rail-edge-size: calc(var(--action-icon-only-size-medium) + var(--space-700));
+          --chip-rail-edge-solid: 54%;
+        }
+
+        :host([size="x-small"]) {
+          --chip-rail-gap: var(--space-100);
+          --chip-rail-edge-size: calc(var(--action-icon-only-size-x-small) + var(--space-500));
+        }
+
+        :host([size="small"]) {
+          --chip-rail-gap: var(--space-100);
+          --chip-rail-edge-size: calc(var(--action-icon-only-size-small) + var(--space-600));
+        }
+
+        :host([size="large"]) {
+          --chip-rail-gap: var(--space-300);
+          --chip-rail-edge-size: calc(var(--action-icon-only-size-large) + var(--space-800));
+        }
+
+        .rail {
+          position: relative;
+          width: 100%;
+          min-width: 0;
+          max-width: 100%;
+        }
+
+        .scroll {
+          width: 100%;
+          min-width: 0;
+          max-width: 100%;
+          overflow-x: auto;
+          overflow-y: hidden;
+          scrollbar-width: none;
+          scroll-behavior: smooth;
+          overscroll-behavior-inline: contain;
+        }
+
+        .scroll::-webkit-scrollbar {
+          display: none;
+        }
+
+        slot {
+          display: flex;
+          align-items: center;
+          width: max-content;
+          min-width: max-content;
+          gap: var(--chip-rail-gap);
+        }
+
+        ::slotted(*) {
+          flex: 0 0 auto;
+        }
+
+        .edge {
+          position: absolute;
+          top: calc(-1 * var(--chip-rail-bleed-block-size));
+          bottom: calc(-1 * var(--chip-rail-bleed-block-size));
+          z-index: 2;
+          display: flex;
+          align-items: center;
+          width: calc(var(--chip-rail-edge-size) + var(--chip-rail-bleed-inline-size));
+          pointer-events: none;
+          opacity: 1;
+          transition: opacity var(--speed-200) ease;
+        }
+
+        .edge[hidden] {
+          display: none;
+        }
+
+        .edge mui-button {
+          pointer-events: auto;
+        }
+
+        .edge-start {
+          left: calc(-1 * var(--chip-rail-bleed-inline-size));
+          justify-content: flex-start;
+          padding-inline-start: var(--chip-rail-bleed-inline-size);
+          background:
+            linear-gradient(
+              90deg,
+              var(--chip-rail-background) 0%,
+              var(--chip-rail-background) var(--chip-rail-edge-solid),
+              color-mix(in srgb, var(--chip-rail-background) 68%, transparent) 78%,
+              transparent 100%
+            );
+        }
+
+        .edge-end {
+          right: calc(-1 * var(--chip-rail-bleed-inline-size));
+          justify-content: flex-end;
+          padding-inline-end: var(--chip-rail-bleed-inline-size);
+          background:
+            linear-gradient(
+              270deg,
+              var(--chip-rail-background) 0%,
+              var(--chip-rail-background) var(--chip-rail-edge-solid),
+              color-mix(in srgb, var(--chip-rail-background) 68%, transparent) 78%,
+              transparent 100%
+            );
+        }
+      </style>
+
+      <div class="rail">
+        <div class="scroll" role="group" aria-label="${this.escapeAttribute(i)}">
+          <slot></slot>
+        </div>
+        <div class="edge edge-start" hidden>
+          <mui-button class="rail-action rail-action-start" variant="tertiary" size="${e}" icon-only aria-label="Previous items">
+            <mui-icon-left-chevron class="mui-icon" size="${t}"></mui-icon-left-chevron>
+          </mui-button>
+        </div>
+        <div class="edge edge-end" hidden>
+          <mui-button class="rail-action rail-action-end" variant="tertiary" size="${e}" icon-only aria-label="Next items">
+            <mui-icon-right-chevron class="mui-icon" size="${t}"></mui-icon-right-chevron>
+          </mui-button>
+        </div>
+      </div>
+    `, this.scrollEl = this.shadowRoot.querySelector(".scroll"), this.slotEl = this.shadowRoot.querySelector("slot");
+  }
+  bindEvents() {
+    var t, s, l, r;
+    this.unbindEvents(), (t = this.scrollEl) == null || t.addEventListener("scroll", this.onScroll, { passive: !0 }), (s = this.slotEl) == null || s.addEventListener("slotchange", this.onSlotChange);
+    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".rail-action-start"), i = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".rail-action-end");
+    e == null || e.addEventListener("click", this.onPreviousClick), i == null || i.addEventListener("click", this.onNextClick), typeof ResizeObserver < "u" && this.scrollEl && (this.resizeObserver = new ResizeObserver(() => this.syncEdges()), this.resizeObserver.observe(this.scrollEl)), typeof MutationObserver < "u" && (this.mutationObserver = new MutationObserver(() => this.syncSlottedItems()), this.mutationObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["hidden", "size"]
+    })), requestAnimationFrame(() => this.syncEdges());
+  }
+  unbindEvents() {
+    var e, i, t, s, l, r, a, o;
+    (e = this.scrollEl) == null || e.removeEventListener("scroll", this.onScroll), (i = this.slotEl) == null || i.removeEventListener("slotchange", this.onSlotChange), (s = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".rail-action-start")) == null || s.removeEventListener("click", this.onPreviousClick), (r = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".rail-action-end")) == null || r.removeEventListener("click", this.onNextClick), (a = this.resizeObserver) == null || a.disconnect(), (o = this.mutationObserver) == null || o.disconnect(), this.resizeObserver = null, this.mutationObserver = null;
+  }
+  syncSlottedItems() {
+    var t;
+    const e = this.normalizeSize(this.getAttribute("size")), i = (t = this.slotEl) == null ? void 0 : t.assignedElements({ flatten: !0 });
+    i == null || i.forEach((s) => {
+      s.tagName.toLowerCase() === "mui-chip" && s.getAttribute("size") !== e && s.setAttribute("size", e);
+    }), requestAnimationFrame(() => this.syncEdges());
+  }
+  syncActionSizes() {
+    var t, s;
+    const e = this.normalizeSize(this.getAttribute("size")), i = this.getIconSize(e);
+    (t = this.shadowRoot) == null || t.querySelectorAll("mui-button.rail-action").forEach((l) => {
+      l.setAttribute("size", e);
+    }), (s = this.shadowRoot) == null || s.querySelectorAll(".rail-action .mui-icon").forEach((l) => {
+      l.setAttribute("size", i);
+    });
+  }
+  syncEdges() {
+    var r, a;
+    if (!this.scrollEl || !this.shadowRoot) return;
+    const e = Math.max(0, this.scrollEl.scrollWidth - this.scrollEl.clientWidth), i = this.scrollEl.scrollLeft, t = e > 1, s = t && i > 1, l = t && i < e - 1;
+    (r = this.shadowRoot.querySelector(".edge-start")) == null || r.toggleAttribute("hidden", !s), (a = this.shadowRoot.querySelector(".edge-end")) == null || a.toggleAttribute("hidden", !l);
+  }
+  syncBleed() {
+    this.style.setProperty("--chip-rail-bleed-inline-size", this.getBleedInlineValue()), this.style.setProperty("--chip-rail-bleed-block-size", this.getBleedBlockValue());
+  }
+  scrollByPage(e) {
+    if (!this.scrollEl) return;
+    const i = Math.max(this.scrollEl.clientWidth * 0.72, 120);
+    this.scrollEl.scrollBy({ left: i * e, behavior: "smooth" });
+  }
+  getBleedInlineValue() {
+    return this.normalizeBleedValue(this.getAttribute("bleed-inline-size") || this.getAttribute("bleed"));
+  }
+  getBleedBlockValue() {
+    return this.normalizeBleedValue(this.getAttribute("bleed-block-size"));
+  }
+  normalizeBleedValue(e) {
+    const i = (e || "0").trim(), t = /* @__PURE__ */ new Set(["000", "025", "050", "100", "200", "300", "400", "500", "600", "700", "800"]);
+    return !i || i === "0" || i === "none" || i === "false" ? "0px" : t.has(i) ? `var(--space-${i})` : i;
+  }
+  normalizeSize(e) {
+    return e && (/* @__PURE__ */ new Set(["x-small", "small", "medium", "large"])).has(e) ? e : "medium";
+  }
+  getIconSize(e) {
+    return {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "medium",
+      large: "large"
+    }[e] || "medium";
+  }
+  escapeAttribute(e) {
+    return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  }
+}
+customElements.get("mui-chip-rail") || customElements.define("mui-chip-rail", n);

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

@@ -1,4 +1,4 @@
-class s extends HTMLElement {
+class i extends HTMLElement {
   static get observedAttributes() {
     return ["size", "scrollable", "wrap"];
   }
@@ -13,7 +13,7 @@ class s extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.hasAttribute("scrollable"), e = this.hasAttribute("wrap"), i = (
+    const t = this.hasAttribute("scrollable"), e = this.hasAttribute("wrap"), o = (
       /*css*/
       `
       :host {
@@ -39,7 +39,7 @@ class s extends HTMLElement {
         display: block;
         border-radius: inherit;
         font-family: monospace;
-        color: var(--text-color);
+        color: var(--code-text-color, var(--text-color));
         background: var(--code-background);
         padding: var(--space-400) var(--space-500);
         box-sizing: border-box;
@@ -65,9 +65,9 @@ class s extends HTMLElement {
     );
     this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${i}</style>
+      <style>${o}</style>
       <code><slot></slot></code>
   `;
   }
 }
-customElements.get("mui-code") || customElements.define("mui-code", s);
+customElements.get("mui-code") || customElements.define("mui-code", i);

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

@@ -1,4 +1,4 @@
-const s = class s extends HTMLElement {
+const i = class i extends HTMLElement {
   constructor() {
     super(), this.button = null, this.menu = null, this.handleResize = () => {
       var t;
@@ -7,14 +7,17 @@ const s = class s extends HTMLElement {
       var t;
       (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
     }, this.handleFocusOut = (t) => {
-      var e;
-      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+      var e, n;
+      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), (n = this.button) == null || n.setAttribute("aria-expanded", "false"), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+    }, this.handleActionKeyDown = (t) => {
+      t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this.toggleMenu(t));
     }, this.attachShadow({ mode: "open" });
   }
   handleKeyDown(t) {
+    var e;
     if (t.key === "Escape") {
       if (!this.menu) return;
-      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(
+      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), (e = this.button) == null || e.setAttribute("aria-expanded", "false"), this.dispatchEvent(
         new CustomEvent("dropdown-toggle", {
           detail: { open: !1 },
           bubbles: !0
@@ -32,77 +35,83 @@ const s = class s extends HTMLElement {
     t === "zindex" && this.menu && (this.menu.style.zIndex = n ?? "1"), (t === "position" || t === "vertical-position") && this.menu && this.adjustPosition();
   }
   connectedCallback() {
-    var i, r, l, a, h;
-    this.render(), this.menu = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".dropdown-menu");
+    var r, o, c, p;
+    this.render(), this.menu = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".dropdown-menu");
     const t = this.getAttribute("zindex") || "1";
-    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (r = this.menu) == null || r.addEventListener("focusout", this.handleFocusOut);
-    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector('slot[name="action"]'), n = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) || [];
-    this.button = n.find(
-      (u) => u instanceof HTMLElement && u.tagName.toLowerCase() === "mui-button"
-    );
-    const d = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
-    if (d) {
-      const u = () => {
-        const c = d.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "mui-button");
-        c.forEach((o) => {
-          o.removeAttribute("dropdown-slot"), o.removeAttribute("dropdown-slot-first"), o.removeAttribute("dropdown-slot-last");
-        }), c.forEach((o, w) => {
-          o.hasAttribute("variant") || o.setAttribute("variant", "tertiary"), o.setAttribute("dropdown-slot", ""), w === 0 && o.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && o.setAttribute("dropdown-slot-last", ""), o._dropdownListenerAdded || (o.addEventListener("click", () => {
-            var p, f;
-            this.persistent || ((p = this.menu) == null || p.classList.remove("show"), (f = this.menu) == null || f.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
-          }), o._dropdownListenerAdded = !0);
+    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (o = this.menu) == null || o.addEventListener("focusout", this.handleFocusOut);
+    const e = (c = this.shadowRoot) == null ? void 0 : c.querySelector("slot:not([name])");
+    if (e) {
+      const d = () => {
+        const m = e.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "mui-button");
+        m.forEach((s) => {
+          s.removeAttribute("dropdown-slot"), s.removeAttribute("dropdown-slot-first"), s.removeAttribute("dropdown-slot-last");
+        }), m.forEach((s, a) => {
+          s.hasAttribute("variant") || s.setAttribute("variant", "tertiary"), s.setAttribute("dropdown-slot", ""), a === 0 && s.setAttribute("dropdown-slot-first", ""), a === m.length - 1 && s.setAttribute("dropdown-slot-last", ""), s._dropdownListenerAdded || (s.addEventListener("click", () => {
+            var u, l;
+            this.persistent || ((u = this.menu) == null || u.classList.remove("show"), (l = this.menu) == null || l.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+          }), s._dropdownListenerAdded = !0);
         });
       };
-      d.addEventListener("slotchange", u), u();
+      e.addEventListener("slotchange", d), d();
     }
-    this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), (h = this.button) == null || h.addEventListener("click", this.toggleMenu), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
+    this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this);
+    const n = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="action"]'), h = () => {
+      var s, a, u;
+      (s = this.button) == null || s.removeEventListener("click", this.toggleMenu), (a = this.button) == null || a.removeEventListener("keydown", this.handleActionKeyDown);
+      const d = (n == null ? void 0 : n.assignedElements({ flatten: !0 })) || [];
+      if (this.button = d.find((l) => l instanceof HTMLElement), !this.button) return;
+      const w = this.button.tagName.toLowerCase();
+      w === "mui-button" || w === "button" || w === "a" || (this.button.hasAttribute("tabindex") || this.button.setAttribute("tabindex", "0"), this.button.setAttribute("role", "button")), this.button.setAttribute("aria-haspopup", "menu"), this.button.setAttribute("aria-expanded", (u = this.menu) != null && u.classList.contains("show") ? "true" : "false"), this.button.addEventListener("click", this.toggleMenu), this.button.addEventListener("keydown", this.handleActionKeyDown);
+    };
+    n == null || n.addEventListener("slotchange", h), h(), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
   }
   disconnectedCallback() {
-    var t, e;
-    (t = this.button) == null || t.removeEventListener("click", this.toggleMenu), document.removeEventListener("click", this.closeMenu), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", this.handleResize), window.removeEventListener("scroll", this.handleScroll, !0), (e = this.menu) == null || e.removeEventListener("focusout", this.handleFocusOut);
+    var t, e, n;
+    (t = this.button) == null || t.removeEventListener("click", this.toggleMenu), (e = this.button) == null || e.removeEventListener("keydown", this.handleActionKeyDown), document.removeEventListener("click", this.closeMenu), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", this.handleResize), window.removeEventListener("scroll", this.handleScroll, !0), (n = this.menu) == null || n.removeEventListener("focusout", this.handleFocusOut);
   }
   closeWithAnimation() {
+    var e;
     if (!this.menu) return;
-    this.menu.classList.remove("show"), setTimeout(() => {
+    this.menu.classList.remove("show"), (e = this.button) == null || e.setAttribute("aria-expanded", "false"), setTimeout(() => {
       this.menu && (this.menu.classList.contains("show") || (this.menu.style.display = "none"));
     }, 150);
   }
   toggleMenu(t) {
-    var n;
+    var n, h;
     if (t.stopPropagation(), !this.menu) return;
     const e = this.menu.classList.contains("show");
-    !e && s.openDropdown && s.openDropdown !== this && s.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
-      var d, i;
-      (d = this.menu) == null || d.classList.add("show"), (i = this.menu) == null || i.removeAttribute("inert"), this.adjustPosition();
-    }), s.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
+    !e && i.openDropdown && i.openDropdown !== this && i.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
+      var r, o;
+      (r = this.menu) == null || r.classList.add("show"), (o = this.menu) == null || o.removeAttribute("inert"), this.adjustPosition();
+    }), (h = this.button) == null || h.setAttribute("aria-expanded", "true"), i.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
   }
   closeMenu(t) {
     var n;
     const e = t.composedPath();
-    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
   }
   adjustPosition() {
     if (!this.menu) return;
-    const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, i = n.endsWith("rem") ? parseFloat(n) * d : parseFloat(n) || 8;
+    const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", h = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, r = n.endsWith("rem") ? parseFloat(n) * h : parseFloat(n) || 8;
     t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
-    const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, v = (this.getAttribute("vertical-position") || "auto").toLowerCase(), c = u - r.bottom, o = r.top, w = a + i, p = c >= w, f = o >= w;
-    let b = r.height + i;
-    v === "up" ? b = f || !p ? -(a + i) : r.height + i : v === "down" ? b = p || !f ? r.height + i : -(a + i) : !p && o > c && (b = -(a + i));
-    let m = 0;
+    const o = this.getBoundingClientRect(), c = t.offsetWidth, p = t.offsetHeight, d = window.innerWidth, w = window.innerHeight, m = (this.getAttribute("vertical-position") || "auto").toLowerCase(), s = w - o.bottom, a = o.top, u = p + r, l = s >= u, g = a >= u;
+    let f = o.height + r;
+    m === "up" ? f = g || !l ? -(p + r) : o.height + r : m === "down" ? f = l || !g ? o.height + r : -(p + r) : !l && a > s && (f = -(p + r));
+    let b = 0;
     switch (this.getAttribute("position") || "left") {
       case "left":
-        m = 0;
+        b = 0;
         break;
       case "center":
-        m = (r.width - l) / 2;
+        b = (o.width - c) / 2;
         break;
       case "right":
       default:
-        m = r.width - l;
+        b = o.width - c;
         break;
     }
-    const y = e - r.left, E = h - e - (r.left + l);
-    m = Math.max(y, Math.min(m, E)), l > h - e * 2 && (t.style.maxWidth = `${h - e * 2}px`), t.style.top = `${b}px`, t.style.left = `${m}px`;
+    const y = e - o.left, A = d - e - (o.left + c);
+    b = Math.max(y, Math.min(b, A)), c > d - e * 2 && (t.style.maxWidth = `${d - e * 2}px`), t.style.top = `${f}px`, t.style.left = `${b}px`;
   }
   render() {
     this.shadowRoot.innerHTML = /*html*/
@@ -168,6 +177,6 @@ const s = class s extends HTMLElement {
     `;
   }
 };
-s.openDropdown = null;
-let g = s;
-customElements.get("mui-dropdown") || customElements.define("mui-dropdown", g);
+i.openDropdown = null;
+let v = i;
+customElements.get("mui-dropdown") || customElements.define("mui-dropdown", v);

package/dist/esm/components/mui-file-upload/index.js

@@ -81,6 +81,7 @@ class a extends HTMLElement {
 
         mui-button::part(height) {
           height: calc(var(--space-600) + var(--space-050));
+          min-height: initial;
           padding: var(--space-400);
           padding-top: var(--space-000);
           padding-bottom: var(--space-000);

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

@@ -1,4 +1,4 @@
-class h extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
     return ["size", "level", "truncate", "clamp"];
   }
@@ -30,6 +30,7 @@ class h extends HTMLElement {
 
         h1, h2, h3, h4, h5, h6 {
           margin: var(--space-000);
+          font-family: var(--heading-font-family, var(--font-family));
           font-weight: var(--heading-font-weight);
           color: var(--heading-text-color);
           min-width: 0;
@@ -74,4 +75,4 @@ class h extends HTMLElement {
     return Number.isFinite(e) && e > 0 ? Math.floor(e) : 2;
   }
 }
-customElements.get("mui-heading") || customElements.define("mui-heading", h);
+customElements.get("mui-heading") || customElements.define("mui-heading", a);

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

@@ -71,16 +71,16 @@ class I extends HTMLElement {
     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 = {
-        "x-small": "var(--action-icon-only-size-x-small)",
-        small: "var(--action-icon-only-size-small)",
-        medium: "var(--action-icon-only-size)",
-        large: "var(--action-icon-only-size-large)"
-      }[t] || "var(--action-icon-only-size)", z = (s) => {
+        "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) => {
         if (!s) return;
         s.assignedNodes({ flatten: !0 }).forEach((a) => {
           if (a.nodeType === Node.ELEMENT_NODE) {
-            const i = a, c = i.tagName.toLowerCase();
-            (c === "mui-button" || c === "mui-link") && (i.setAttribute("usage", "input"), i.setAttribute("size", t), i.style.setProperty("--input-slot-min-height", x), i.removeAttribute("variant"), i.removeAttribute("weight")), c === "mui-chip" && (i.setAttribute("usage", "input"), i.setAttribute("size", t)), c === "mui-addon" && i.setAttribute("size", t);
+            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);
           }
         });
       };
@@ -118,14 +118,14 @@ class I extends HTMLElement {
           medium: "small",
           large: "medium"
         }, a = s[t] || "x-small", i = u[t] || "small";
-        l.assignedNodes({ flatten: !0 }).forEach((c) => {
-          if (c.nodeType !== Node.ELEMENT_NODE) return;
-          const p = c, $ = p.tagName.toLowerCase();
+        l.assignedNodes({ flatten: !0 }).forEach((p) => {
+          if (p.nodeType !== Node.ELEMENT_NODE) return;
+          const c = p, $ = c.tagName.toLowerCase();
           if ($ === "mui-hint") {
-            p.removeAttribute("aria-hidden");
+            c.removeAttribute("aria-hidden");
             return;
           }
-          $.startsWith("mui-icon-") && !p.hasAttribute("size") && p.setAttribute("size", a), $ === "mui-badge" && !p.hasAttribute("size") && p.setAttribute("size", i), p.setAttribute("aria-hidden", "true");
+          $.startsWith("mui-icon-") && !c.hasAttribute("size") && c.setAttribute("size", a), $ === "mui-badge" && !c.hasAttribute("size") && c.setAttribute("size", i), c.setAttribute("aria-hidden", "true");
         });
       }
       (f = this._slotResizeObserver) == null || f.disconnect();
@@ -320,7 +320,7 @@ class I extends HTMLElement {
         }
         .input-wrapper.stack-mobile .inside-before-slot,
         .input-wrapper.stack-mobile .inside-after-cluster {
-          top: calc(var(--action-icon-only-size) / 2);
+          top: calc(var(--action-size-medium) / 2);
         }
         .input-wrapper.stack-mobile slot[name="before"]::slotted(mui-addon),
         .input-wrapper.stack-mobile slot[name="after"]::slotted(mui-addon) {
@@ -413,7 +413,7 @@ class I extends HTMLElement {
           background: var(--input-background);
         }
         input.size-x-small {
-          min-height: var(--action-icon-only-size-x-small);
+          min-height: var(--action-size-x-small);
           padding: var(--action-padding-x-small);
           font-size: var(--text-font-size-xs);
           line-height: var(--text-line-height-xs);
@@ -427,7 +427,7 @@ class I extends HTMLElement {
           padding-right: calc(var(--input-inline-padding-current) + var(--input-inside-after-space, 0px) + var(--input-inline-gap));
         }
         input.size-small {
-          min-height: var(--action-icon-only-size-small);
+          min-height: var(--action-size-small);
           padding: var(--action-padding-small);
           font-size: var(--text-font-size-s);
           line-height: var(--text-line-height-s);
@@ -441,7 +441,7 @@ class I extends HTMLElement {
           padding-right: calc(var(--input-inline-padding-current) + var(--input-inside-after-space, 0px) + var(--input-inline-gap));
         }
         input.size-medium {
-          min-height: 4.4rem;
+          min-height: var(--action-size-medium);
           padding: var(--space-200) var(--space-300);
           font-size: var(--text-font-size);
           line-height: var(--text-line-height);
@@ -455,7 +455,7 @@ class I extends HTMLElement {
           padding-right: calc(var(--input-inline-padding-current) + var(--input-inside-after-space, 0px) + var(--input-inline-gap));
         }
         input.size-large {
-          min-height: var(--action-icon-only-size-large);
+          min-height: var(--action-size-large);
           padding: var(--space-300) var(--space-400);
           font-size: var(--text-font-size-l);
           line-height: var(--text-line-height-l);
@@ -596,6 +596,10 @@ class I extends HTMLElement {
         slot[name="inside-before"]::slotted(*:hover),
         slot[name="inside-after"]::slotted(*:hover) { z-index: 1; }
 
+        input:focus {
+          z-index: 2;
+        }
+
       /* Ensure feedback styles appear above SELECT and focusable Items */
         input.success,
         input.warning,