@muibook/components 19.6.0 → 20.0.0

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

@@ -1,34 +1,46 @@
 import { getPartMap as v } from "../../utils/part-map/index.js";
-class h extends HTMLElement {
+class g extends HTMLElement {
   static get observedAttributes() {
-    return ["target", "href", "variant", "disabled", "weight", "size", "download", "usage"];
+    return [
+      "target",
+      "href",
+      "variant",
+      "disabled",
+      "weight",
+      "stroke",
+      "stroke-ring-size",
+      "focus-ring",
+      "size",
+      "download",
+      "usage"
+    ];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   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());
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.syncRingSizeAttribute(), await this.waitForPartMap(), this.render(), requestAnimationFrame(() => this.updateSlotState());
   }
-  attributeChangedCallback(t, e, o) {
+  attributeChangedCallback(t, o, r) {
     if (this.shadowRoot) {
       if (t === "href") {
         const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("href", o || "#");
+        a && a.setAttribute("href", r || "#");
       }
       if (t === "target") {
         const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("target", o || "_self");
+        a && a.setAttribute("target", r || "_self");
       }
       if (t === "disabled") {
         const a = this.shadowRoot.querySelector("a");
-        a && (o !== null ? (a.setAttribute("aria-disabled", "true"), a.setAttribute("href", "javascript:void(0)")) : (a.setAttribute("aria-disabled", "false"), a.setAttribute("href", this.getAttribute("href") || "#")));
+        a && (r !== null ? (a.setAttribute("aria-disabled", "true"), a.setAttribute("href", "javascript:void(0)")) : (a.setAttribute("aria-disabled", "false"), a.setAttribute("href", this.getAttribute("href") || "#")));
       }
       if (t === "download") {
         const a = this.shadowRoot.querySelector("a");
         if (!a) return;
-        o !== null ? a.setAttribute("download", o === "" ? "" : o) : a.removeAttribute("download");
+        r !== null ? a.setAttribute("download", r === "" ? "" : r) : a.removeAttribute("download");
       }
-      t === "size" && e !== o && this.shadowRoot && requestAnimationFrame(() => {
+      t === "size" && o !== r && this.shadowRoot && requestAnimationFrame(() => {
         const a = this.shadowRoot;
         if (!a) return;
         const n = [
@@ -38,30 +50,42 @@ class h extends HTMLElement {
         ], s = this.hasAttribute("icon-only");
         n.forEach((i) => {
           if (i) {
-            const r = i.assignedNodes({ flatten: !0 });
-            this.updateIconSizes(r, s), this.updateAvatarSizes(r), this.updateBadgeSizes(r);
+            const e = i.assignedNodes({ flatten: !0 });
+            this.updateIconSizes(e, s), this.updateAvatarSizes(e), this.updateBadgeSizes(e);
           }
         });
-      });
+      }), t === "stroke-ring-size" && o !== r && this.syncRingSizeAttribute();
     }
   }
+  syncRingSizeAttribute() {
+    var a;
+    const t = (a = this.getAttribute("stroke-ring-size")) == null ? void 0 : a.trim();
+    if (!t) {
+      this.style.removeProperty("--action-ring-size");
+      return;
+    }
+    const o = t.startsWith("stroke-size-") ? t.replace("stroke-size-", "") : t, r = /^(100|200|300|400|500)$/.test(o);
+    this.style.setProperty("--action-ring-size", r ? `var(--stroke-size-${o})` : t);
+  }
   updateSlotState() {
-    const t = this.shadowRoot, e = t.querySelector("slot:not([name])"), o = t.querySelector('slot[name="before"]'), a = t.querySelector('slot[name="after"]'), n = (d) => !!d && d.assignedNodes({ flatten: !0 }).some(
-      (l) => {
+    const t = this.shadowRoot, o = t.querySelector("slot:not([name])"), r = t.querySelector('slot[name="before"]'), a = t.querySelector('slot[name="after"]'), n = (l) => !!l && l.assignedNodes({ flatten: !0 }).some(
+      (d) => {
         var c;
-        return l.nodeType === Node.ELEMENT_NODE || l.nodeType === Node.TEXT_NODE && !!((c = l.textContent) != null && c.trim());
+        return d.nodeType === Node.ELEMENT_NODE || d.nodeType === Node.TEXT_NODE && !!((c = d.textContent) != null && c.trim());
       }
-    ), s = n(o), i = n(a);
+    ), s = n(r), i = n(a);
     this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", i);
-    const r = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) ?? [], u = r.length > 0 && r.every(
-      (d) => {
-        var l;
-        return d.nodeType === Node.ELEMENT_NODE ? d.classList.contains("mui-icon") || d.tagName.toLowerCase() === "svg" : !((l = d.textContent) != null && l.trim());
+    const e = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], h = ((o == null ? void 0 : o.assignedElements({ flatten: !0 })) ?? []).some((l) => l.tagName.toLowerCase() === "mui-video-thumbnail");
+    this.toggleAttribute("has-video", h);
+    const f = !h && e.length > 0 && e.every(
+      (l) => {
+        var d;
+        return l.nodeType === Node.ELEMENT_NODE ? l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "svg" : !((d = l.textContent) != null && d.trim());
       }
     );
-    this.toggleAttribute("icon-only", u), u ? this.updateIconSizes(r, !0) : [o, e, a].forEach((l) => {
-      if (l) {
-        const c = l.assignedNodes({ flatten: !0 });
+    this.toggleAttribute("icon-only", f), f ? this.updateIconSizes(e, !0) : [r, o, a].forEach((d) => {
+      if (d) {
+        const c = d.assignedNodes({ flatten: !0 });
         this.updateIconSizes(c, !1), this.updateAvatarSizes(c), this.updateBadgeSizes(c);
       }
     });
@@ -73,7 +97,14 @@ class h extends HTMLElement {
     `
     <style>
 
-      :host { display: inline-flex; width: auto; text-align: initial }
+      :host {
+        display: inline-flex;
+        width: auto;
+        text-align: initial;
+        --action-focus-outline: var(--stroke-size-400) var(--stroke-outset) var(--outline-color);
+        --action-focus-outline-inset-offset: var(--stroke-size-400);
+        --action-focus-outline-offset: calc(-1 * var(--action-focus-outline-inset-offset));
+      }
 
       a {
         color: var(--link-text-color-default);
@@ -86,6 +117,7 @@ class h extends HTMLElement {
         text-decoration-color: color-mix(in srgb, var(--text-color) 50%, transparent);
         width: inherit;
         display: inherit;
+        border-radius: var(--link-focus-radius, var(--radius-200));
       }
 
       /* Turned back on for focus-visible */
@@ -94,7 +126,10 @@ class h extends HTMLElement {
       a:focus { color: var(--link-text-color-default-focus); text-decoration-color: color-mix(in srgb, var(--link-text-color-default-focus) 80%, transparent); }
       a[aria-disabled="true"] { color: var(--link-text-color-default-disabled); text-decoration-color: color-mix(in srgb, var(--link-text-color-default-disabled) 80%, transparent); cursor: not-allowed; }
       a, a:before, a:after {box-sizing: border-box;}
-      a:focus-visible { outline: var(--outline-thick); }
+      a:focus-visible {
+        outline: var(--action-focus-outline);
+        outline-offset: var(--action-focus-outline-offset);
+      }
 
       :host([size="xx-small"]) a {
         font-size: var(--font-size-15);
@@ -142,11 +177,12 @@ class h extends HTMLElement {
       :host([variant="overlay"]) a,
       :host([variant="attention"]) a,
       :host([usage="input"]) a {
-        display: inherit;
+        display: inline-flex;
         text-align: inherit;
         width: 100%;
         text-decoration: none;
         padding: var(--action-padding);
+        min-height: var(--action-size-medium);
         border-radius: var(--action-radius);
         font-size: var(--action-font-size);
         font-weight: var(--action-font-weight);
@@ -324,14 +360,83 @@ class h extends HTMLElement {
       :host([variant="attention"]) a:focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
       :host([variant="attention"]) a[aria-disabled="true"] ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
 
+      :host,
+      :host([variant="primary"]) {
+        --action-ring-color: var(--action-primary-border-color);
+        --action-ring-color-hover: var(--action-primary-border-color-hover);
+        --action-ring-color-focus: var(--action-primary-border-color-focus);
+        --action-ring-color-disabled: var(--action-primary-border-color-disabled);
+      }
+
+      :host([variant="secondary"]) {
+        --action-ring-color: var(--action-secondary-border-color);
+        --action-ring-color-hover: var(--action-secondary-border-color-hover);
+        --action-ring-color-focus: var(--action-secondary-border-color-focus);
+        --action-ring-color-disabled: var(--action-secondary-border-color-disabled);
+      }
+
+      :host([variant="tertiary"]) {
+        --action-ring-color: var(--action-tertiary-border-color);
+        --action-ring-color-hover: var(--action-tertiary-border-color-hover);
+        --action-ring-color-focus: var(--action-tertiary-border-color-focus);
+        --action-ring-color-disabled: var(--action-tertiary-border-color-disabled);
+      }
+
+      :host([variant="overlay"]) {
+        --action-ring-size: var(--stroke-size-100);
+        --action-ring-color: var(--action-overlay-border-color);
+        --action-ring-color-hover: var(--action-overlay-border-color-hover);
+        --action-ring-color-focus: var(--action-overlay-border-color-focus);
+        --action-ring-color-disabled: var(--action-overlay-border-color-disabled);
+      }
+
+      :host([variant="attention"]) {
+        --action-ring-color: var(--action-attention-border-color);
+        --action-ring-color-hover: var(--action-attention-border-color-hover);
+        --action-ring-color-focus: var(--action-attention-border-color-focus);
+        --action-ring-color-disabled: var(--action-attention-border-color-disabled);
+      }
+
+      :host([stroke="ring"][variant]:not([variant="default"]):not([usage="input"])) a {
+        border: none;
+        box-shadow: var(
+          --action-ring-shadow,
+          inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color)
+        );
+      }
+
+      :host([stroke="ring"][variant]:not([variant="default"]):not([usage="input"])) a:hover {
+        border: none;
+        box-shadow: var(
+          --action-ring-shadow-hover,
+          inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-hover)
+        );
+      }
+
+      :host([stroke="ring"][variant]:not([variant="default"]):not([usage="input"])) a:focus-visible {
+        border: none;
+        box-shadow: var(
+          --action-ring-shadow-focus,
+          inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-focus)
+        );
+      }
+
+      :host([stroke="ring"][variant]:not([variant="default"]):not([usage="input"])) a[aria-disabled="true"] {
+        border: none;
+        box-shadow: var(
+          --action-ring-shadow-disabled,
+          inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-disabled)
+        );
+      }
+
       /* Icon only
       ========================================= */
       :host([icon-only]) a {
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 44px;
-        width: 44px;
+        height: var(--action-size-medium);
+        width: var(--action-size-medium);
         padding: var(--action-icon-only-padding);
       }
       /* ===================================== */
@@ -572,6 +677,7 @@ class h extends HTMLElement {
         font-size: var(--font-size-15);
         line-height: var(--line-height-25);
         font-weight: var(--font-weight-semi-bold);
+        min-height: var(--action-size-xx-small);
         padding: var(--space-025) var(--space-100);
         border-width: var(--stroke-size-100);
         border-radius: var(--action-radius-x-small);
@@ -588,6 +694,7 @@ class h extends HTMLElement {
         font-size: var(--text-font-size-xs);
         line-height: var(--text-line-height-xs);
         font-weight: var(--font-weight-semi-bold);
+        min-height: var(--action-size-x-small);
         padding: var(--action-padding-x-small);
         border-width: var(--stroke-size-100);
         border-radius: var(--action-radius-x-small);
@@ -597,6 +704,7 @@ class h extends HTMLElement {
       :host([size="small"][usage="input"]) a {
         font-size: var(--text-font-size-s);
         line-height: var(--text-line-height-s);
+        min-height: var(--action-size-small);
         padding: var(--action-padding-small);
         border-radius: var(--action-radius-small);
       }
@@ -605,6 +713,7 @@ class h extends HTMLElement {
       :host([size="medium"][usage="input"]) a {
         font-size: var(--text-font-size-m);
         line-height: var(--text-line-height-m);
+        min-height: var(--action-size-medium);
         padding: var(--action-padding);
         border-radius: var(--action-radius-medium);
       }
@@ -613,6 +722,7 @@ class h extends HTMLElement {
       :host([size="large"][usage="input"]) a {
         font-size: var(--text-font-size-l);
         line-height: var(--text-line-height-l);
+        min-height: var(--action-size-large);
         padding: var(--action-padding-large);
         border-radius: var(--action-radius-large);
       }
@@ -638,32 +748,32 @@ class h extends HTMLElement {
 
       /* Icon-only size variants */
       :host([size="xx-small"][variant]:not([variant="default"])[icon-only]) a {
-        height: calc(var(--action-icon-only-size-x-small) - var(--space-100));
-        width: calc(var(--action-icon-only-size-x-small) - var(--space-100));
+        height: var(--action-size-xx-small);
+        width: var(--action-size-xx-small);
         padding: var(--action-icon-only-padding);
       }
 
       :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);
+        height: var(--action-size-x-small);
+        width: var(--action-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);
+        height: var(--action-size-small);
+        width: var(--action-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);
+        height: var(--action-size-medium);
+        width: var(--action-size-medium);
         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);
+        height: var(--action-size-large);
+        width: var(--action-size-large);
         padding: var(--action-icon-only-padding);
       }
 
@@ -760,6 +870,40 @@ class h extends HTMLElement {
         padding-left: var(--action-before-slot-padding-large);
       }
 
+      :host([has-video]) {
+        display: inline-block;
+        width: auto;
+        text-align: initial;
+      }
+
+      :host([has-video]) a,
+      :host([has-video]) a:hover,
+      :host([has-video]) a:focus,
+      :host([has-video]) a:focus-visible,
+      :host([has-video]) a[aria-disabled="true"] {
+        display: block;
+        width: 100%;
+        min-height: 0;
+        padding: var(--space-000);
+        border: none;
+        border-radius: var(--radius-000);
+        background: transparent;
+        color: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        text-align: initial;
+        text-decoration: none;
+        box-shadow: none;
+        outline-offset: var(--video-thumbnail-action-focus-outline-offset, var(--space-300));
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+      }
+
+      :host([focus-ring="outset"]) a:focus-visible {
+        outline-offset: var(--action-focus-outline-outset-offset, var(--stroke-size-200));
+      }
+
 
     </style>
 
@@ -778,7 +922,7 @@ class h extends HTMLElement {
   }
   // Update avatar sizes based on button size
   updateAvatarSizes(t) {
-    const e = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
+    const o = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
       "xx-small": "xx-small",
       "x-small": "xx-small",
       small: "xx-small",
@@ -790,37 +934,37 @@ class h extends HTMLElement {
       small: "xx-small",
       medium: "small",
       large: "medium"
-    })[e] || "small";
+    })[o] || "small";
     t.forEach((i) => {
       if (i.nodeType === Node.ELEMENT_NODE) {
-        const r = i;
-        r.tagName.toLowerCase() === "mui-avatar" && r.setAttribute("size", s);
+        const e = i;
+        e.tagName.toLowerCase() === "mui-avatar" && e.setAttribute("size", s);
       }
     });
   }
-  updateIconSizes(t, e) {
-    const o = this.getAttribute("size") || "medium", n = {
+  updateIconSizes(t, o) {
+    const r = this.getAttribute("size") || "medium", n = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
-      medium: e ? "medium" : "small",
-      large: e ? "large" : "medium"
-    }[o] || "small";
+      medium: o ? "medium" : "small",
+      large: o ? "large" : "medium"
+    }[r] || "small";
     t.forEach((s) => {
       if (s.nodeType === Node.ELEMENT_NODE) {
-        const i = s, r = i.tagName.toLowerCase();
-        (r === "svg" || i.classList.contains("mui-icon") || r === "mui-icon") && !i.hasAttribute("size") && i.setAttribute("size", n);
+        const i = s, e = i.tagName.toLowerCase();
+        (e === "svg" || i.classList.contains("mui-icon") || e === "mui-icon") && !i.hasAttribute("size") && i.setAttribute("size", n);
       }
     });
   }
   updateBadgeSizes(t) {
-    const e = this.getAttribute("size") || "medium", a = {
+    const o = this.getAttribute("size") || "medium", a = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
-    }[e] || "medium";
+    }[o] || "medium";
     t.forEach((n) => {
       if (n.nodeType === Node.ELEMENT_NODE) {
         const s = n;
@@ -831,11 +975,11 @@ class h extends HTMLElement {
   waitForPartMap() {
     return new Promise((t) => {
       if (typeof v == "function") return t();
-      const e = () => {
-        typeof v == "function" ? t() : requestAnimationFrame(e);
+      const o = () => {
+        typeof v == "function" ? t() : requestAnimationFrame(o);
       };
-      e();
+      o();
     });
   }
 }
-customElements.get("mui-link") || customElements.define("mui-link", h);
+customElements.get("mui-link") || customElements.define("mui-link", g);

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

@@ -42,7 +42,7 @@ const f = ["neutral", "positive", "info", "warning", "attention"], h = {
   warning: "mui-icon-warning",
   attention: "mui-icon-attention"
 };
-class C extends HTMLElement {
+class y extends HTMLElement {
   constructor() {
     super(), this.contentSlotListener = null, this.attachShadow({ mode: "open" });
   }
@@ -77,7 +77,7 @@ class C extends HTMLElement {
     this.contentSlotListener = n, t.addEventListener("slotchange", this.contentSlotListener), requestAnimationFrame(n);
   }
   render() {
-    const e = this.getAttribute("variant") || "neutral", t = f.includes(e) ? e : "neutral", n = this.getMessageSize(), i = this.getAttribute("heading") || "Heading...", r = this.getAttribute("icon") || z[t], o = S[t], a = w[t], c = h[t], l = p[t], d = k[t], g = n === "large" ? "var(--message-gap-horizontal)" : n === "medium" ? "var(--space-200)" : "var(--space-100)", u = n === "large" ? "var(--message-gap-vertical)" : n === "medium" ? "var(--space-100)" : "var(--space-050)", v = n === "large" ? "var(--font-size-200)" : "var(--font-size-100)", b = n === "large" ? "medium" : "small", m = (
+    const e = this.getAttribute("variant") || "neutral", t = f.includes(e) ? e : "neutral", n = this.getMessageSize(), i = this.getAttribute("heading") || "Heading...", r = this.getAttribute("icon") || z[t], o = S[t], a = w[t], c = h[t], l = p[t], d = k[t], g = n === "large" ? "var(--message-gap-horizontal)" : n === "medium" ? "var(--space-200)" : "var(--space-100)", u = n === "large" ? "var(--message-gap-vertical)" : n === "medium" ? "var(--space-100)" : "var(--space-050)", v = n === "large" ? "var(--font-size-200)" : "var(--font-size-100)", m = n === "large" ? "medium" : "small", b = (
       /*css*/
       `
       :host {
@@ -98,7 +98,8 @@ class C extends HTMLElement {
       }
 
       .heading {
-        font-weight: var(--font-weight-bold);
+        font-family: var(--heading-font-family);
+        font-weight: var(--heading-font-weight);
         font-size: ${v};
         ${a}
       }
@@ -106,12 +107,12 @@ class C extends HTMLElement {
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${m}</style>
+        <style>${b}</style>
     
       <section aria-labelledby="message-heading" aria-live="${l}" role="${d}">
         <mui-h-stack space="${g}">
           <div class="icon">
-            <${r} size="${b}" color="var(${o})"></${r}>
+            <${r} size="${m}" color="var(${o})"></${r}>
           </div>
           <mui-v-stack space="${u}">
             <div class="heading" id="message-heading">${i}</div>
@@ -122,4 +123,4 @@ class C extends HTMLElement {
       `, this.setupContentSlot(n));
   }
 }
-customElements.get("mui-message") || customElements.define("mui-message", C);
+customElements.get("mui-message") || customElements.define("mui-message", y);