@muibook/components 8.0.2 → 9.0.0

package/README.md

@@ -18,6 +18,7 @@ import "@muibook/components/mui-body"; // Individual
 #### CSS Usage
 
 ```javascript
+import "@muibook/components/css/mui-brand.css";
 import "@muibook/components/css/mui-tokens.css";
 import "@muibook/components/css/mui-base.css";
 import "@muibook/components/css/mui-reset.css";
@@ -178,7 +179,13 @@ npm publish
 
 ---
 
-## Title
+## Style Dictionary
+
+- npm run token-build
+
+---
+
+## NPM Token REFRESH
 
 Refreshing Your npm Access Token (90-Day Expiry)
 

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

@@ -28,7 +28,7 @@ Rules:
         placeholder: '<mui-field label="Email"><mui-input type="email" placeholder="you@example.com" value="..."></mui-input></mui-field>',
         message: `<mui-field label="Name" message="This field doesn't accept special characters"><mui-input></mui-input></mui-field>`,
         select: `<mui-field label="Brand"><mui-select options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-field>`,
-        inputAndSelect: `<mui-field label="Amount to transfer" slot="body"><mui-input type="number"><mui-select slot="after" label="Currency" hide-label style="width: 100px;" options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-input></mui-field>`
+        inputAndSelect: `<mui-field label="Amount to transfer"><mui-input type="number"><mui-select slot="after" label="Currency" hide-label style="width: 100px;" options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-input></mui-field>`
       },
       addon: {
         text: [

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

@@ -3,23 +3,31 @@ import "../mui-icons/check/index.js";
 import "../mui-icons/info/index.js";
 import "../mui-icons/warning/index.js";
 import "../mui-icons/attention/index.js";
-function A(n) {
-  return ["positive", "info", "warning", "attention"].includes(n);
+function b(d) {
+  return ["positive", "info", "warning", "attention"].includes(d);
 }
-class x extends HTMLElement {
+class m extends HTMLElement {
+  constructor() {
+    super(), this.actionSlotListener = null, this.attachShadow({ mode: "open" });
+  }
   static get observedAttributes() {
     return ["variant"];
   }
-  constructor() {
-    super(), this.attachShadow({ mode: "open" });
-  }
   connectedCallback() {
-    var c;
-    const a = this.getAttribute("variant") || "positive", p = {
+    this.render();
+  }
+  attributeChangedCallback(i, o, t) {
+    i === "variant" && o !== t && this.shadowRoot && this.render();
+  }
+  render() {
+    const i = this.getAttribute("variant") || "positive", o = {
       success: "positive",
       error: "attention"
-    }, t = A(a) ? a : p[a] || "positive";
-    this.setAttribute("variant", t);
+    }, t = b(i) ? i : o[i] || "positive";
+    if (i !== t) {
+      this.setAttribute("variant", t);
+      return;
+    }
     const s = {
       positive: "polite",
       info: "polite",
@@ -27,29 +35,27 @@ class x extends HTMLElement {
       attention: "assertive"
     };
     this.setAttribute("role", "alert"), this.setAttribute("aria-live", s[t] || "polite");
-    const g = {
+    const r = {
       positive: "mui-icon-check",
       info: "mui-icon-info",
       warning: "mui-icon-warning",
       attention: "mui-icon-attention"
-    }, u = {
+    }, a = {
       positive: "--feedback-positive-icon",
       info: "--feedback-info-icon",
       warning: "--feedback-warning-icon",
       attention: "--feedback-attention-icon"
-    }, b = {
+    }, e = {
       positive: "--feedback-positive-text",
       info: "--feedback-info-text",
       warning: "--feedback-warning-text",
       attention: "--feedback-attention-text"
-    }, m = {
+    }, n = {
       positive: "Success!",
       info: "Info:",
       warning: "Warning!",
       attention: "Error!"
-    };
-    this.setAttribute("aria-live", s[t]);
-    const r = g[t], v = u[t], h = b[t], f = m[t], w = (
+    }, c = r[t], p = a[t], g = e[t], u = n[t], h = (
       /*css*/
       `
       :host {
@@ -79,7 +85,6 @@ class x extends HTMLElement {
       ::slotted(mui-button[slot="action"]),
       ::slotted(mui-link[slot="action"]) { padding-top: var(--space-100); }
 
-
       @media (min-width: 600px) {
         :host { gap: var(--alert-gap-horizontal-desktop); }
         :host([has-action]) { padding-right: var(--space-100); }
@@ -88,7 +93,7 @@ class x extends HTMLElement {
       }
 
       .label {
-        color: var(${h}); 
+        color: var(${g}); 
         font-weight: var(--font-weight-bold);
       }
 
@@ -101,41 +106,44 @@ class x extends HTMLElement {
       }
 
       ${["positive", "info", "warning", "attention"].map(
-        (i) => (
+        (l) => (
           /*css*/
           `
-        :host([variant="${i}"]) {
-          border: var(--feedback-${i}-border);
-          background: var(--feedback-${i}-background);
+        :host([variant="${l}"]) {
+          border: var(--feedback-${l}-border);
+          background: var(--feedback-${l}-background);
         }
       `
         )
       ).join("")}
     `
     );
-    if (!this.shadowRoot) return;
-    this.shadowRoot.innerHTML = /*html*/
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${w}</style>
-      <${r} size="medium" color="var(${v})" class="icon"></${r}>
+      <style>${h}</style>
+      <${c} size="medium" color="var(${p})" class="icon"></${c}>
       <mui-body>
-        <span class="label">${f}</span>
+        <span class="label">${u}</span>
         <slot></slot>
       </mui-body>
       <slot name="action"></slot>
-    `;
-    const o = (c = this.shadowRoot) == null ? void 0 : c.querySelector('slot[name="action"]');
-    if (o) {
-      const i = () => {
-        const k = o.assignedElements();
-        let l = !1;
-        k.forEach((e) => {
-          const d = e.tagName;
-          (d === "MUI-BUTTON" || d === "MUI-LINK") && (l = !0, e.setAttribute("variant", "tertiary"), e.classList.add("alert-slot", `alert-${t}-slot`));
-        }), l ? this.setAttribute("has-action", "") : this.removeAttribute("has-action");
+    `, this.setupActionSlot());
+  }
+  setupActionSlot() {
+    var o;
+    const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector('slot[name="action"]');
+    if (i) {
+      this.actionSlotListener && i.removeEventListener("slotchange", this.actionSlotListener);
+      const t = () => {
+        const s = this.getAttribute("variant") || "positive", r = i.assignedElements();
+        let a = !1;
+        r.forEach((e) => {
+          const n = e.tagName;
+          (n === "MUI-BUTTON" || n === "MUI-LINK") && (a = !0, e.setAttribute("variant", "tertiary"), e.classList.add("alert-slot", `alert-${s}-slot`));
+        }), a ? this.setAttribute("has-action", "") : this.removeAttribute("has-action");
       };
-      o.addEventListener("slotchange", i), requestAnimationFrame(i);
+      this.actionSlotListener = t, i.addEventListener("slotchange", this.actionSlotListener), requestAnimationFrame(t);
     }
   }
 }
-customElements.get("mui-alert") || customElements.define("mui-alert", x);
+customElements.get("mui-alert") || customElements.define("mui-alert", m);

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

@@ -24,7 +24,7 @@ class h extends HTMLElement {
       border: none;
       cursor: pointer;
       width: 100%;
-      border-radius: var(--action-radius);
+      border-radius: var(--action-radius-medium);
       padding: var(--action-padding);
       text-decoration: none;
       line-height: var(--action-line-height);

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

@@ -1,10 +1,48 @@
-class u extends HTMLElement {
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["condensed"];
+  }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(o, r, a) {
+    o === "condensed" && this.updateSlottedContent();
+  }
+  updateSlottedContent() {
+    requestAnimationFrame(() => {
+      if (!this.shadowRoot) return;
+      const o = this.shadowRoot.querySelector("slot");
+      if (!o) return;
+      const r = o.assignedNodes({ flatten: !0 });
+      this.classList.remove("inner-space", "has-card-slat-group", "has-accordion-slat-group");
+      let a = !1;
+      r.forEach((c) => {
+        if (c.nodeType === Node.ELEMENT_NODE) {
+          const t = c, i = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
+          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((s) => {
+            s.classList.add("card-slot");
+          }), a = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
+            const s = e.getAttribute("variant");
+            (s === "action" || s === "row") && (e.classList.add("card-slot"), this.hasAttribute("condensed") ? e.classList.add("condensed-slot") : e.classList.remove("condensed-slot"));
+          });
+          const n = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((s) => {
+            s.classList.add("card-slot");
+          }), a = !0);
+          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          d.length && (a = !0, d.forEach((e) => {
+            e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.classList.add("has-accordion-slat-group") : this.classList.add("inner-space", "has-card-slat-group");
+          }));
+        }
+      }), !a && !this.hasAttribute("condensed") && this.classList.add("inner-space");
+    });
+  }
+  render() {
     if (!this.shadowRoot) return;
-    const l = (
+    const o = (
       /*html*/
       `
       <style>
@@ -35,32 +73,7 @@ class u extends HTMLElement {
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = l, requestAnimationFrame(() => {
-      if (!this.shadowRoot) return;
-      const a = this.shadowRoot.querySelector("slot");
-      if (!a) return;
-      const d = a.assignedNodes({ flatten: !0 });
-      let e = !1;
-      d.forEach((c) => {
-        if (c.nodeType === Node.ELEMENT_NODE) {
-          const t = c, i = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
-          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((o) => {
-            o.classList.add("card-slot");
-          }), e = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((s) => {
-            const o = s.getAttribute("variant");
-            (o === "action" || o === "row") && (s.classList.add("card-slot"), this.hasAttribute("condensed") && s.classList.add("condensed-slot"));
-          });
-          const r = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
-          r instanceof HTMLElement && (r.querySelectorAll("mui-cell").forEach((o) => {
-            o.classList.add("card-slot");
-          }), e = !0);
-          const n = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          n.length && (e = !0, n.forEach((s) => {
-            s.setAttribute("usage", "card"), s.closest("mui-accordion-block") ? this.classList.add("has-accordion-slat-group") : this.classList.add("inner-space", "has-card-slat-group");
-          }));
-        }
-      }), !e && !this.hasAttribute("condensed") && this.classList.add("inner-space");
-    });
+    this.shadowRoot.innerHTML = o, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", u);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", l);

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

@@ -1,5 +1,5 @@
 import "../mui-body/index.js";
-class d extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
     return ["checked", "disabled", "id", "indeterminate"];
   }
@@ -9,55 +9,54 @@ class d extends HTMLElement {
   connectedCallback() {
     this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, r, i) {
-    var c, o, s;
+  disconnectedCallback() {
+    this.cleanupListeners();
+  }
+  attributeChangedCallback(e, t, c) {
+    var r, o, s;
     if (e === "checked") {
-      const t = (c = this.shadowRoot) == null ? void 0 : c.querySelector("input");
-      if (!t) return;
-      t.checked = i !== null;
+      const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+      if (!i) return;
+      i.checked = c !== null;
     }
     if (e === "disabled") {
-      const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-      if (!t) return;
-      t.disabled = i !== null;
+      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+      if (!i) return;
+      i.disabled = c !== null;
     }
     if (e === "indeterminate") {
-      const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
-      if (!t) return;
-      const n = i !== null;
-      t.indeterminate = n, n && (t.checked = !0, this.setAttribute("checked", ""));
+      const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+      if (!i) return;
+      const n = c !== null;
+      i.indeterminate = n, n && (i.checked = !0, this.setAttribute("checked", ""));
     }
     "id".includes(e) && (this.render(), this.setupListener());
   }
+  cleanupListeners() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    e && this._changeHandler && e.removeEventListener("change", this._changeHandler);
+  }
   setupListener() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
-    e && (e.addEventListener("change", (i) => {
-      const c = i.target;
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { checked: c.checked },
-          bubbles: !0,
-          composed: !0
-        })
-      ), c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-    }), e.indeterminate = this.hasAttribute("indeterminate"), e.addEventListener("change", (i) => {
-      const c = i.target;
-      this.dispatchEvent(
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (c) => {
+      const r = c.target;
+      r.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: c.checked },
+          detail: { checked: r.checked },
           bubbles: !0,
           composed: !0
         })
-      ), this.removeAttribute("indeterminate"), c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-    }));
+      );
+    }, e.addEventListener("change", this._changeHandler));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, r = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), c = `
+    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), c = this.hasAttribute("disabled"), r = `
       <mui-icon-checkmark class="icon" size="x-small" color="inverted"></mui-icon-checkmark>
-    `, o = this.hasAttribute("indeterminate"), t = o ? `
+    `, o = this.hasAttribute("indeterminate"), i = o ? `
       <mui-icon-subtract class="icon" size="x-small" color="inverted"></mui-icon-subtract>
-    ` : c, n = this.innerHTML.trim().length > 0;
+    ` : r, n = this.innerHTML.trim().length > 0;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -139,22 +138,22 @@ class d extends HTMLElement {
             type="checkbox" 
             id="${e}" 
             ${o ? "indeterminate" : ""}
-            ${o || r ? "checked" : ""}
-            ${i ? "disabled" : ""} 
+            ${o || t ? "checked" : ""}
+            ${c ? "disabled" : ""} 
           />
-          ${t}
+          ${i}
         </span>
         ${n ? '<mui-body size="small"><slot></slot></mui-body>' : ""}
       </label>
     `;
   }
   get checked() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
     return (e == null ? void 0 : e.checked) ?? !1;
   }
   set checked(e) {
     e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
   }
 }
-customElements.get("mui-checkbox") || customElements.define("mui-checkbox", d);
+customElements.get("mui-checkbox") || customElements.define("mui-checkbox", a);

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

@@ -13,6 +13,10 @@ class l extends HTMLElement {
     const s = (
       /*css*/
       `
+      :host {
+        display: contents;
+      }
+
       dialog {
         border: none;
         width: ${this.getAttribute("width") || "350px"};

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

@@ -1,7 +1,13 @@
 import "../mui-button/index.js";
 class r extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null, this.render(), this.cacheElements(), this.attachEvents();
+    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null;
+  }
+  connectedCallback() {
+    this.render(), this.cacheElements(), this.attachEvents();
+  }
+  disconnectedCallback() {
+    this.cleanupListeners();
   }
   render() {
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
@@ -81,10 +87,13 @@ class r extends HTMLElement {
   cacheElements() {
     this.shadowRoot && (this.wrapper = this.shadowRoot.querySelector(".wrapper"), this.label = this.shadowRoot.querySelector(".label"), this.button = this.shadowRoot.querySelector(".button"), this.input = this.shadowRoot.querySelector('input[type="file"]'));
   }
+  cleanupListeners() {
+    this.wrapper && this._wrapperClickHandler && this.wrapper.removeEventListener("click", this._wrapperClickHandler), this.input && this._inputChangeHandler && this.input.removeEventListener("change", this._inputChangeHandler);
+  }
   attachEvents() {
-    this.wrapper.addEventListener("click", () => {
+    this._wrapperClickHandler = () => {
       this.input.click();
-    }), this.input.addEventListener("change", this.handleFileChange.bind(this));
+    }, this._inputChangeHandler = this.handleFileChange.bind(this), this.wrapper.addEventListener("click", this._wrapperClickHandler), this.input.addEventListener("change", this._inputChangeHandler);
   }
   handleFileChange(i) {
     var t;

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

@@ -1,14 +1,14 @@
-import { getPartMap as s } from "../../utils/part-map/index.js";
-class i extends HTMLElement {
+import { getPartMap as e } from "../../utils/part-map/index.js";
+class l extends HTMLElement {
   static get observedAttributes() {
-    return ["col", "space"];
+    return ["col", "space", "alignx", "aligny"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.attachShadow({ mode: "open" }), this.col = "1fr 1fr", this.space = "var(--space-000)", this.alignX = "normal", this.alignY = "normal";
   }
   async connectedCallback() {
     await this.waitForPartMap();
-    const t = this.getAttribute("col") || "1fr 1fr", e = this.getAttribute("space") || "var(--space-000)", a = s("layout", "spacing"), o = (
+    const t = this.getAttribute("col") || this.col, a = this.getAttribute("space") || this.space, i = this.getAttribute("alignx") || this.alignX, s = this.getAttribute("aligny") || this.alignY, o = e("layout", "spacing"), r = (
       /*css*/
       `
       :host {
@@ -18,25 +18,32 @@ class i extends HTMLElement {
         display: grid;
         grid-template-columns: var(--col);
         gap: var(--gap);
+        align-items: var(--alignY);
+        justify-items: var(--alignX);
       }
     `
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${o}</style>
-      <div part="${a}" style="--col: ${t}; --gap: ${e};">
+      <style>${r}</style>
+      <div part="${o}" style="--col: ${t}; --gap: ${a}; --alignX: ${i}; --alignY: ${s};">
         <slot></slot>
       </div>
     `);
   }
+  attributeChangedCallback(t, a, i) {
+    if (a === i || !this.shadowRoot) return;
+    const s = this.shadowRoot.querySelector("div");
+    s && (t === "col" && s.style.setProperty("--col", i || this.col), t === "space" && s.style.setProperty("--gap", i || this.space), t === "alignx" && s.style.setProperty("--alignX", i || this.alignX), t === "aligny" && s.style.setProperty("--alignY", i || this.alignY));
+  }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof s == "function") return t();
-      const e = () => {
-        typeof s == "function" ? t() : requestAnimationFrame(e);
+      if (typeof e == "function") return t();
+      const a = () => {
+        typeof e == "function" ? t() : requestAnimationFrame(a);
       };
-      e();
+      a();
     });
   }
 }
-customElements.get("mui-grid") || customElements.define("mui-grid", i);
+customElements.get("mui-grid") || customElements.define("mui-grid", l);

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

@@ -1,4 +1,4 @@
-class t extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "level"];
   }
@@ -6,8 +6,14 @@ class t extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(i, t, e) {
+    t !== e && this.shadowRoot && this.render();
+  }
+  render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("size") || "1", i = `h${this.getAttribute("level") || e}`;
+    const i = this.getAttribute("size") || "1", e = `h${this.getAttribute("level") || i}`;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -26,10 +32,10 @@ class t 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>
-      <${i} class="size-${e}">
+      <${e} class="size-${i}">
         <slot></slot>
-      </${i}>
+      </${e}>
     `;
   }
 }
-customElements.get("mui-heading") || customElements.define("mui-heading", t);
+customElements.get("mui-heading") || customElements.define("mui-heading", n);