@muibook/components 19.0.0 → 19.1.0

package/dist/esm/agent/prompts/index.js

@@ -123,7 +123,7 @@ Rules:
       },
       buttonGroup: {
         default: "<mui-button-group>...</mui-button-group>",
-        alignedRight: "<mui-button-group right>...</mui-button-group>"
+        alignedRight: '<mui-button-group align="right">...</mui-button-group>'
       },
       chip: "<mui-chip>...</mui-chip>",
       dropdown: "<mui-dropdown>...</mui-dropdown>",

package/dist/esm/components/mui-accordion/block/index.js

@@ -1,18 +1,54 @@
 import "../../mui-icons/down-chevron/index.js";
 import "../../mui-heading/index.js";
-class u extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
-    super(), this.summaryEl = null, this.detailEl = null, this.chevronEl = null, this.attachShadow({ mode: "open" }), this.accordionId = `accordion-detail-${Math.random().toString(36).substring(2, 9)}`;
+    super(), this.summaryEl = null, this.detailEl = null, this.chevronEl = null, this.detailSlotEl = null, this.handleSummaryClick = () => this.toggleAccordion(), this.handleSummaryKeydown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleAccordion());
+    }, this.handleDetailSlotChange = () => {
+      this.applyAccordionUsage(), this.syncOpenHeight();
+    }, this.attachShadow({ mode: "open" }), this.accordionId = `accordion-detail-${Math.random().toString(36).substring(2, 9)}`;
+  }
+  static get observedAttributes() {
+    return ["heading", "size", "level", "detail-space"];
   }
   getDetailEl() {
     var e;
     return this.detailEl || (this.detailEl = ((e = this.shadowRoot) == null ? void 0 : e.querySelector(".accordion-detail")) || null), this.detailEl;
   }
   connectedCallback() {
-    var s, n;
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    t === i || !this.isConnected || this.render();
+  }
+  applyAccordionUsage() {
+    requestAnimationFrame(() => {
+      var i;
+      const e = this.detailSlotEl || ((i = this.shadowRoot) == null ? void 0 : i.querySelector('slot[name="detail"]'));
+      if (!e) return;
+      e.assignedElements({ flatten: !0 }).forEach((a) => {
+        var s, n;
+        (((s = a.tagName) == null ? void 0 : s.toLowerCase()) === "mui-slat-group" ? [a] : Array.from(((n = a.querySelectorAll) == null ? void 0 : n.call(a, "mui-slat-group")) || [])).forEach((r) => {
+          r.hasAttribute("usage") || r.setAttribute("usage", "accordion");
+        });
+      });
+    });
+  }
+  bindEvents() {
+    var e, t, i, a, o, s;
+    (e = this.summaryEl) == null || e.removeEventListener("click", this.handleSummaryClick), (t = this.summaryEl) == null || t.removeEventListener("keydown", this.handleSummaryKeydown), (i = this.summaryEl) == null || i.addEventListener("click", this.handleSummaryClick), (a = this.summaryEl) == null || a.addEventListener("keydown", this.handleSummaryKeydown), (o = this.detailSlotEl) == null || o.removeEventListener("slotchange", this.handleDetailSlotChange), (s = this.detailSlotEl) == null || s.addEventListener("slotchange", this.handleDetailSlotChange);
+  }
+  syncOpenHeight() {
+    const e = this.getDetailEl();
+    !e || !e.hasAttribute("open") || requestAnimationFrame(() => {
+      const t = this.getDetailEl();
+      !t || !t.hasAttribute("open") || (t.style.maxHeight = t.scrollHeight + "px");
+    });
+  }
+  render() {
+    var r;
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("heading") || "Heading...", t = this.getAttribute("size") || "medium", i = this.getAttribute("level") || "3", r = this.getAttribute("detail-space"), h = r ? `detail-space-${r}` : "";
-    let m = (
+    const e = ((r = this.getDetailEl()) == null ? void 0 : r.hasAttribute("open")) ?? !1, t = this.getAttribute("heading") || "Heading...", i = this.getAttribute("size") || "medium", a = this.getAttribute("level") || "3", o = this.getAttribute("detail-space"), s = o ? `detail-space-${o}` : "", n = (
       /*html*/
       `
     <style>
@@ -79,7 +115,7 @@ class u extends HTMLElement {
       .size-large-summary {
         padding: var(--space-500) var(--space-600);
       }
-        
+
       .size-small-detail {
         padding: var(--space-500);
       }
@@ -98,7 +134,6 @@ class u extends HTMLElement {
         border-top: none;
       }
 
-      /* Card Slot (Supports: Table Cell, Accordion Block) */
       :host([card-slot]) .accordion-summary {
         padding-left: var(--space-500);
         padding-right: var(--space-500);
@@ -132,53 +167,41 @@ class u extends HTMLElement {
         }
       }
 
-
     </style>
 
     <div
-      class="accordion-summary size-${t}-summary"
+      class="accordion-summary size-${i}-summary"
       role="button"
       tabindex="0"
       aria-expanded="false"
       aria-controls="${this.accordionId}"
     >
-      <mui-heading size="6" level="${i}">${e}</mui-heading>
+      <mui-heading size="6" level="${a}">${t}</mui-heading>
       <div class="icon">
         <mui-icon-down-chevron size="x-small"></mui-icon-down-chevron>
       </div>
     </div>
 
     <div id="${this.accordionId}" class="accordion-detail">
-      <div class="accordion-detail-inner size-${t}-detail ${h}" inert>
+      <div class="accordion-detail-inner size-${i}-detail ${s}" inert>
         <slot name="detail">Insert Content</slot>
       </div>
     </div>
-    
     `
     );
-    if (this.shadowRoot.innerHTML = m, requestAnimationFrame(() => {
-      const a = this.shadowRoot.querySelector('slot[name="detail"]');
-      a && a.assignedElements({ flatten: !0 }).forEach((o) => {
-        var d, c;
-        (((d = o.tagName) == null ? void 0 : d.toLowerCase()) === "mui-slat-group" ? [o] : Array.from(((c = o.querySelectorAll) == null ? void 0 : c.call(o, "mui-slat-group")) || [])).forEach((l) => {
-          l.hasAttribute("usage") || l.setAttribute("usage", "accordion");
-        });
-      });
-    }), this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-down-chevron"), !this.summaryEl || !this.detailEl || !this.chevronEl) {
+    if (this.shadowRoot.innerHTML = n, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-down-chevron"), this.detailSlotEl = this.shadowRoot.querySelector('slot[name="detail"]'), !this.summaryEl || !this.detailEl || !this.chevronEl) {
       console.error("Accordion elements not found");
       return;
     }
-    (s = this.summaryEl) == null || s.addEventListener("click", () => this.toggleAccordion()), (n = this.summaryEl) == null || n.addEventListener("keydown", (a) => {
-      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.toggleAccordion());
-    });
+    this.bindEvents(), this.applyAccordionUsage(), this.setOpen(e), e && (this.detailEl.style.maxHeight = this.detailEl.scrollHeight + "px");
   }
   toggleAccordion() {
     const e = this.getDetailEl();
     if (!e) return;
     const i = !e.hasAttribute("open");
     if (this.setOpen(i), i) {
-      const r = e.scrollHeight;
-      e.style.maxHeight = r + "px";
+      const a = e.scrollHeight;
+      e.style.maxHeight = a + "px";
     } else
       e.style.maxHeight = "0";
   }
@@ -192,4 +215,4 @@ class u extends HTMLElement {
     this.setOpen(!1);
   }
 }
-customElements.get("mui-accordion-block") || customElements.define("mui-accordion-block", u);
+customElements.get("mui-accordion-block") || customElements.define("mui-accordion-block", l);

package/dist/esm/components/mui-accordion/inline/index.js

@@ -1,18 +1,39 @@
 import "../../mui-icons/right-chevron/index.js";
 import "../../mui-heading/index.js";
-class a extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.detailSlotEl = null, this.handleSummaryClick = () => this.toggleAccordion(), this.handleSummaryKeydown = (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
+    }, this.handleDetailSlotChange = () => {
+      this.syncOpenHeight();
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["heading", "level"];
   }
   connectedCallback() {
-    var n, r;
+    this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    e === i || !this.isConnected || this.render();
+  }
+  bindEvents() {
+    var t, e, i, s, a, n;
+    (t = this.summaryEl) == null || t.removeEventListener("click", this.handleSummaryClick), (e = this.summaryEl) == null || e.removeEventListener("keydown", this.handleSummaryKeydown), (i = this.summaryEl) == null || i.addEventListener("click", this.handleSummaryClick), (s = this.summaryEl) == null || s.addEventListener("keydown", this.handleSummaryKeydown), (a = this.detailSlotEl) == null || a.removeEventListener("slotchange", this.handleDetailSlotChange), (n = this.detailSlotEl) == null || n.addEventListener("slotchange", this.handleDetailSlotChange);
+  }
+  syncOpenHeight() {
+    !this.detailEl || !this.detailEl.hasAttribute("open") || requestAnimationFrame(() => {
+      !this.detailEl || !this.detailEl.hasAttribute("open") || (this.detailEl.style.maxHeight = this.detailEl.scrollHeight + "px");
+    });
+  }
+  render() {
+    var a;
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("heading") || "Heading...";
-    let t = (
+    const t = ((a = this.detailEl) == null ? void 0 : a.hasAttribute("open")) ?? !1, e = this.getAttribute("heading") || "Heading...", s = (
       /*html*/
       `
     <style>
-      :host { 
+      :host {
         display: inline-flex;
         flex-direction: column;
       }
@@ -24,7 +45,6 @@ class a extends HTMLElement {
         cursor: pointer;
       }
 
-
       .accordion-summary:focus-visible {
         outline: var(--outline-thick);
       }
@@ -76,23 +96,25 @@ class a extends HTMLElement {
     </div>
     `
     );
-    this.shadowRoot.innerHTML = t, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-right-chevron"), (n = this.summaryEl) == null || n.addEventListener("click", this.toggleAccordion.bind(this)), (r = this.summaryEl) == null || r.addEventListener("keydown", (o) => {
-      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleAccordion());
-    });
+    if (this.shadowRoot.innerHTML = s, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-right-chevron"), this.detailSlotEl = this.shadowRoot.querySelector('slot[name="detail"]'), this.bindEvents(), t && this.detailEl && this.chevronEl && this.summaryEl) {
+      this.detailEl.setAttribute("open", ""), this.chevronEl.setAttribute("open", ""), this.summaryEl.setAttribute("aria-expanded", "true");
+      const n = this.detailEl.querySelector(".accordion-detail-inner");
+      n == null || n.removeAttribute("inert"), this.detailEl.style.maxHeight = this.detailEl.scrollHeight + "px";
+    }
   }
   toggleAccordion() {
     if (!this.detailEl || !this.chevronEl || !this.summaryEl) return;
-    const e = this.detailEl.hasAttribute("open");
-    this.detailEl.toggleAttribute("open"), this.chevronEl.toggleAttribute("open"), this.summaryEl.setAttribute("aria-expanded", String(!e));
-    const i = this.detailEl.querySelector(".accordion-detail-inner");
-    if (i)
-      if (e)
-        i.setAttribute("inert", ""), this.detailEl.style.maxHeight = "0";
+    const t = this.detailEl.hasAttribute("open");
+    this.detailEl.toggleAttribute("open"), this.chevronEl.toggleAttribute("open"), this.summaryEl.setAttribute("aria-expanded", String(!t));
+    const e = this.detailEl.querySelector(".accordion-detail-inner");
+    if (e)
+      if (t)
+        e.setAttribute("inert", ""), this.detailEl.style.maxHeight = "0";
       else {
-        i.removeAttribute("inert");
-        const t = this.detailEl.scrollHeight;
-        this.detailEl.style.maxHeight = t + "px";
+        e.removeAttribute("inert");
+        const i = this.detailEl.scrollHeight;
+        this.detailEl.style.maxHeight = i + "px";
       }
   }
 }
-customElements.get("mui-accordion-inline") || customElements.define("mui-accordion-inline", a);
+customElements.get("mui-accordion-inline") || customElements.define("mui-accordion-inline", l);

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

@@ -265,7 +265,7 @@ class h extends HTMLElement {
     :host([slot="before"][usage="input"]) button,
     :host([slot="after"][usage="input"]) button {
       border: var(--border-thin);
-      min-height: 4.4rem;
+      min-height: var(--input-slot-min-height);
       background: var(--input-background);
       color: var(--action-secondary-text-color);
       border-color: var(--form-default-border-color);
@@ -515,6 +515,25 @@ class h extends HTMLElement {
       border-radius: var(--action-radius-large);
     }
 
+    /* Keep input-composed buttons flush against the input edge after size radius applies. */
+    :host([slot="before"][usage="input"]) button,
+    :host([slot="before"][usage="input"]) button:hover,
+    :host([slot="before"][usage="input"]) button:focus,
+    :host([slot="before"][usage="input"]) button:focus-visible,
+    :host([slot="before"][usage="input"]) button:disabled {
+      border-top-right-radius: var(--radius-000);
+      border-bottom-right-radius: var(--radius-000);
+    }
+
+    :host([slot="after"][usage="input"]) button,
+    :host([slot="after"][usage="input"]) button:hover,
+    :host([slot="after"][usage="input"]) button:focus,
+    :host([slot="after"][usage="input"]) button:focus-visible,
+    :host([slot="after"][usage="input"]) button:disabled {
+      border-top-left-radius: var(--radius-000);
+      border-bottom-left-radius: var(--radius-000);
+    }
+
     /* Dropdown slot corner radius must win over size radius rules */
     :host([size][dropdown-slot]) button,
     :host([size][dropdown-slot]) button:hover,

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

@@ -1,4 +1,7 @@
-class e extends HTMLElement {
+class o extends HTMLElement {
+  static get observedAttributes() {
+    return ["layout", "align", "right"];
+  }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -10,8 +13,23 @@ class e extends HTMLElement {
       :host {
         display: flex;
         gap: var(--space-200);
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+      }
+      :host([layout="column"]) {
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+      }
+      :host([layout="column"]) ::slotted(*) {
+        width: 100%;
+        box-sizing: border-box;
+      }
+      :host([align="right"]:not([layout="column"])) {
+        justify-content: flex-end;
       }
-      :host([right]) {
+      :host([right]:not([align]):not([layout="column"])) {
         justify-content: flex-end;
       }
     </style>
@@ -20,4 +38,4 @@ class e extends HTMLElement {
     this.shadowRoot && (this.shadowRoot.innerHTML = t);
   }
 }
-customElements.get("mui-button-group") || customElements.define("mui-button-group", e);
+customElements.get("mui-button-group") || customElements.define("mui-button-group", o);

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

@@ -364,8 +364,8 @@ class w extends HTMLElement {
           overflow: hidden;
         }
         mui-h-stack.chip-slot-shell {
-          background: var(--chip-input-background, #333333);
-          padding: var(--chip-input-shell-padding, 2px);
+          background: var(--chip-input-background);
+          padding: var(--space-025);
           border: var(--chip-input-shell-border, 1px solid var(--form-default-border-color));
           box-sizing: border-box;
           width: 100%;

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

@@ -32,6 +32,7 @@ class T extends HTMLElement {
           cursor: help;
         }
         .tooltip {
+          display: none;
           position: absolute;
           z-index: 1000;
           min-width: max-content;
@@ -54,6 +55,7 @@ class T extends HTMLElement {
           transition-duration: 0ms;
         }
         :host([open]) .tooltip {
+          display: block;
           opacity: 1;
           pointer-events: auto;
         }