@muibook/components 18.1.1 → 19.0.0

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

@@ -47,7 +47,7 @@ class l extends HTMLElement {
       ::slotted([slot="before"]),
       ::slotted([slot="after"]) {
         flex-shrink: 0;
-        margin-top: var(--body-inline-icon-offset-medium, var(--body-inline-icon-offset, var(--stroke-size-100)));
+        margin-top: var(--body-inline-icon-offset-medium, var(--body-inline-icon-offset, var(--stroke-size-200)));
       }
 
       :host([size="x-small"]) ::slotted([slot="before"]),
@@ -57,12 +57,14 @@ class l extends HTMLElement {
 
       :host([size="small"]) ::slotted([slot="before"]),
       :host([size="small"]) ::slotted([slot="after"]) {
-        margin-top: var(--body-inline-icon-offset-small, var(--body-inline-icon-offset, var(--stroke-size-100)));
+        margin-top: var(
+          --body-inline-icon-offset-small, var(--body-inline-icon-offset)
+        );
       }
 
       :host([size="large"]) ::slotted([slot="before"]),
       :host([size="large"]) ::slotted([slot="after"]) {
-        margin-top: var(--body-inline-icon-offset-large, var(--body-inline-icon-offset, var(--stroke-size-100)));
+        margin-top: var(--body-inline-icon-offset-large, var(--body-inline-icon-offset, var(--stroke-size-050)));
       }
 
       :host([size="x-small"]) p {

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

@@ -515,6 +515,31 @@ class h extends HTMLElement {
       border-radius: var(--action-radius-large);
     }
 
+    /* Dropdown slot corner radius must win over size radius rules */
+    :host([size][dropdown-slot]) button,
+    :host([size][dropdown-slot]) button:hover,
+    :host([size][dropdown-slot]) button:focus,
+    :host([size][dropdown-slot]) button:disabled {
+      border-radius: var(--radius-000);
+      white-space: nowrap;
+    }
+
+    :host([size][dropdown-slot-first]) button,
+    :host([size][dropdown-slot-first]) button:hover,
+    :host([size][dropdown-slot-first]) button:focus,
+    :host([size][dropdown-slot-first]) button:disabled {
+      border-top-left-radius: calc(var(--radius-100) / 2);
+      border-top-right-radius: calc(var(--radius-100) / 2);
+    }
+
+    :host([size][dropdown-slot-last]) button,
+    :host([size][dropdown-slot-last]) button:hover,
+    :host([size][dropdown-slot-last]) button:focus,
+    :host([size][dropdown-slot-last]) button:disabled {
+      border-bottom-left-radius: calc(var(--radius-100) / 2);
+      border-bottom-right-radius: calc(var(--radius-100) / 2);
+    }
+
     :host([size="xx-small"][icon-only]) button {
       height: calc(var(--action-icon-only-size-x-small) - var(--space-100));
       width: calc(var(--action-icon-only-size-x-small) - var(--space-100));
@@ -638,19 +663,19 @@ class h extends HTMLElement {
     this.shadowRoot.innerHTML = o, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
       const s = this.shadowRoot;
       if (!s) return;
-      const e = s.querySelector("slot:not([name])"), t = s.querySelector('slot[name="before"]'), a = s.querySelector('slot[name="after"]'), i = (c) => c ? c.assignedNodes({ flatten: !0 }).some((n) => {
+      const e = s.querySelector("slot:not([name])"), t = s.querySelector('slot[name="before"]'), a = s.querySelector('slot[name="after"]'), i = (d) => d ? d.assignedNodes({ flatten: !0 }).some((n) => {
         var l;
         return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((l = n.textContent) != null && l.trim());
-      }) : !1, d = i(t), u = i(a);
-      this.toggleAttribute("has-before", d), this.toggleAttribute("has-after", u);
+      }) : !1, c = i(t), u = i(a);
+      this.toggleAttribute("has-before", c), this.toggleAttribute("has-after", u);
       const v = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) ?? [];
-      v.every((c) => {
+      v.every((d) => {
         var n;
-        if (c.nodeType === Node.ELEMENT_NODE) {
-          const l = c;
+        if (d.nodeType === Node.ELEMENT_NODE) {
+          const l = d;
           return l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon");
         }
-        return c.nodeType === Node.TEXT_NODE && !((n = c.textContent) != null && n.trim());
+        return d.nodeType === Node.TEXT_NODE && !((n = d.textContent) != null && n.trim());
       }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(v, !0)) : (this.removeAttribute("icon-only"), [t, e, a].forEach((n) => {
         if (n) {
           const l = n.assignedNodes({ flatten: !0 });
@@ -673,9 +698,9 @@ class h extends HTMLElement {
         t.querySelector('slot[name="before"]'),
         t.querySelector('slot[name="after"]')
       ], i = this.hasAttribute("icon-only");
-      a.forEach((d) => {
-        if (d) {
-          const u = d.assignedNodes({ flatten: !0 });
+      a.forEach((c) => {
+        if (c) {
+          const u = c.assignedNodes({ flatten: !0 });
           this.updateIconSizes(u, i), this.updateAvatarSizes(u), this.updateBadgeSizes(u);
         }
       });

package/dist/esm/components/mui-card/body/index.js

@@ -1,4 +1,4 @@
-class d extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["condensed"];
   }
@@ -32,8 +32,8 @@ class d extends HTMLElement {
           c instanceof HTMLElement && (c.querySelectorAll("mui-cell").forEach((o) => {
             o.setAttribute("card-slot", "");
           }), r = !0);
-          const l = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          l.length && (r = !0, l.forEach((e) => {
+          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          d.length && (r = !0, d.forEach((e) => {
             e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.setAttribute("has-accordion-slat-group", "") : (this.setAttribute("inner-space", ""), this.setAttribute("has-card-slat-group", ""));
           }));
         }
@@ -64,9 +64,16 @@ class d extends HTMLElement {
           padding-bottom: var(--space-200);
         }
         @media (min-width: 768px) {
-        :host([has-card-slat-group]) {
-          padding-bottom: var(--space-500);
+          :host([has-card-slat-group]) {
+            padding-bottom: var(--space-500);
+          }
         }
+
+        :host([condensed]),
+        :host([condensed][inner-space]),
+        :host([condensed][has-card-slat-group]),
+        :host([condensed][has-accordion-slat-group]) {
+          padding: var(--space-000);
         }
         
       </style>
@@ -76,4 +83,4 @@ class d extends HTMLElement {
     this.shadowRoot.innerHTML = s, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", d);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", l);

package/dist/esm/components/mui-carousel/controller/index.js

@@ -1,4 +1,4 @@
-class a extends HTMLElement {
+class n extends HTMLElement {
   constructor() {
     super(), this.currentIndex = 0, this.boundMouseEnter = () => this.pauseAutoRotate(), this.boundMouseLeave = () => this.resumeAutoRotate(), this.boundFocusIn = () => this.pauseAutoRotate(), this.boundFocusOut = () => this.resumeAutoRotate(), this.shadow = this.attachShadow({ mode: "open" }), this.handleTabChange = this.handleTabChange.bind(this);
   }
@@ -7,13 +7,13 @@ class a extends HTMLElement {
   }
   connectedCallback() {
     this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.render(), this.addEventListener("tab-change", this.handleTabChange);
-    const t = this.querySelector("tab-bar");
+    const t = this.querySelector("mui-tab-bar");
     if (t) {
-      const e = t.querySelector("tab-item[active]");
+      const e = t.querySelector("mui-tab-item[active]");
       if (e)
         this.updatePanels(e.id);
       else {
-        const o = t.querySelector("tab-item");
+        const o = t.querySelector("mui-tab-item");
         o && (o.setAttribute("active", ""), this.updatePanels(o.id));
       }
     }
@@ -56,11 +56,11 @@ class a extends HTMLElement {
     const o = t[this.currentIndex].getAttribute("item");
     if (console.log("➡️ Rotating to index:", this.currentIndex, "itemId:", o), o) {
       this.updatePanels(o);
-      const s = this.querySelector("tab-bar");
+      const s = this.querySelector("mui-tab-bar");
       if (s) {
-        const r = s.querySelector(`tab-item#${o}`);
-        r && (s.querySelectorAll("tab-item").forEach((n) => {
-          n.removeAttribute("active");
+        const r = s.querySelector(`mui-tab-item#${o}`);
+        r && (s.querySelectorAll("mui-tab-item").forEach((i) => {
+          i.removeAttribute("active");
         }), r.setAttribute("active", ""));
       }
     }
@@ -173,7 +173,7 @@ class a extends HTMLElement {
       console.error("❌ Track element not found!");
       return;
     }
-    const s = Array.from(e).findIndex((n) => n.getAttribute("item") === t);
+    const s = Array.from(e).findIndex((i) => i.getAttribute("item") === t);
     if (s === -1) {
       console.warn("⚠️ Panel not found for:", t);
       return;
@@ -183,4 +183,4 @@ class a extends HTMLElement {
     console.log("🎬 Setting transform to:", r), console.log("📏 Current transform:", o.style.transform), console.log("🎨 Current transition:", window.getComputedStyle(o).transition), o.style.transform = r, o.offsetHeight, console.log("✅ After setting transform:", o.style.transform);
   }
 }
-customElements.get("mui-carousel-controller") || customElements.define("mui-carousel-controller", a);
+customElements.get("mui-carousel-controller") || customElements.define("mui-carousel-controller", n);

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

@@ -1,5 +1,6 @@
 import "../mui-input/index.js";
 import "../mui-chip/index.js";
+import "../mui-button/index.js";
 import "../mui-stack/hstack/index.js";
 class w extends HTMLElement {
   constructor() {
@@ -83,16 +84,16 @@ class w extends HTMLElement {
     try {
       e = JSON.parse(t);
     } catch {
-      e = t.split(",").map((l) => l.trim()).filter(Boolean);
+      e = t.split(",").map((o) => o.trim()).filter(Boolean);
     }
     if (!Array.isArray(e)) return [];
     const i = new Map(this.parseOptions().map((a) => [a.value.toLowerCase(), a])), s = e.map((a) => {
-      const l = this.normalizeOption(a);
-      return l ? i.get(l.value.toLowerCase()) || l : null;
+      const o = this.normalizeOption(a);
+      return o ? i.get(o.value.toLowerCase()) || o : null;
     }).filter((a) => !!a), r = /* @__PURE__ */ new Set();
     return s.filter((a) => {
-      const l = a.value.toLowerCase();
-      return r.has(l) ? !1 : (r.add(l), !0);
+      const o = a.value.toLowerCase();
+      return r.has(o) ? !1 : (r.add(o), !0);
     });
   }
   syncSelectedFromAttribute() {
@@ -115,6 +116,10 @@ class w extends HTMLElement {
   get placement() {
     return this.getAttribute("placement") === "after" ? "after" : "before";
   }
+  set placement(t) {
+    const e = t === "after" ? "after" : "before";
+    this.setAttribute("placement", e);
+  }
   get useStackLayout() {
     if (this.hasAttribute("mobile-stack")) return !0;
     const t = this.getAttribute("breakpoint");
@@ -196,21 +201,15 @@ class w extends HTMLElement {
   handleKeyboard(t) {
     const e = this.filteredOptions, i = e.length + (this.showCreateOption ? 1 : 0);
     if (t.key === "ArrowDown" && i > 0) {
-      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1 + i) % i;
-      const s = this.inputValue.length;
-      this.rerenderAndPreserveFocus(s, s);
+      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1 + i) % i, this.updateListbox();
       return;
     }
     if (t.key === "ArrowUp" && i > 0) {
-      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex - 1 + i) % i;
-      const s = this.inputValue.length;
-      this.rerenderAndPreserveFocus(s, s);
+      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex - 1 + i) % i, this.updateListbox();
       return;
     }
     if (t.key === "Escape") {
-      this.highlightedIndex = -1;
-      const s = this.inputValue.length;
-      this.rerenderAndPreserveFocus(s, s);
+      this.highlightedIndex = -1, this.updateListbox();
       return;
     }
     if (t.key === "Backspace" && !this.inputValue && this.selectedItems.length > 0) {
@@ -228,53 +227,97 @@ class w extends HTMLElement {
   setupListeners() {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector("mui-input");
-    t && (t.oninput = (e) => {
-      var n;
-      const i = this.getInnerInput(), s = (i == null ? void 0 : i.selectionStart) ?? null, r = (i == null ? void 0 : i.selectionEnd) ?? null, a = (n = e.detail) == null ? void 0 : n.value, l = t.getAttribute("value") || "";
-      this.inputValue = a ?? l, this.highlightedIndex = -1, this.emitQueryChange(), this.rerenderAndPreserveFocus(s, r);
-    }, t.onkeydown = (e) => {
-      this.handleKeyboard(e);
-    }, this.shadowRoot.querySelectorAll("[data-option-value]").forEach((e) => {
-      e.addEventListener("mousedown", (i) => {
-        i.preventDefault();
-        const s = e.getAttribute("data-option-value");
-        s && this.addValue(s);
-      });
-    }), this.shadowRoot.querySelectorAll("[data-remove-value]").forEach((e) => {
-      e.addEventListener("dismiss", (i) => {
-        i.stopPropagation();
-        const s = e.getAttribute("data-remove-value");
-        s && !this.disabled && this.removeValue(s);
+    if (!t) return;
+    t.oninput = (i) => {
+      var a;
+      const s = (a = i.detail) == null ? void 0 : a.value, r = t.getAttribute("value") || "";
+      this.inputValue = s ?? r, this.highlightedIndex = -1, this.emitQueryChange(), this.updateListbox();
+    }, t.onkeydown = (i) => {
+      this.handleKeyboard(i);
+    };
+    const e = this.shadowRoot.querySelector(".listbox");
+    e && (e.onmousedown = (i) => {
+      const s = i.target, r = s == null ? void 0 : s.closest("[data-option-value]");
+      if (!r) return;
+      i.preventDefault();
+      const a = r.getAttribute("data-option-value");
+      a && this.addValue(a);
+    }), this.shadowRoot.querySelectorAll("[data-remove-value]").forEach((i) => {
+      i.addEventListener("dismiss", (s) => {
+        s.stopPropagation();
+        const r = i.getAttribute("data-remove-value");
+        r && !this.disabled && this.removeValue(r);
       });
-    }));
+    });
   }
-  render() {
-    const t = this.getAttribute("id") || "", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "Type to add", s = this.hasAttribute("hide-label"), r = this.useStackLayout, a = this.getAttribute("name") || "", l = this.filteredOptions, n = `${t}-listbox`, d = !this.disabled && (l.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0, c = l.map((o, v) => {
-      const h = v === this.highlightedIndex;
+  updateListbox() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".listbox");
+    if (!t) return;
+    const e = this.filteredOptions;
+    if (!(!this.disabled && (e.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0)) {
+      t.hidden = !0, t.innerHTML = "";
+      return;
+    }
+    const s = e.map((o, u) => {
+      const n = u === this.highlightedIndex;
       return (
         /*html*/
         `
-          <button
-            type="button"
-            class="option ${h ? "active" : ""}"
+          <mui-button
+            variant="${n ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${n ? "active" : ""}"
             role="option"
-            aria-selected="${h ? "true" : "false"}"
+            aria-selected="${n ? "true" : "false"}"
             data-option-value="${o.value}"
-          >${o.label}</button>
+          >${o.label}</mui-button>
+        `
+      );
+    }).join(""), r = e.length, a = this.showCreateOption ? (
+      /*html*/
+      `
+          <mui-button
+            variant="${this.highlightedIndex === r ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${this.highlightedIndex === r ? "active" : ""}"
+            role="option"
+            aria-selected="${this.highlightedIndex === r ? "true" : "false"}"
+            data-option-value="${this.inputValue.trim()}"
+          >Add "${this.inputValue.trim()}"</mui-button>
+        `
+    ) : "";
+    t.hidden = !1, t.innerHTML = `${s}${a}`;
+  }
+  render() {
+    const t = this.getAttribute("id") || "", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "Type to add", s = this.hasAttribute("hide-label"), r = this.useStackLayout, a = this.getAttribute("name") || "", o = this.filteredOptions, u = `${t}-listbox`, n = !this.disabled && (o.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0, c = o.map((l, v) => {
+      const d = v === this.highlightedIndex;
+      return (
+        /*html*/
+        `
+          <mui-button
+            variant="${d ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${d ? "active" : ""}"
+            role="option"
+            aria-selected="${d ? "true" : "false"}"
+            data-option-value="${l.value}"
+          >${l.label}</mui-button>
         `
       );
-    }).join(""), u = l.length, p = this.showCreateOption ? (
+    }).join(""), h = o.length, p = this.showCreateOption ? (
       /*html*/
       `
-          <button
-            type="button"
-            class="option ${this.highlightedIndex === u ? "active" : ""}"
+          <mui-button
+            variant="${this.highlightedIndex === h ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${this.highlightedIndex === h ? "active" : ""}"
             role="option"
-            aria-selected="${this.highlightedIndex === u ? "true" : "false"}"
+            aria-selected="${this.highlightedIndex === h ? "true" : "false"}"
             data-option-value="${this.inputValue.trim()}"
-          >Add "${this.inputValue.trim()}"</button>
+          >Add "${this.inputValue.trim()}"</mui-button>
         `
-    ) : "", m = this.placement, b = this.placement === "after" ? "chip-slot-shell after-shell" : "chip-slot-shell before-shell", g = this.selectedItems.length ? (
+    ) : "", m = this.placement, b = this.placement === "after" ? "chip-slot-shell after-shell" : "chip-slot-shell before-shell", f = this.selectedItems.length ? (
       /*html*/
       `
           <mui-h-stack
@@ -284,7 +327,7 @@ class w extends HTMLElement {
             aligny="center"
           >
             ${this.selectedItems.map(
-        (o) => (
+        (l) => (
           /*html*/
           `
                   <mui-chip
@@ -292,15 +335,15 @@ class w extends HTMLElement {
                     size="${this.normalizedSize}"
                     dismiss
                     ${this.disabled ? "disabled" : ""}
-                    data-remove-value="${o.value}"
-                    aria-label="Remove ${o.label}"
-                  >${o.label}</mui-chip>
+                    data-remove-value="${l.value}"
+                    aria-label="Remove ${l.label}"
+                  >${l.label}</mui-chip>
                 `
         )
       ).join("")}
           </mui-h-stack>
         `
-    ) : "", f = a ? this.selectedValues.map((o) => `<input type="hidden" name="${a}" value="${o}" />`).join("") : "";
+    ) : "", g = a ? this.selectedValues.map((l) => `<input type="hidden" name="${a}" value="${l}" />`).join("") : "";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -362,16 +405,8 @@ class w extends HTMLElement {
         }
         .option {
           width: 100%;
-          text-align: left;
-          border: none;
-          background: transparent;
-          padding: var(--space-200) var(--space-300);
-          cursor: pointer;
-          color: var(--text-color);
-        }
-        .option.active,
-        .option:hover {
-          background: var(--surface-elevated-200);
+          justify-content: flex-start;
+          --button-width: 100%;
         }
       </style>
 
@@ -391,16 +426,18 @@ class w extends HTMLElement {
           value="${this.inputValue}"
           ${r ? 'slot-layout="stack-mobile"' : ""}
           ${this.disabled ? "disabled" : ""}
-          aria-controls="${n}"
+          aria-controls="${u}"
           aria-autocomplete="list"
         >
-          ${g}
+          ${f}
         </mui-input>
 
-        ${d ? `<div id="${n}" class="listbox" role="listbox">${c}${p}</div>` : ""}
+        <div id="${u}" class="listbox" role="listbox" ${n ? "" : "hidden"}>
+          ${n ? `${c}${p}` : ""}
+        </div>
       </div>
 
-      ${f}
+      ${g}
     `;
   }
 }

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

@@ -1,10 +1,28 @@
 import "../mui-button/index.js";
-class r extends HTMLElement {
+class a extends HTMLElement {
+  static get observedAttributes() {
+    return ["accepted-file-types", "current-file-name", "acceptedfiletypes", "currentfilename"];
+  }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null;
+    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.readAcceptedFileTypes(), this.currentFileName = this.readCurrentFileName(), this.selectedFileName = null;
+  }
+  readAcceptedFileTypes() {
+    return this.getAttribute("accepted-file-types") || this.getAttribute("acceptedFileTypes") || this.getAttribute("acceptedfiletypes") || "";
+  }
+  readCurrentFileName() {
+    return this.getAttribute("current-file-name") || this.getAttribute("currentFileName") || this.getAttribute("currentfilename") || "";
+  }
+  attributeChangedCallback(e, i, t) {
+    if (i !== t) {
+      if (e === "accepted-file-types" || e === "acceptedfiletypes") {
+        this.acceptedFileTypes = this.readAcceptedFileTypes(), this.input && (this.input.accept = this.acceptedFileTypes);
+        return;
+      }
+      (e === "current-file-name" || e === "currentfilename") && (this.currentFileName = this.readCurrentFileName(), !this.selectedFileName && this.label && (this.label.textContent = this.currentFileName || "No file selected"));
+    }
   }
   connectedCallback() {
-    this.render(), this.cacheElements(), this.attachEvents();
+    this.acceptedFileTypes = this.readAcceptedFileTypes(), this.currentFileName = this.readCurrentFileName(), this.render(), this.cacheElements(), this.attachEvents();
   }
   disconnectedCallback() {
     this.cleanupListeners();
@@ -78,7 +96,7 @@ class r extends HTMLElement {
         }
       </style>
       <div class="wrapper">
-        <span class="label">${this.currentFileName}</span>
+        <span class="label">${this.selectedFileName || this.currentFileName || "No file selected"}</span>
         <mui-button variant="tertiary">Browse</mui-button>
         <input type="file" accept="${this.acceptedFileTypes}" />
       </div>
@@ -95,16 +113,16 @@ class r extends HTMLElement {
       this.input.click();
     }, this._inputChangeHandler = this.handleFileChange.bind(this), this.wrapper.addEventListener("click", this._wrapperClickHandler), this.input.addEventListener("change", this._inputChangeHandler);
   }
-  handleFileChange(i) {
-    var t;
-    const e = (t = i.target.files) == null ? void 0 : t[0];
-    e && (this.selectedFileName = e.name, this.label.textContent = e.name, this.dispatchEvent(
+  handleFileChange(e) {
+    var r;
+    const t = (r = e.target.files) == null ? void 0 : r[0];
+    t && (this.selectedFileName = t.name, this.label.textContent = t.name, this.dispatchEvent(
       new CustomEvent("file-upload", {
-        detail: { file: e },
+        detail: { file: t },
         bubbles: !0,
         composed: !0
       })
     ));
   }
 }
-customElements.get("mui-file-upload") || customElements.define("mui-file-upload", r);
+customElements.get("mui-file-upload") || customElements.define("mui-file-upload", a);

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

@@ -1,17 +1,17 @@
-class y extends HTMLElement {
+class T extends HTMLElement {
   constructor() {
     super(), this.openTimer = null, this.closeTimer = null, this.hasOpenedOnce = !1, this.boundReposition = () => this.positionTooltip(), this.boundDocPointer = (t) => {
       t.composedPath().includes(this) || this.close(!0);
     }, this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["placement", "open", "delay", "initial-delay"];
+    return ["placement", "open", "delay", "initial-delay", "size"];
   }
   connectedCallback() {
-    this.hasAttribute("placement") || this.setAttribute("placement", "top"), this.render(), this.setupEvents();
+    this.hasAttribute("placement") || this.setAttribute("placement", "top"), this.render(), this.setupEvents(), this.syncTriggerSize();
   }
   attributeChangedCallback() {
-    this.shadowRoot && this.hasAttribute("open") && requestAnimationFrame(() => this.positionTooltip());
+    this.shadowRoot && (this.syncTriggerSize(), this.hasAttribute("open") && requestAnimationFrame(() => this.positionTooltip()));
   }
   render() {
     if (!this.shadowRoot) return;
@@ -102,11 +102,32 @@ class y extends HTMLElement {
     `;
   }
   setupEvents() {
-    var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".trigger");
-    t && (t.addEventListener("mouseenter", () => this.openWithDelay()), t.addEventListener("mouseleave", () => this.closeWithDelay()), t.addEventListener("focusin", () => this.openWithDelay()), t.addEventListener("focusout", () => this.close(!0)), this.addEventListener("keydown", (h) => {
-      h.key === "Escape" && this.close(!0);
-    }));
+    var r, p;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".trigger");
+    if (!t) return;
+    const o = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="trigger"]');
+    t.addEventListener("mouseenter", () => this.openWithDelay()), t.addEventListener("mouseleave", () => this.closeWithDelay()), t.addEventListener("focusin", () => this.openWithDelay()), t.addEventListener("focusout", () => this.close(!0)), o == null || o.addEventListener("slotchange", () => this.syncTriggerSize()), this.addEventListener("keydown", (m) => {
+      m.key === "Escape" && this.close(!0);
+    });
+  }
+  syncTriggerSize() {
+    var u, i;
+    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector('slot[name="trigger"]');
+    if (!t) return;
+    const o = this.getAttribute("size") || ((i = this.closest("mui-body")) == null ? void 0 : i.getAttribute("size")) || "medium", r = {
+      "x-small": "x-small",
+      small: "small",
+      medium: "small",
+      large: "medium"
+    }, p = {
+      "x-small": "xx-small",
+      small: "x-small",
+      medium: "small",
+      large: "medium"
+    }, m = r[o] || "small", h = p[o] || "small";
+    t.assignedElements({ flatten: !0 }).forEach((s) => {
+      s.tagName.startsWith("MUI-ICON-") && !s.hasAttribute("size") && s.setAttribute("size", m), s.tagName === "MUI-BADGE" && !s.hasAttribute("size") && s.setAttribute("size", h);
+    });
   }
   getDelay() {
     const t = Number(this.getAttribute("delay"));
@@ -131,16 +152,16 @@ class y extends HTMLElement {
     this.openTimer && (window.clearTimeout(this.openTimer), this.openTimer = null), this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null), t && this.setAttribute("closing-immediate", ""), this.removeAttribute("open"), t && requestAnimationFrame(() => this.removeAttribute("closing-immediate")), window.removeEventListener("resize", this.boundReposition), window.removeEventListener("scroll", this.boundReposition, !0), document.removeEventListener("pointerdown", this.boundDocPointer, !0);
   }
   positionTooltip() {
-    var u, g, b, f;
-    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".trigger"), o = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".tooltip");
+    var b, f, w, v;
+    const t = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".trigger"), o = (f = this.shadowRoot) == null ? void 0 : f.querySelector(".tooltip");
     if (!o || !t) return;
-    const h = (b = this.shadowRoot) == null ? void 0 : b.querySelector('slot[name="trigger"]'), w = ((f = h == null ? void 0 : h.assignedElements({ flatten: !0 })) == null ? void 0 : f[0]) || null || t, d = this.getAttribute("placement") || "top", e = w.getBoundingClientRect(), p = this.getBoundingClientRect(), i = o.getBoundingClientRect(), c = window.innerHeight, m = window.innerWidth, n = 8, r = 8;
-    let s = d;
-    d === "top" && e.top - i.height - r < n && (s = "bottom"), d === "bottom" && e.bottom + i.height + r > c - n && (s = "top"), d === "left" && e.left - i.width - r < n && (s = "right"), d === "right" && e.right + i.width + r > m - n && (s = "left"), o.setAttribute("data-placement", s);
-    let a = 0, l = 0;
-    s === "top" ? (a = e.top - i.height - r, l = e.left + e.width / 2 - i.width / 2) : s === "bottom" ? (a = e.bottom + r, l = e.left + e.width / 2 - i.width / 2) : s === "left" ? (a = e.top + e.height / 2 - i.height / 2, l = e.left - i.width - r) : (a = e.top + e.height / 2 - i.height / 2, l = e.right + r), a = Math.max(n, Math.min(a, c - i.height - n)), l = Math.max(n, Math.min(l, m - i.width - n));
-    const v = a - p.top, x = l - p.left;
-    o.style.top = `${v}px`, o.style.left = `${x}px`;
+    const r = (w = this.shadowRoot) == null ? void 0 : w.querySelector('slot[name="trigger"]'), m = ((v = r == null ? void 0 : r.assignedElements({ flatten: !0 })) == null ? void 0 : v[0]) || null || t, h = this.getAttribute("placement") || "top", e = m.getBoundingClientRect(), u = this.getBoundingClientRect(), i = o.getBoundingClientRect(), s = window.innerHeight, g = window.innerWidth, n = 8, a = 8;
+    let l = h;
+    h === "top" && e.top - i.height - a < n && (l = "bottom"), h === "bottom" && e.bottom + i.height + a > s - n && (l = "top"), h === "left" && e.left - i.width - a < n && (l = "right"), h === "right" && e.right + i.width + a > g - n && (l = "left"), o.setAttribute("data-placement", l);
+    let d = 0, c = 0;
+    l === "top" ? (d = e.top - i.height - a, c = e.left + e.width / 2 - i.width / 2) : l === "bottom" ? (d = e.bottom + a, c = e.left + e.width / 2 - i.width / 2) : l === "left" ? (d = e.top + e.height / 2 - i.height / 2, c = e.left - i.width - a) : (d = e.top + e.height / 2 - i.height / 2, c = e.right + a), d = Math.max(n, Math.min(d, s - i.height - n)), c = Math.max(n, Math.min(c, g - i.width - n));
+    const x = d - u.top, y = c - u.left;
+    o.style.top = `${x}px`, o.style.left = `${y}px`;
   }
 }
-customElements.get("mui-hint") || customElements.define("mui-hint", y);
+customElements.get("mui-hint") || customElements.define("mui-hint", T);

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

@@ -108,13 +108,18 @@ class i extends HTMLElement {
         --slat-background-hover: var(--slat-card-background-hover);
       }
 
-      :host([condensed-slot]) .action::part(border-radius) {
-        border-radius: 0; 
+      :host([radius="none"]) .action::part(border-radius) {
+        border-radius: 0;
       }
 
-      :host([condensed-slot]:last-of-type) .action::part(border-radius) {
-        border-bottom-left-radius: var(--card-radius); 
-        border-bottom-right-radius: var(--card-radius); 
+      :host([radius="none"][condensed-slot]:first-of-type) .action::part(border-radius) {
+        border-top-left-radius: var(--card-radius);
+        border-top-right-radius: var(--card-radius);
+      }
+
+      :host([radius="none"][condensed-slot]:last-of-type) .action::part(border-radius) {
+        border-bottom-left-radius: var(--card-radius);
+        border-bottom-right-radius: var(--card-radius);
       }
 
       ::slotted(mui-avatar) {