@muibook/components 19.5.1 → 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-form-message/index.js

@@ -10,6 +10,7 @@ class a extends HTMLElement {
   getIconColor(t) {
     return {
       optional: "var(--text-color-optional)",
+      info: "var(--text-color-info)",
       warning: "var(--text-color-warning)",
       success: "var(--text-color-success)",
       error: "var(--text-color-error)"
@@ -25,9 +26,9 @@ class a extends HTMLElement {
   }
   syncBeforeIcon() {
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector('slot[name="before"]'), e = this.getIconColor(this.getAttribute("variant") || "optional"), o = this.getIconSize(this.getAttribute("size") || "small");
-    ((t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? []).forEach((s) => {
-      s.tagName.toLowerCase().startsWith("mui-icon-") && (s.hasAttribute("color") || s.setAttribute("color", e), s.hasAttribute("size") || s.setAttribute("size", o));
+    const t = this.shadowRoot.querySelector('slot[name="before"]'), s = this.getIconColor(this.getAttribute("variant") || "optional"), o = this.getIconSize(this.getAttribute("size") || "small");
+    ((t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? []).forEach((e) => {
+      e.tagName.toLowerCase().startsWith("mui-icon-") && (e.hasAttribute("color") || e.setAttribute("color", s), e.hasAttribute("size") || e.setAttribute("size", o));
     });
   }
   connectedCallback() {
@@ -38,7 +39,7 @@ class a extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("size") || "small", e = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "optional";
+    const t = this.getAttribute("size") || "small", s = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "optional", r = this.querySelector('[slot="after"]') !== null;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -50,23 +51,30 @@ class a extends HTMLElement {
           margin-inline-start: var(--stroke-size-100);
           margin-block-start: var(--space-200);
         }
+        .slot-wrapper {
+          display: inline-flex;
+        }
       </style>
 
-      <mui-body size="${t}" weight="${e}" variant="${o}">
-        <slot slot="before" name="before">
-          <mui-icon-info id="default-before-icon" size="${this.getIconSize(t)}" color="${this.getIconColor(o)}"></mui-icon-info>
-        </slot>
+      <mui-body size="${t}" weight="${s}" variant="${o}">
+        <span slot="before" class="slot-wrapper">
+          <slot name="before">
+            <mui-icon-info id="default-before-icon" size="${this.getIconSize(t)}" color="${this.getIconColor(o)}"></mui-icon-info>
+          </slot>
+        </span>
         <slot></slot>
-        <slot slot="after" name="after"></slot>
+        ${r ? `<span slot="after" class="slot-wrapper">
+                <slot name="after"></slot>
+              </span>` : ""}
       </mui-body>
     `;
-    const i = this.shadowRoot.querySelector('slot[name="before"]');
-    i == null || i.addEventListener("slotchange", () => this.syncBeforeIcon()), this.syncBeforeIcon();
+    const e = this.shadowRoot.querySelector('slot[name="before"]');
+    e == null || e.addEventListener("slotchange", () => this.syncBeforeIcon()), this.syncBeforeIcon();
   }
 }
 customElements.get("mui-form-message") || customElements.define("mui-form-message", a);
 if (!customElements.get("mui-form-hint")) {
-  class r extends a {
+  class i extends a {
   }
-  customElements.define("mui-form-hint", r);
+  customElements.define("mui-form-hint", i);
 }

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

@@ -1,6 +1,6 @@
-class n extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
-    return ["size", "level"];
+    return ["size", "level", "truncate", "clamp"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -8,21 +8,54 @@ class n extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(i, t, e) {
-    t !== e && this.shadowRoot && this.render();
+  attributeChangedCallback(e, i, t) {
+    i !== t && this.shadowRoot && this.render();
   }
   render() {
     if (!this.shadowRoot) return;
-    const i = this.getAttribute("size") || "1", e = `h${this.getAttribute("level") || i}`;
+    const e = this.getAttribute("size") || "1", t = `h${this.getAttribute("level") || e}`, n = this.getLineClamp();
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
-        :host { display: block; }
+        :host {
+          display: block;
+          --heading-line-clamp: ${n};
+        }
+
+        :host([truncate]) {
+          min-width: 0;
+          max-width: 100%;
+          width: 100%;
+        }
 
         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;
+          width: 100%;
+        }
+
+        .content {
+          max-width: 100%;
+          min-width: 0;
+        }
+
+        :host([truncate]) .content {
+          display: block;
+          max-width: 100%;
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        :host([clamp]:not([truncate])) .content {
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: var(--heading-line-clamp);
         }
 
         .size-1 { font-size: var(--heading-font-size-100); line-height: var(--heading-line-height-100); }
@@ -32,10 +65,14 @@ class n extends HTMLElement {
         .size-5 { font-size: var(--heading-font-size-500); line-height: var(--heading-line-height-500); }
         .size-6 { font-size: var(--heading-font-size-600); line-height: var(--heading-line-height-600); }
       </style>
-      <${e} class="size-${i}">
-        <slot></slot>
-      </${e}>
+      <${t} class="size-${e}">
+        <span class="content"><slot></slot></span>
+      </${t}>
     `;
   }
+  getLineClamp() {
+    const e = Number(this.getAttribute("clamp"));
+    return Number.isFinite(e) && e > 0 ? Math.floor(e) : 2;
+  }
 }
-customElements.get("mui-heading") || customElements.define("mui-heading", n);
+customElements.get("mui-heading") || customElements.define("mui-heading", a);

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

@@ -133,11 +133,11 @@ class T extends HTMLElement {
   }
   getDelay() {
     const t = Number(this.getAttribute("delay"));
-    return Number.isFinite(t) ? Math.min(2e3, Math.max(1e3, t)) : 1500;
+    return Number.isFinite(t) ? Math.min(2e3, Math.max(250, t)) : 500;
   }
   getInitialDelay() {
     const t = Number(this.getAttribute("initial-delay"));
-    return Number.isFinite(t) ? Math.min(2e3, Math.max(1e3, t)) : 1500;
+    return Number.isFinite(t) ? Math.min(2e3, Math.max(250, t)) : 500;
   }
   openWithDelay() {
     this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null);