@muibook/components 19.6.0 → 20.1.0

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

@@ -1,30 +1,75 @@
-import { getPartMap as a } from "../../utils/part-map/index.js";
+import { getPartMap as l } from "../../utils/part-map/index.js";
 import "../mui-icons/down-chevron/index.js";
-class x extends HTMLElement {
+class I extends HTMLElement {
   constructor() {
     super(), this.partMap = "", this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["name", "value", "id", "label", "options", "disabled", "hide-label", "variant", "optional", "size"];
+    return [
+      "name",
+      "value",
+      "id",
+      "label",
+      "options",
+      "disabled",
+      "hide-label",
+      "variant",
+      "optional",
+      "size",
+      "appearance",
+      "selected-content",
+      "col",
+      "space",
+      "max-height",
+      "padding-block",
+      "padding-inline"
+    ];
+  }
+  get value() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("select");
+    return (e == null ? void 0 : e.value) ?? this.getAttribute("value") ?? "";
+  }
+  set value(e) {
+    this.setAttribute("value", e ?? "");
+  }
+  focus(e) {
+    var a;
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("select");
+    t ? t.focus(e) : super.focus(e);
   }
   async connectedCallback() {
-    this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), this.partMap = a("text", "visual"), this.render(), this.setupListener();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), this.partMap = l("text", "visual"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, t, r) {
-    if (!this.shadowRoot || t === r) return;
-    const o = this.shadowRoot.querySelector("select");
-    if (e === "value" && o) {
-      o.value = r || "";
+  attributeChangedCallback(e, t, a) {
+    if (!this.shadowRoot || t === a) return;
+    const r = this.shadowRoot.querySelector("select");
+    if (e === "value" && r) {
+      r.value = a || "";
       return;
     }
-    if (e === "disabled" && o) {
-      r === null || r === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
+    if (e === "disabled" && r) {
+      a === null || a === "false" ? r.removeAttribute("disabled") : r.setAttribute("disabled", "");
       return;
     }
-    ["options", "label", "hide-label", "variant", "optional", "size"].includes(e) && (this.render(), this.setupListener());
+    [
+      "options",
+      "label",
+      "hide-label",
+      "variant",
+      "optional",
+      "size",
+      "appearance",
+      "selected-content",
+      "col",
+      "space",
+      "max-height",
+      "padding-block",
+      "padding-inline"
+    ].includes(e) && (this.render(), this.setupListener());
   }
   cleanupListeners() {
     var t;
@@ -35,33 +80,42 @@ class x extends HTMLElement {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("select");
     e && (this.cleanupListeners(), this._changeHandler = (t) => {
-      const r = t.target;
-      this.setAttribute("value", r.value);
-      const o = {
-        detail: { value: r.value },
+      const a = t.target;
+      this.setAttribute("value", a.value);
+      const r = {
+        detail: { value: a.value },
         bubbles: !0,
         composed: !0
       };
-      this.dispatchEvent(new CustomEvent("change", o)), this.dispatchEvent(new CustomEvent("input", o));
+      this.dispatchEvent(new CustomEvent("change", r)), this.dispatchEvent(new CustomEvent("input", r));
     }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler));
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("name") || "", t = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, r = this.getAttribute("label") || "", o = this.getAttribute("value") || "", s = this.hasAttribute("hide-label"), d = this.hasAttribute("optional"), v = this.hasAttribute("disabled"), p = this.getAttribute("options") || "[]", n = this.getAttribute("size") || "medium", l = ["x-small", "small", "medium", "large"].includes(n) ? n : "medium", u = {
+    const e = this.getAttribute("name") || "", t = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, a = this.getAttribute("label") || "", r = this.getAttribute("value") || "", c = this.hasAttribute("hide-label"), f = this.hasAttribute("optional"), x = this.hasAttribute("disabled"), k = this.getAttribute("options") || "[]", d = this.getAttribute("size") || "medium", i = this.getAttribute("appearance") === "custom" ? "custom" : "native", z = this.getAttribute("selected-content") === "label" ? "label" : "rich", w = this.getAttribute("col") || "1fr", $ = this.getAttribute("space") || "var(--space-100)", p = this.getAttribute("max-height") || "", o = this.getAttribute("padding-block") || "", n = this.getAttribute("padding-inline") || "", h = ["x-small", "small", "medium", "large"].includes(d) ? d : "medium", A = {
       "x-small": "xx-small",
       small: "x-small",
       medium: "x-small",
       large: "small"
-    }[l] || "x-small", c = this.getAttribute("variant") || "", g = c || "", b = s && r ? `aria-label="${r}"` : "";
-    let h = [];
+    }[h] || "x-small", u = this.getAttribute("variant") || "", E = u || "", y = c && a ? `aria-label="${a}"` : "";
+    let v = [];
     try {
-      h = JSON.parse(p);
-    } catch (i) {
-      console.error("Invalid JSON in options attribute", i);
+      v = JSON.parse(k);
+    } catch (s) {
+      console.error("Invalid JSON in options attribute", s);
     }
-    const m = h.map(
-      (i) => `<option value="${i.value}" ${i.value === o ? "selected" : ""} ${i.disabled ? "disabled" : ""}>${i.label}</option>`
-    ).join(""), f = (
+    const g = Array.from(this.querySelectorAll(":scope > option")), b = i === "custom" && g.length > 0 ? g : null, S = b ? b.map((s) => {
+      const m = s.getAttribute("value") || "", H = m === r || s.hasAttribute("selected"), R = s.hasAttribute("disabled");
+      return `<option value="${m}" ${H ? "selected" : ""} ${R ? "disabled" : ""}>${s.innerHTML}</option>`;
+    }).join("") : v.map(
+      (s) => `<option value="${s.value}" ${s.value === r ? "selected" : ""} ${s.disabled ? "disabled" : ""}>${s.label}</option>`
+    ).join(""), C = i === "custom" && z === "rich" ? "<button><selectedcontent></selectedcontent></button>" : "", L = i === "custom" ? "" : `<mui-icon-down-chevron class="chevron" size="${A}"></mui-icon-down-chevron>`, M = `
+      --select-picker-col: ${w};
+      --select-picker-space: ${$};
+      ${p ? `--select-picker-max-height: ${p};` : ""}
+      ${o ? `--select-padding-block: ${o}; --select-option-padding-block: ${o};` : ""}
+      ${n ? `--select-padding-inline: ${n}; --select-option-padding-inline: ${n};` : ""}
+    `, T = (
       /*html*/
       `
       <style>
@@ -96,40 +150,174 @@ class x extends HTMLElement {
         select {
           min-height: 4.4rem;
           line-height: var(--text-line-height);
-          padding: var(--space-200) var(--space-300);
+          --select-padding-block-start-default: var(--space-200);
+          --select-padding-block-end-default: var(--space-200);
+          --select-padding-inline-start-default: var(--space-300);
+          --select-padding-inline-end-default: var(--space-300);
+          padding-block: var(
+            --select-padding-block,
+            var(--select-padding-block-start-default) var(--select-padding-block-end-default)
+          );
+          padding-inline: var(
+            --select-padding-inline,
+            var(--select-padding-inline-start-default) var(--select-padding-inline-end-default)
+          );
           font-size: var(--text-font-size);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
-          border-radius: var(--radius-100);
+          border-radius: var(--form-radius-medium);
           color: var(--form-default-text-color);
           background: var(--input-background);
           width: 100%;
           box-sizing: border-box;
           appearance: none;
         }
+        select.appearance-custom,
+        select.appearance-custom::picker(select) {
+          appearance: base-select;
+          font: inherit;
+          color: var(--form-default-text-color);
+        }
+        select.appearance-custom {
+          cursor: pointer;
+        }
+        select.appearance-custom button {
+          appearance: none;
+          border: 0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: var(--space-100);
+          padding: 0;
+          width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+          background: transparent;
+          color: inherit;
+          font: inherit;
+          text-align: left;
+        }
+        select.appearance-custom selectedcontent {
+          min-width: 0;
+          flex: 1 1 auto;
+        }
+        select.appearance-custom::picker-icon {
+          content: "";
+          display: inline-block;
+          width: var(--select-picker-icon-size, var(--space-400));
+          height: var(--select-picker-icon-size, var(--space-400));
+          flex: 0 0 auto;
+          align-self: center;
+          background: currentColor;
+          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 25c-.79 0-1.428-.269-2.091-.917L6.7 15.072C6.23 14.595 6 14.069 6 13.42 6 12.101 7.122 11 8.487 11c.688 0 1.326.281 1.849.795l7.69 7.617 7.65-7.617c.524-.526 1.161-.795 1.837-.795C28.878 11 30 12.1 30 13.421c0 .648-.217 1.186-.701 1.638l-9.195 9.024c-.663.636-1.288.917-2.104.917'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 25c-.79 0-1.428-.269-2.091-.917L6.7 15.072C6.23 14.595 6 14.069 6 13.42 6 12.101 7.122 11 8.487 11c.688 0 1.326.281 1.849.795l7.69 7.617 7.65-7.617c.524-.526 1.161-.795 1.837-.795C28.878 11 30 12.1 30 13.421c0 .648-.217 1.186-.701 1.638l-9.195 9.024c-.663.636-1.288.917-2.104.917'/%3E%3C/svg%3E");
+          -webkit-mask-position: center;
+          mask-position: center;
+          -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+          -webkit-mask-size: 100% 100%;
+          mask-size: 100% 100%;
+          transition: transform var(--speed-200) ease;
+        }
+        select.appearance-custom:open::picker-icon {
+          transform: rotate(180deg);
+        }
+        select.appearance-custom::picker(select) {
+          display: none;
+          grid-template-columns: var(--select-picker-col, 1fr);
+          gap: var(--select-picker-space, var(--space-100));
+          max-height: var(--select-picker-max-height, none);
+          overflow: auto;
+          margin-block-start: var(--space-100);
+          padding: var(--space-100);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--radius-200);
+          background: var(--input-background);
+          box-shadow: var(--shadow-300);
+          box-sizing: border-box;
+          box-shadow: var(--shadow-thick);
+        }
+        select.appearance-custom:open::picker(select) {
+          display: grid;
+        }
+        select.appearance-custom option {
+          display: block;
+          min-width: 0;
+          padding-block: var(
+            --select-option-padding-block,
+            var(--select-padding-block-start-default) var(--select-padding-block-end-default)
+          );
+          padding-inline: var(
+            --select-option-padding-inline,
+            var(--select-padding-inline-start-default) var(--select-padding-inline-end-default)
+          );
+          border-radius: var(--radius-100);
+          background: transparent;
+          color: var(--form-default-text-color);
+        }
+        select.appearance-custom option:hover,
+        select.appearance-custom option:focus-visible {
+          background: var(--action-tertiary-background-hover);
+        }
+        select.appearance-custom option:checked {
+          background: var(--action-tertiary-background-focus);
+        }
+        select.appearance-custom option::checkmark {
+          display: none;
+        }
         select.size-x-small {
-          min-height: var(--action-icon-only-size-x-small);
-          padding: var(--action-padding-x-small);
+          min-height: var(--action-size-x-small);
+          --select-padding-block-start-default: var(--space-050);
+          --select-padding-block-end-default: var(--space-050);
+          --select-padding-inline-start-default: var(--space-100);
+          --select-padding-inline-end-default: var(--space-100);
           font-size: var(--text-font-size-xs);
           line-height: var(--text-line-height-xs);
+          border-radius: var(--form-radius-x-small);
         }
         select.size-small {
-          min-height: var(--action-icon-only-size-small);
-          padding: var(--action-padding-small);
+          min-height: var(--action-size-small);
+          --select-padding-block-start-default: var(--space-100);
+          --select-padding-block-end-default: var(--space-100);
+          --select-padding-inline-start-default: var(--space-200);
+          --select-padding-inline-end-default: var(--space-200);
           font-size: var(--text-font-size-s);
           line-height: var(--text-line-height-s);
+          border-radius: var(--form-radius-small);
         }
         select.size-medium {
-          min-height: 4.4rem;
-          padding: var(--space-200) var(--space-300);
+          min-height: var(--action-size-medium);
+          --select-padding-block-start-default: var(--space-200);
+          --select-padding-block-end-default: var(--space-200);
+          --select-padding-inline-start-default: var(--space-300);
+          --select-padding-inline-end-default: var(--space-300);
           font-size: var(--text-font-size);
           line-height: var(--text-line-height);
+          border-radius: var(--form-radius-medium);
         }
         select.size-large {
-          min-height: var(--action-icon-only-size-large);
-          padding: var(--space-300) var(--space-400);
+          min-height: var(--action-size-large);
+          --select-padding-block-start-default: var(--space-300);
+          --select-padding-block-end-default: var(--space-300);
+          --select-padding-inline-start-default: var(--space-400);
+          --select-padding-inline-end-default: var(--space-400);
           font-size: var(--text-font-size-l);
           line-height: var(--text-line-height-l);
+          border-radius: var(--form-radius-large);
+        }
+        select.appearance-custom.size-x-small {
+          --select-picker-icon-size: 1.3rem;
+        }
+        select.appearance-custom.size-small {
+          --select-picker-icon-size: var(--space-400);
+          --select-padding-inline-end-default: var(--space-200);
+        }
+        select.appearance-custom.size-medium {
+          --select-picker-icon-size: var(--space-400);
+        }
+        select.appearance-custom.size-large {
+          --select-picker-icon-size: 2.1rem;
         }
         select:hover {
           border-color: var(--form-default-border-color-hover);
@@ -284,29 +472,30 @@ class x extends HTMLElement {
         /* ========================================================================== */
 
       </style>
-      ${r ? (
+      ${a ? (
         /*html*/
-        `<label for="${t}" class="${s ? "vh" : ""}">${r}${d ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>`
+        `<label for="${t}" class="${c ? "vh" : ""}">${a}${f ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>`
       ) : ""}
       <div style="position: relative;">
-        <select class="${[g, `size-${l}`].filter(Boolean).join(" ")}" part="${this.partMap || ""}" name="${e}" id="${t}" ${b} 
-        ${v ? "disabled" : ""}>
-          ${m}
+        <select class="${[E, `size-${h}`, `appearance-${i}`].filter(Boolean).join(" ")}" part="${this.partMap || ""}" name="${e}" id="${t}" ${y} style="${M}"
+        ${x ? "disabled" : ""}>
+          ${C}
+          ${S}
         </select>
-        <mui-icon-down-chevron class="chevron" size="${u}"></mui-icon-down-chevron>
+        ${L}
       </div>
     `
     );
-    this.shadowRoot.innerHTML = f;
+    this.shadowRoot.innerHTML = T;
   }
   waitForPartMap() {
     return new Promise((e) => {
-      if (typeof a == "function") return e();
+      if (typeof l == "function") return e();
       const t = () => {
-        typeof a == "function" ? e() : requestAnimationFrame(t);
+        typeof l == "function" ? e() : requestAnimationFrame(t);
       };
       t();
     });
   }
 }
-customElements.get("mui-select") || customElements.define("mui-select", x);
+customElements.get("mui-select") || customElements.define("mui-select", I);

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

@@ -16,8 +16,8 @@ class i extends HTMLElement {
     var t;
     const a = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("slot");
     a == null || a.forEach((r) => {
-      r.assignedElements({ flatten: !0 }).forEach((s) => {
-        s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", "small");
+      r.assignedElements({ flatten: !0 }).forEach((o) => {
+        o.tagName.toLowerCase() === "mui-avatar" && o.setAttribute("size", "small");
       });
     });
   }
@@ -30,8 +30,8 @@ class i extends HTMLElement {
     var t;
     const a = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("slot");
     a == null || a.forEach((r) => {
-      r.assignedElements({ flatten: !0 }).forEach((s) => {
-        s.setAttribute("role", "cell");
+      r.assignedElements({ flatten: !0 }).forEach((o) => {
+        o.setAttribute("role", "cell");
       });
     });
   }
@@ -39,7 +39,7 @@ class i extends HTMLElement {
     return this.querySelector('[slot="accessory"]') !== null;
   }
   render() {
-    const a = this.variant === "action", t = this.getAttribute("col") || (a ? "minmax(0, 1fr) auto" : "1fr 1fr"), r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
+    const a = this.variant === "action", t = this.getAttribute("col") || (a ? "minmax(0, 1fr) auto" : "1fr 1fr"), r = this.getAttribute("space") || "var(--space-500)", s = this.hasAccessorySlot(), o = (
       /*css*/
       `
       :host {
@@ -56,6 +56,20 @@ class i extends HTMLElement {
         border-radius: var(--slat-radius);
       }
 
+      :host([variant="row"][card-slot][condensed-slot]) {
+        border-radius: 0;
+      }
+
+      :host([variant="row"][card-slot][condensed-slot-first]) {
+        border-top-left-radius: var(--card-radius);
+        border-top-right-radius: var(--card-radius);
+      }
+
+      :host([variant="row"][card-slot][condensed-slot-last]) {
+        border-bottom-left-radius: var(--card-radius);
+        border-bottom-right-radius: var(--card-radius);
+      }
+
       :host([variant="header"]) {
         padding: var(--space-200) var(--space-400);
         padding-top: var(--space-400);
@@ -120,12 +134,12 @@ class i extends HTMLElement {
         border-radius: 0;
       }
 
-      :host([radius="none"][condensed-slot]:first-of-type) .action::part(border-radius) {
+      :host([radius="none"][condensed-slot-first]) .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) {
+      :host([radius="none"][condensed-slot-last]) .action::part(border-radius) {
         border-bottom-left-radius: var(--card-radius);
         border-bottom-right-radius: var(--card-radius);
       }
@@ -133,21 +147,35 @@ class i extends HTMLElement {
       ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-avatar-background);
       }
+      ::slotted(mui-avatar-group) {
+        --avatar-group-ring-color: var(--slat-background);
+      }
       .action:hover ::slotted(mui-avatar),
       .action:focus ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-avatar-background-hover);
       }
+      .action:hover ::slotted(mui-avatar-group),
+      .action:focus ::slotted(mui-avatar-group) {
+        --avatar-group-ring-color: var(--slat-background-hover);
+      }
 
       :host([card-slot]) ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-card-avatar-background);
       }
+      :host([card-slot]) ::slotted(mui-avatar-group) {
+        --avatar-group-ring-color: var(--slat-card-background);
+      }
       :host([card-slot]) .action:hover ::slotted(mui-avatar),
       :host([card-slot]) .action:focus ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-card-avatar-background-hover);
       }
+      :host([card-slot]) .action:hover ::slotted(mui-avatar-group),
+      :host([card-slot]) .action:focus ::slotted(mui-avatar-group) {
+        --avatar-group-ring-color: var(--slat-card-background-hover);
+      }
 
     `
-    ), o = e ? `
+    ), e = s ? `
         <mui-h-stack alignY="center" space="var(--space-400)">
           <slot name="accessory"></slot>
           <slot name="start"></slot>
@@ -156,9 +184,9 @@ class i extends HTMLElement {
     this.shadowRoot.innerHTML = a ? (
       /*html*/
       `
-        <style>${s}</style>
+        <style>${o}</style>
         <mui-button variant="tertiary" class="action">
-          ${o}
+          ${e}
           <div class="end" slot="after">
             <slot name="end"></slot>
             <mui-icon-right-chevron size="x-small"></mui-icon-right-chevron>
@@ -169,8 +197,8 @@ class i extends HTMLElement {
     ) : (
       /*html*/
       `
-        <style>${s}</style>
-        ${o}
+        <style>${o}</style>
+        ${e}
         <slot name="end"></slot>
       `
     ), requestAnimationFrame(() => this.applyCellRoles());

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

@@ -1,5 +1,5 @@
 import "../mui-icons/spinner/index.js";
-class o extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color", "duration", "label"];
   }
@@ -9,18 +9,20 @@ class o extends HTMLElement {
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("duration") || this.setAttribute("duration", "0.8s"), this.hasAttribute("color") || this.setAttribute("color", "default"), this.render();
   }
-  attributeChangedCallback(t, e, i) {
-    e !== i && this.render();
+  attributeChangedCallback(e, t, i) {
+    t !== i && this.render();
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("size") || "medium", e = this.getAttribute("duration") || "0.8s", i = this.getAttribute("color") || "default", s = this.getAttribute("label") || "Loading", n = {
+    const e = this.getAttribute("size") || "medium", t = this.getAttribute("duration") || "0.8s", i = this.getAttribute("color") || "default", s = this.getAttribute("label") || "Loading", n = {
       "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
-      large: "2.8rem"
-    }, r = n[t] || n.medium;
+      large: "2.8rem",
+      "x-large": "3.6rem",
+      "xx-large": "4.8rem"
+    }, r = n[e] || n.medium;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -34,7 +36,7 @@ class o extends HTMLElement {
         .spinner {
           width: 100%;
           height: 100%;
-          animation: spin ${e} linear infinite;
+          animation: spin ${t} linear infinite;
           box-sizing: border-box;
           display: inline-flex;
           align-items: center;
@@ -62,9 +64,9 @@ class o extends HTMLElement {
       </style>
       <span class="vh">${s}</span>
       <span class="spinner" role="status" aria-label="${s}">
-        <mui-icon-spinner size="${t}" color="${i}"></mui-icon-spinner>
+        <mui-icon-spinner size="${e}" color="${i}"></mui-icon-spinner>
       </span>
     `;
   }
 }
-customElements.get("mui-spinner") || customElements.define("mui-spinner", o);
+customElements.get("mui-spinner") || customElements.define("mui-spinner", a);

package/dist/esm/components/mui-stack/hstack/index.js

@@ -1,10 +1,10 @@
 import { getPartMap as a } from "../../../utils/part-map/index.js";
-class h extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "aligny", "alignx", "padding", "height", "width", "viewport", "fill"];
+    return ["space", "aligny", "alignx", "padding", "height", "width", "viewport", "fill", "wrap"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.styles = /*css*/
+    super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.wrap = "nowrap", this.styles = /*css*/
     `
       :host {
         display: block;
@@ -20,6 +20,7 @@ class h extends HTMLElement {
         padding: var(--padding);
         align-items: var(--alignY);
         justify-content: var(--alignX);
+        flex-wrap: var(--wrap);
       }
       :host([height]) slot,
       :host([viewport]) slot,
@@ -46,6 +47,7 @@ class h extends HTMLElement {
           --padding: ${this.getAttribute("padding") || "var(--space-000)"};
           --alignY: ${this.getAttribute("aligny") || this.alignY};
           --alignX: ${this.getAttribute("alignx") || this.alignX};
+          --wrap: ${this.resolveWrap(this.getAttribute("wrap"))};
         ">
       </slot>
     `;
@@ -53,12 +55,15 @@ class h extends HTMLElement {
   attributeChangedCallback(t, i, s) {
     if (i === s || ((t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions(), !this.shadowRoot)) return;
     const e = this.shadowRoot.querySelector("slot");
-    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX));
+    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "wrap" && e.style.setProperty("--wrap", this.resolveWrap(s)));
   }
   syncDimensions() {
     const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
     this.style.setProperty("--stack-height", t), this.style.setProperty("--stack-width", i);
   }
+  resolveWrap(t) {
+    return t === null || t === "" ? this.hasAttribute("wrap") ? "wrap" : this.wrap : t;
+  }
   waitForPartMap() {
     return new Promise((t) => {
       if (typeof a == "function") return t();
@@ -69,4 +74,4 @@ class h extends HTMLElement {
     });
   }
 }
-customElements.get("mui-h-stack") || customElements.define("mui-h-stack", h);
+customElements.get("mui-h-stack") || customElements.define("mui-h-stack", r);