@muibook/components 6.1.1 → 7.1.0

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

@@ -1,7 +1,7 @@
-import { getPartMap as n } from "../../utils/part-map/index.js";
-class u extends HTMLElement {
+import { getPartMap as v } from "../../utils/part-map/index.js";
+class f extends HTMLElement {
   static get observedAttributes() {
-    return ["target", "href", "variant", "weight", "size", "download"];
+    return ["target", "href", "variant", "weight", "size", "download", "usage"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -9,42 +9,62 @@ class u extends HTMLElement {
   async connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), await this.waitForPartMap(), this.render(), requestAnimationFrame(() => this.updateSlotState());
   }
-  attributeChangedCallback(t, a, r) {
+  attributeChangedCallback(a, o, e) {
     if (this.shadowRoot) {
-      if (t === "href") {
-        const o = this.shadowRoot.querySelector("a");
-        o && o.setAttribute("href", r || "#");
-      }
-      if (t === "target") {
-        const o = this.shadowRoot.querySelector("a");
-        o && o.setAttribute("target", r || "_self");
-      }
-      if (t === "download") {
-        const o = this.shadowRoot.querySelector("a");
-        if (!o) return;
-        r !== null ? o.setAttribute("download", r === "" ? "" : r) : o.removeAttribute("download");
-      }
+      if (a === "href") {
+        const t = this.shadowRoot.querySelector("a");
+        t && t.setAttribute("href", e || "#");
+      }
+      if (a === "target") {
+        const t = this.shadowRoot.querySelector("a");
+        t && t.setAttribute("target", e || "_self");
+      }
+      if (a === "download") {
+        const t = this.shadowRoot.querySelector("a");
+        if (!t) return;
+        e !== null ? t.setAttribute("download", e === "" ? "" : e) : t.removeAttribute("download");
+      }
+      a === "size" && o !== e && this.shadowRoot && requestAnimationFrame(() => {
+        const t = this.shadowRoot;
+        if (!t) return;
+        const l = [
+          t.querySelector("slot:not([name])"),
+          t.querySelector('slot[name="before"]'),
+          t.querySelector('slot[name="after"]')
+        ], d = this.hasAttribute("icon-only");
+        l.forEach((r) => {
+          if (r) {
+            const n = r.assignedNodes({ flatten: !0 });
+            this.updateIconSizes(n, d);
+          }
+        });
+      });
     }
   }
   updateSlotState() {
-    const t = this.shadowRoot, a = t.querySelector("slot:not([name])"), r = t.querySelector('slot[name="before"]'), o = t.querySelector('slot[name="after"]'), s = (e) => !!e && e.assignedNodes({ flatten: !0 }).some(
+    const a = this.shadowRoot, o = a.querySelector("slot:not([name])"), e = a.querySelector('slot[name="before"]'), t = a.querySelector('slot[name="after"]'), l = (s) => !!s && s.assignedNodes({ flatten: !0 }).some(
       (i) => {
-        var l;
-        return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((l = i.textContent) != null && l.trim());
+        var c;
+        return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((c = i.textContent) != null && c.trim());
       }
-    ), d = s(r), h = s(o);
-    this.classList.toggle("has-before", d), this.classList.toggle("has-after", h);
-    const c = (a == null ? void 0 : a.assignedNodes({ flatten: !0 })) ?? [], v = c.length > 0 && c.every(
-      (e) => {
+    ), d = l(e), r = l(t);
+    this.classList.toggle("has-before", d), this.classList.toggle("has-after", r);
+    const n = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], h = n.length > 0 && n.every(
+      (s) => {
         var i;
-        return e.nodeType === Node.ELEMENT_NODE ? e.classList.contains("mui-icon") || e.tagName.toLowerCase() === "svg" : !((i = e.textContent) != null && i.trim());
+        return s.nodeType === Node.ELEMENT_NODE ? s.classList.contains("mui-icon") || s.tagName.toLowerCase() === "svg" : !((i = s.textContent) != null && i.trim());
       }
     );
-    this.toggleAttribute("icon-only", v);
+    this.toggleAttribute("icon-only", h), h ? this.updateIconSizes(n, !0) : [e, o, t].forEach((i) => {
+      if (i) {
+        const c = i.assignedNodes({ flatten: !0 });
+        this.updateIconSizes(c, !1);
+      }
+    });
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = n("text", "spacing", "layout", "visual");
+    const a = v("text", "spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
     <style>
@@ -103,12 +123,14 @@ class u extends HTMLElement {
       :host([variant="primary"]),
       :host([variant="secondary"]),
       :host([variant="tertiary"]),
-      :host([variant="attention"]) { display: inline-block; text-align: center; }
+      :host([variant="attention"]),
+      :host([usage="input"]) { display: inline-block; text-align: center; }
 
       :host([variant="primary"]) a,
       :host([variant="secondary"]) a,
       :host([variant="tertiary"]) a,
-      :host([variant="attention"]) a {
+      :host([variant="attention"]) a,
+      :host([usage="input"]) a {
         display: inherit;
         text-align: inherit;
         width: 100%;
@@ -313,7 +335,7 @@ class u extends HTMLElement {
         align-items: center; 
         gap: var(--space-100);
       }
-      
+
       :host(.has-after.has-before) a {
         grid-template-columns: auto 1fr auto;
       }
@@ -326,23 +348,226 @@ class u extends HTMLElement {
         grid-template-columns: auto 1fr;
       }
 
-      :host(.has-after.has-before[variant]) a {
+      :host(.has-after.has-before[variant]:not([variant="default"])) a,
+      :host(.has-after.has-before[usage="input"]) a {
+        padding-right: var(--action-after-slot-padding);
+        padding-left: var(--action-before-slot-padding);
+      }
+
+      :host(.has-after[variant]:not([variant="default"])) a,
+      :host(.has-after[usage="input"]) a {
+        padding-right: var(--action-after-slot-padding);
+      }
+
+      :host(.has-before[variant]:not([variant="default"])) a,
+      :host(.has-before[usage="input"]) a {
+        padding-left: var(--action-before-slot-padding);
+      }
+
+      /* ========================================================================== */
+      /* STYLE ADJUSTMENTS WHEN BUTTON IS SLOTTED WITHIN INPUT                      */
+      /* Related styles unique to this usage is found in the mui-input/index.js     */
+      /* ========================================================================== */
+      :host([slot="before"][usage="input"]) a,
+      :host([slot="after"][usage="input"]) a {
+        border: var(--border-thin);
+        min-height: 4.4rem;
+        background: var(--input-background);
+        color: var(--action-secondary-text-color);
+        border-color: var(--form-default-border-color);
+      }
+
+      :host([slot="before"][usage="input"]) a:hover,
+      :host([slot="before"][usage="input"]) a:focus-visible,
+      :host([slot="after"][usage="input"]) a:hover,
+      :host([slot="after"][usage="input"]) a:focus-visible {
+        background: var(--input-background);
+        color: var(--action-secondary-text-color-hover);
+        border-color: var(--form-default-border-color-hover);
+        border-width: var(--stroke-size-100);
+      }
+
+      :host([slot="after"][usage="input"]) a ::slotted(.mui-icon),
+      :host([slot="before"][usage="input"]) a ::slotted(.mui-icon) { 
+        fill: var(--action-secondary-text-color); 
+      }
+
+      :host([slot="after"][usage="input"]) a:hover ::slotted(.mui-icon),
+      :host([slot="before"][usage="input"]) a:hover ::slotted(.mui-icon) { 
+        fill: var(--action-secondary-text-color-hover); 
+      }
+
+      :host([slot="after"][usage="input"]) a:focus-visible ::slotted(.mui-icon),
+      :host([slot="before"][usage="input"]) a:focus-visible ::slotted(.mui-icon) { 
+        fill: var(--action-secondary-text-color-focus); 
+      }
+
+      /* ========================================================================== */
+      /* BEFORE: When a BUTTON has slot="before" applied to host for INPUT usage    */
+      /* ========================================================================== */
+      :host([slot="before"][usage="input"]) a {
+        border-right: none;
+        border-top-right-radius: var(--radius-000);
+        border-bottom-right-radius: var(--radius-000);
+      }
+
+      :host([slot="before"][usage="input"]) a:hover,
+      :host([slot="before"][usage="input"]) a:focus-visible {
+        border-right: none;
+        box-shadow: var(--stroke-size-100) 0 0 0 var(--form-default-border-color-hover);
+      }
+
+      /* ========================================================================== */
+      /* AFTER: When a BUTTON has slot="after" applied to host for INPUT usage      */
+      /* ========================================================================== */
+      :host([slot="after"][usage="input"]) a {
+        border-left: none;
+        border-top-left-radius: var(--radius-000);
+        border-bottom-left-radius: var(--radius-000);
+      }
+
+      :host([slot="after"][usage="input"]) a:hover,
+      :host([slot="after"][usage="input"]) a:focus-visible {
+        border-left: none;
+        box-shadow: calc(-1 * var(--stroke-size-100)) 0 0 0 var(--form-default-border-color-hover);
+      }
+
+      /* ========================================================================== */
+      /* Size Variants with Before & After Icon padding adjustments                 */
+      /* ========================================================================== */
+
+      :host([size="x-small"][variant]:not([variant="default"])) a,
+      :host([size="x-small"][variant]:not([variant="default"])) a:hover,
+      :host([size="x-small"][variant]:not([variant="default"])) a:focus {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+        font-weight: var(--font-weight-semi-bold);
+        padding: var(--action-padding-x-small);
+        border-width: var(--stroke-size-100);
+      }
+
+      :host([size="small"][variant]:not([variant="default"])) a {
+        font-size: var(--text-font-size-s);
+        line-height: var(--text-line-height-s);
+        padding: var(--action-padding-small);
+      }
+
+      :host([size="medium"][variant]:not([variant="default"])) a {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+        padding: var(--action-padding);
+      }
+
+      :host([size="large"][variant]:not([variant="default"])) a {
+        font-size: var(--text-font-size-l);
+        line-height: var(--text-line-height-l);
+        padding: var(--action-padding-large);
+      }
+
+      /* Icon-only size variants */
+      :host([size="x-small"][variant]:not([variant="default"])[icon-only]) a {
+        height: var(--action-icon-only-size-x-small);
+        width: var(--action-icon-only-size-x-small);
+        padding: var(--action-icon-only-padding);
+      }
+
+      :host([size="small"][variant]:not([variant="default"])[icon-only]) a {
+        height: var(--action-icon-only-size-small);
+        width: var(--action-icon-only-size-small);
+        padding: var(--action-icon-only-padding);
+      }
+
+      :host([size="medium"][variant]:not([variant="default"])[icon-only]) a {
+        height: var(--action-icon-only-size);
+        width: var(--action-icon-only-size);
+        padding: var(--action-icon-only-padding);
+      }
+
+      :host([size="large"][variant]:not([variant="default"])[icon-only]) a {
+        height: var(--action-icon-only-size-large);
+        width: var(--action-icon-only-size-large);
+        padding: var(--action-icon-only-padding);
+      }
+
+      /* Before & After Icon padding adjustments for x-small */
+      :host([size="x-small"][variant]:not([variant="default"]).has-after) a,
+      :host([size="x-small"][variant]:not([variant="default"]).has-before) a,
+      :host([size="x-small"][variant]:not([variant="default"]).has-after.has-before) a { 
+        gap: var(--space-025);
+      }
+
+      :host([size="x-small"][variant]:not([variant="default"]).has-after.has-before) a {
+        padding-right: var(--action-after-slot-padding-x-small);
+        padding-left: var(--action-before-slot-padding-x-small);
+      }
+
+      :host([size="x-small"][variant]:not([variant="default"]).has-after) a {
+        padding-right: var(--action-after-slot-padding-x-small);
+      }
+
+      :host([size="x-small"][variant]:not([variant="default"]).has-before) a {
+        padding-left: var(--action-before-slot-padding-x-small);
+      }
+
+      /* Before & After Icon padding adjustments for small */
+      :host([size="small"][variant]:not([variant="default"]).has-after) a,
+      :host([size="small"][variant]:not([variant="default"]).has-before) a,
+      :host([size="small"][variant]:not([variant="default"]).has-after.has-before) a { 
+        gap: var(--space-050);
+      }
+
+      :host([size="small"][variant]:not([variant="default"]).has-after.has-before) a {
+        padding-right: var(--action-after-slot-padding-small);
+        padding-left: var(--action-before-slot-padding-small);
+      }
+
+      :host([size="small"][variant]:not([variant="default"]).has-after) a {
+        padding-right: var(--action-after-slot-padding-small);
+      }
+
+      :host([size="small"][variant]:not([variant="default"]).has-before) a {
+        padding-left: var(--action-before-slot-padding-small);
+      }
+
+      /* Before & After Icon padding adjustments for medium */
+      :host([size="medium"][variant]:not([variant="default"]).has-after.has-before) a {
         padding-right: var(--action-after-slot-padding);
         padding-left: var(--action-before-slot-padding);
       }
 
-      :host(.has-after[variant]) a {
+      :host([size="medium"][variant]:not([variant="default"]).has-after) a {
         padding-right: var(--action-after-slot-padding);
       }
 
-      :host(.has-before[variant]) a {
+      :host([size="medium"][variant]:not([variant="default"]).has-before) a {
         padding-left: var(--action-before-slot-padding);
       }
 
+      /* Before & After Icon padding adjustments for large */
+      :host([size="large"][variant]:not([variant="default"]).has-after) a,
+      :host([size="large"][variant]:not([variant="default"]).has-before) a,
+      :host([size="large"][variant]:not([variant="default"]).has-after.has-before) a { 
+        gap: var(--space-200);
+      }
+
+      :host([size="large"][variant]:not([variant="default"]).has-after.has-before) a {
+        padding-right: var(--action-after-slot-padding-large);
+        padding-left: var(--action-before-slot-padding-large);
+      }
+
+      :host([size="large"][variant]:not([variant="default"]).has-after) a {
+        padding-right: var(--action-after-slot-padding-large);
+      }
+
+      :host([size="large"][variant]:not([variant="default"]).has-before) a {
+        padding-left: var(--action-before-slot-padding-large);
+      }
+
+
     </style>
 
     <a
-      part="${t}" 
+      part="${a}" 
       target="${this.getAttribute("target") || "_self"}" 
       href="${this.getAttribute("href") || "#"}"
       ${this.hasAttribute("download") ? `download="${this.getAttribute("download") || ""}"` : ""}
@@ -353,14 +578,28 @@ class u extends HTMLElement {
     </a>
     `;
   }
+  updateIconSizes(a, o) {
+    const e = this.getAttribute("size") || "medium", l = {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: o ? "medium" : "small",
+      large: o ? "large" : "medium"
+    }[e] || "small";
+    a.forEach((d) => {
+      if (d.nodeType === Node.ELEMENT_NODE) {
+        const r = d, n = r.tagName.toLowerCase();
+        (n === "svg" || r.classList.contains("mui-icon") || n === "mui-icon") && !r.hasAttribute("size") && r.setAttribute("size", l);
+      }
+    });
+  }
   waitForPartMap() {
-    return new Promise((t) => {
-      if (typeof n == "function") return t();
-      const a = () => {
-        typeof n == "function" ? t() : requestAnimationFrame(a);
+    return new Promise((a) => {
+      if (typeof v == "function") return a();
+      const o = () => {
+        typeof v == "function" ? a() : requestAnimationFrame(o);
       };
-      a();
+      o();
     });
   }
 }
-customElements.get("mui-link") || customElements.define("mui-link", u);
+customElements.get("mui-link") || customElements.define("mui-link", f);

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

@@ -35,19 +35,19 @@ const l = ["neutral", "positive", "info", "warning", "attention"], g = {
   info: "color: var(--feedback-info-text);",
   warning: "color: var(--feedback-warning-text);",
   attention: "color: var(--feedback-attention-text);"
-}, k = {
+}, m = {
   neutral: "mui-icon-message",
   positive: "mui-icon-check",
   info: "mui-icon-info",
   warning: "mui-icon-warning",
   attention: "mui-icon-attention"
 };
-class m extends HTMLElement {
+class k extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    const t = this.getAttribute("variant") || "neutral", e = l.includes(t) ? t : "neutral", a = this.getAttribute("heading") || "Heading...", o = this.getAttribute("icon") || k[e], n = v[e], i = f[e], r = g[e], s = b[e], c = u[e], d = (
+    const t = this.getAttribute("variant") || "neutral", e = l.includes(t) ? t : "neutral", a = this.getAttribute("heading") || "Heading...", o = this.getAttribute("icon") || m[e], i = v[e], n = f[e], r = g[e], s = b[e], c = u[e], d = (
       /*css*/
       `
       :host {
@@ -70,7 +70,7 @@ class m extends HTMLElement {
       .heading {
         font-weight: var(--font-weight-bold);
         font-size: var(--font-size-200);
-        ${i}
+        ${n}
       }
     `
     );
@@ -81,7 +81,7 @@ class m extends HTMLElement {
       <section aria-labelledby="message-heading" aria-live="${s}" role="${c}">
         <mui-h-stack space="var(--message-gap-horizontal)">
           <div class="icon">
-            <${o} color="var(${n})"></${o}>
+            <${o} size="medium" color="var(${i})"></${o}>
           </div>
           <mui-v-stack space="var(--message-gap-vertical)">
             <div class="heading" id="message-heading">${a}</div>
@@ -92,4 +92,4 @@ class m extends HTMLElement {
       `);
   }
 }
-customElements.get("mui-message") || customElements.define("mui-message", m);
+customElements.get("mui-message") || customElements.define("mui-message", k);

package/dist/esm/css/mui-tokens.css

@@ -384,7 +384,7 @@ html[data-theme="light"] {
   --slat-accessory-background: var(--black-opacity-10);
 
   /* Chip */
-  --chip-background: var(--white);
+  --chip-background: var(--input-background);
   --chip-background-hover: var(--white);
   --chip-background-focus: var(--white);
   --chip-background-active: var(--white);
@@ -604,10 +604,10 @@ html[data-theme="dark"] {
   --slat-accessory-background: var(--white-opacity-10);
 
   /* Chip */
-  --chip-background: var(--black);
-  --chip-background-hover: var(--black);
-  --chip-background-focus: var(--black);
-  --chip-background-active: var(--black);
+  --chip-background: var(--input-background);
+  --chip-background-hover: var(--grey-800);
+  --chip-background-focus: var(--grey-800);
+  --chip-background-active: var(--grey-800);
   --chip-border-color: var(--grey-700);
   --chip-border-color-hover: var(--grey-700);
   --chip-border-color-focus: var(--grey-700);
@@ -674,14 +674,36 @@ html[data-theme="dark"] {
   --action-attention-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color-focus);
   --action-attention-border-disabled: var(--stroke-size-200) var(--stroke-solid)
     var(--action-attention-border-color-disabled);
-  --action-padding: var(--space-200) calc(var(--space-300) + var(--space-100));
-  --action-before-slot-padding: var(--space-300);
-  --action-after-slot-padding: var(--space-300);
-  --action-icon-only-padding: var(--space-000);
   --action-radius: var(--radius-100);
   --action-font-size: var(--text-font-size);
   --action-line-height: var(--text-line-height);
   --action-font-weight: var(--font-weight-medium);
+
+  /* SIZE: XSMALL */
+  --action-padding-x-small: var(--space-050) var(--space-200);
+  --action-before-slot-padding-x-small: var(--space-100);
+  --action-after-slot-padding-x-small: var(--space-100);
+  --action-icon-only-size-x-small: 2.8rem;
+
+  /* SIZE: SMALL */
+  --action-padding-small: calc(var(--space-100) - (var(--stroke-size-100) / 2)) var(--space-300);
+  --action-before-slot-padding-small: var(--space-200);
+  --action-after-slot-padding-small: var(--space-200);
+  --action-icon-only-size-small: 3.6rem;
+
+  /* SIZE: MEDIUM: DEFAULT */
+  --action-padding: var(--space-200) calc(var(--space-300) + var(--space-100));
+  --action-before-slot-padding: var(--space-300);
+  --action-after-slot-padding: var(--space-300);
+  --action-icon-only-padding: var(--space-000);
+  --action-icon-only-size: 4.4rem;
+
+  /* SIZE: LARGE */
+  --action-padding-large: var(--space-300) var(--space-500);
+  --action-before-slot-padding-large: var(--space-400);
+  --action-after-slot-padding-large: var(--space-400);
+  --action-icon-only-size-large: 5.2rem;
+
   /* Text */
   --text-line-height-xs: var(--line-height-25);
   --text-line-height-s: var(--line-height-50);

package/dist/types/agent/prompts/index.d.ts

@@ -1,4 +1,9 @@
-export declare const muiPrompts: {
+export declare const muiPrompts: ({
     role: string;
     content: string;
-}[];
+    name?: undefined;
+} | {
+    role: string;
+    name: string;
+    content: string;
+})[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muibook/components",
-  "version": "6.1.1",
+  "version": "7.1.0",
   "type": "module",
   "description": "A library of MUI-based design system components.",
   "author": "Michael Trilford",