@muibook/components 20.0.0 → 20.1.0

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

@@ -1,5 +1,5 @@
-import { getPartMap as v } from "../../utils/part-map/index.js";
-class g extends HTMLElement {
+import { getPartMap as f } from "../../utils/part-map/index.js";
+class b extends HTMLElement {
   static get observedAttributes() {
     return [
       "target",
@@ -18,81 +18,112 @@ class g extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  focus(a) {
+    var r;
+    const o = (r = this.shadowRoot) == null ? void 0 : r.querySelector("a");
+    o ? o.focus(a) : super.focus(a);
+  }
   async connectedCallback() {
-    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());
+    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();
+    const a = this.shadowRoot;
+    if (!a) return;
+    [
+      a.querySelector("slot:not([name])"),
+      a.querySelector('slot[name="before"]'),
+      a.querySelector('slot[name="after"]')
+    ].forEach((r) => r == null ? void 0 : r.addEventListener("slotchange", () => this.updateSlotState())), requestAnimationFrame(() => this.updateSlotState());
   }
-  attributeChangedCallback(t, o, r) {
+  attributeChangedCallback(a, o, r) {
     if (this.shadowRoot) {
-      if (t === "href") {
-        const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("href", r || "#");
-      }
-      if (t === "target") {
-        const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("target", r || "_self");
-      }
-      if (t === "disabled") {
-        const a = this.shadowRoot.querySelector("a");
-        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;
-        r !== null ? a.setAttribute("download", r === "" ? "" : r) : a.removeAttribute("download");
-      }
-      t === "size" && o !== r && this.shadowRoot && requestAnimationFrame(() => {
-        const a = this.shadowRoot;
-        if (!a) return;
-        const n = [
-          a.querySelector("slot:not([name])"),
-          a.querySelector('slot[name="before"]'),
-          a.querySelector('slot[name="after"]')
-        ], s = this.hasAttribute("icon-only");
-        n.forEach((i) => {
-          if (i) {
-            const e = i.assignedNodes({ flatten: !0 });
-            this.updateIconSizes(e, s), this.updateAvatarSizes(e), this.updateBadgeSizes(e);
+      if (a === "href") {
+        const t = this.shadowRoot.querySelector("a");
+        t && t.setAttribute("href", r || "#");
+      }
+      if (a === "target") {
+        const t = this.shadowRoot.querySelector("a");
+        t && t.setAttribute("target", r || "_self");
+      }
+      if (a === "disabled") {
+        const t = this.shadowRoot.querySelector("a");
+        t && (r !== null ? (t.setAttribute("aria-disabled", "true"), t.setAttribute("href", "javascript:void(0)")) : (t.setAttribute("aria-disabled", "false"), t.setAttribute("href", this.getAttribute("href") || "#")));
+      }
+      if (a === "download") {
+        const t = this.shadowRoot.querySelector("a");
+        if (!t) return;
+        r !== null ? t.setAttribute("download", r === "" ? "" : r) : t.removeAttribute("download");
+      }
+      a === "size" && o !== r && this.shadowRoot && requestAnimationFrame(() => {
+        const t = this.shadowRoot;
+        if (!t) return;
+        const d = [
+          t.querySelector("slot:not([name])"),
+          t.querySelector('slot[name="before"]'),
+          t.querySelector('slot[name="after"]')
+        ], e = this.hasAttribute("icon-only"), i = this.hasAttribute("avatar-only");
+        d.forEach((n) => {
+          if (n) {
+            const c = n.assignedNodes({ flatten: !0 });
+            this.updateIconSizes(c, e), i || this.updateAvatarSizes(c), this.updateBadgeSizes(c);
           }
         });
-      }), t === "stroke-ring-size" && o !== r && this.syncRingSizeAttribute();
+      }), a === "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) {
+    var t;
+    const a = (t = this.getAttribute("stroke-ring-size")) == null ? void 0 : t.trim();
+    if (!a) {
       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);
+    const o = a.startsWith("stroke-size-") ? a.replace("stroke-size-", "") : a, r = /^(100|200|300|400|500)$/.test(o);
+    this.style.setProperty("--action-ring-size", r ? `var(--stroke-size-${o})` : a);
+  }
+  isAvatarOnlyElement(a) {
+    const o = a.tagName.toLowerCase();
+    if (o === "mui-avatar") return !0;
+    if (o !== "mui-responsive") return !1;
+    const r = Array.from(a.childNodes), t = r.filter((e) => e.nodeType === Node.ELEMENT_NODE);
+    return r.every(
+      (e) => {
+        var i;
+        return e.nodeType === Node.TEXT_NODE ? !((i = e.textContent) != null && i.trim()) : e.nodeType === Node.ELEMENT_NODE;
+      }
+    ) && t.length > 0 && t.every((e) => e.tagName.toLowerCase() === "mui-avatar");
   }
   updateSlotState() {
-    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 d.nodeType === Node.ELEMENT_NODE || d.nodeType === Node.TEXT_NODE && !!((c = d.textContent) != null && c.trim());
-      }
-    ), s = n(r), i = n(a);
-    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", i);
-    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(
+    const a = this.shadowRoot, o = a.querySelector("slot:not([name])"), r = a.querySelector('slot[name="before"]'), t = a.querySelector('slot[name="after"]'), d = (s) => !!s && s.assignedNodes({ flatten: !0 }).some(
       (l) => {
-        var d;
-        return l.nodeType === Node.ELEMENT_NODE ? l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "svg" : !((d = l.textContent) != null && d.trim());
+        var v;
+        return l.nodeType === Node.ELEMENT_NODE || l.nodeType === Node.TEXT_NODE && !!((v = l.textContent) != null && v.trim());
+      }
+    ), e = d(r), i = d(t);
+    this.toggleAttribute("has-before", e), this.toggleAttribute("has-after", i);
+    const n = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], c = (o == null ? void 0 : o.assignedElements({ flatten: !0 })) ?? [], h = c.some((s) => s.tagName.toLowerCase() === "mui-video-thumbnail");
+    this.toggleAttribute("has-video", h);
+    const u = !h && c.length === 1 && this.isAvatarOnlyElement(c[0]) && n.every(
+      (s) => {
+        var l;
+        return s.nodeType === Node.ELEMENT_NODE ? this.isAvatarOnlyElement(s) : !((l = s.textContent) != null && l.trim());
       }
     );
-    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);
+    this.toggleAttribute("avatar-only", u);
+    const g = !u && !h && n.length > 0 && n.every(
+      (s) => {
+        var l;
+        return s.nodeType === Node.ELEMENT_NODE ? s.classList.contains("mui-icon") || s.tagName.toLowerCase() === "svg" : !((l = s.textContent) != null && l.trim());
+      }
+    );
+    this.toggleAttribute("icon-only", g), g ? this.updateIconSizes(n, !0) : [r, o, t].forEach((l) => {
+      if (l) {
+        const v = l.assignedNodes({ flatten: !0 });
+        this.updateIconSizes(v, !1), u || this.updateAvatarSizes(v), this.updateBadgeSizes(v);
       }
     });
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = v("text", "spacing", "layout", "visual");
+    const a = f("text", "spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
     <style>
@@ -132,8 +163,8 @@ class g extends HTMLElement {
       }
 
       :host([size="xx-small"]) a {
-        font-size: var(--font-size-15);
-        line-height: var(--line-height-25);
+        font-size: var(--text-font-size-xxs);
+        line-height: var(--text-line-height-xxs);
       }
 
       :host([size="x-small"]) a {
@@ -183,7 +214,7 @@ class g extends HTMLElement {
         text-decoration: none;
         padding: var(--action-padding);
         min-height: var(--action-size-medium);
-        border-radius: var(--action-radius);
+        border-radius: var(--action-radius-medium);
         font-size: var(--action-font-size);
         font-weight: var(--action-font-weight);
         line-height: var(--action-line-height);
@@ -441,6 +472,44 @@ class g extends HTMLElement {
       }
       /* ===================================== */
 
+      :host([avatar-only]) {
+        width: auto;
+        display: flex;
+      }
+
+      :host([avatar-only]) a,
+      :host([avatar-only]) a:hover,
+      :host([avatar-only]) a:focus,
+      :host([avatar-only]) a:focus-visible,
+      :host([avatar-only]) a[aria-disabled="true"] {
+        width: auto;
+        min-width: 0;
+        min-height: 0;
+        padding: var(--space-000);
+        background: transparent;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-000);
+        line-height: 0;
+        border-radius: 999rem;
+        text-decoration: none;
+        text-decoration-color: transparent;
+      }
+
+      :host([avatar-only]) a ::slotted(mui-avatar) {
+        margin-right: var(--space-000);
+        margin-left: var(--space-000);
+      }
+      :host([avatar-only]) a ::slotted(mui-responsive) {
+        display: flex;
+        margin-right: var(--space-000);
+        margin-left: var(--space-000);
+        line-height: 0;
+        text-decoration: none;
+      }
+      /* ===================================== */
+
       :host([alert-positive-slot]) {
         --alert-text: var(--feedback-positive-text);
         --alert-icon: var(--feedback-positive-icon);
@@ -530,6 +599,15 @@ class g extends HTMLElement {
         --avatar-background-override: var(--action-avatar-background-hover);
       }
 
+      :host([avatar-only][variant][size]) a ::slotted(mui-avatar) {
+        margin-right: var(--space-000);
+        margin-left: var(--space-000);
+      }
+      :host([avatar-only][variant][size]) a ::slotted(mui-responsive) {
+        margin-right: var(--space-000);
+        margin-left: var(--space-000);
+      }
+
       /* Badge Spacing */
       :host([has-before]) a ::slotted(mui-badge[slot="before"]) {
         margin-right: var(--space-025);
@@ -674,8 +752,8 @@ class g extends HTMLElement {
       :host([size="xx-small"][usage="input"]) a:hover,
       :host([size="xx-small"][usage="input"]) a:focus,
       :host([size="xx-small"][usage="input"]) a[aria-disabled="true"] {
-        font-size: var(--font-size-15);
-        line-height: var(--line-height-25);
+        font-size: var(--text-font-size-xxs);
+        line-height: var(--text-line-height-xxs);
         font-weight: var(--font-weight-semi-bold);
         min-height: var(--action-size-xx-small);
         padding: var(--space-025) var(--space-100);
@@ -727,6 +805,40 @@ class g extends HTMLElement {
         border-radius: var(--action-radius-large);
       }
 
+      :host([size][dropdown-slot]) a,
+      :host([size][dropdown-slot]) a:hover,
+      :host([size][dropdown-slot]) a:focus,
+      :host([size][dropdown-slot]) a[aria-disabled="true"],
+      :host([size][dropdown-slot][has-after]) a,
+      :host([size][dropdown-slot][has-before]) a,
+      :host([dropdown-slot]) a {
+        border-radius: var(--radius-000);
+        justify-content: flex-start;
+        white-space: nowrap;
+      }
+
+      :host([size][dropdown-slot-first]) a,
+      :host([size][dropdown-slot-first]) a:hover,
+      :host([size][dropdown-slot-first]) a:focus,
+      :host([size][dropdown-slot-first]) a[aria-disabled="true"],
+      :host([size][dropdown-slot-first][has-after]) a,
+      :host([size][dropdown-slot-first][has-before]) a,
+      :host([dropdown-slot-first]) a {
+        border-top-left-radius: calc(var(--radius-100) / 2);
+        border-top-right-radius: calc(var(--radius-100) / 2);
+      }
+
+      :host([size][dropdown-slot-last]) a,
+      :host([size][dropdown-slot-last]) a:hover,
+      :host([size][dropdown-slot-last]) a:focus,
+      :host([size][dropdown-slot-last]) a[aria-disabled="true"],
+      :host([size][dropdown-slot-last][has-after]) a,
+      :host([size][dropdown-slot-last][has-before]) a,
+      :host([dropdown-slot-last]) a {
+        border-bottom-left-radius: calc(var(--radius-100) / 2);
+        border-bottom-right-radius: calc(var(--radius-100) / 2);
+      }
+
       /* Keep input-composed links flush against the input edge after size radius applies. */
       :host([slot="before"][usage="input"]) a,
       :host([slot="before"][usage="input"]) a:hover,
@@ -908,7 +1020,7 @@ class g extends HTMLElement {
     </style>
 
     <a
-      part="${t}" 
+      part="${a}" 
       target="${this.getAttribute("target") || "_self"}" 
       href="${this.hasAttribute("disabled") ? "javascript:void(0)" : this.getAttribute("href") || "#"}"
       aria-disabled="${this.hasAttribute("disabled") ? "true" : "false"}"
@@ -921,8 +1033,8 @@ class g extends HTMLElement {
     `;
   }
   // Update avatar sizes based on button size
-  updateAvatarSizes(t) {
-    const o = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
+  updateAvatarSizes(a) {
+    const o = this.getAttribute("size") || "medium", e = ((this.getAttribute("variant") || "default") === "default" ? {
       "xx-small": "xx-small",
       "x-small": "xx-small",
       small: "xx-small",
@@ -935,51 +1047,51 @@ class g extends HTMLElement {
       medium: "small",
       large: "medium"
     })[o] || "small";
-    t.forEach((i) => {
+    a.forEach((i) => {
       if (i.nodeType === Node.ELEMENT_NODE) {
-        const e = i;
-        e.tagName.toLowerCase() === "mui-avatar" && e.setAttribute("size", s);
+        const n = i;
+        n.tagName.toLowerCase() === "mui-avatar" && n.setAttribute("size", e);
       }
     });
   }
-  updateIconSizes(t, o) {
-    const r = this.getAttribute("size") || "medium", n = {
+  updateIconSizes(a, o) {
+    const r = this.getAttribute("size") || "medium", d = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
       medium: o ? "medium" : "small",
       large: o ? "large" : "medium"
     }[r] || "small";
-    t.forEach((s) => {
-      if (s.nodeType === Node.ELEMENT_NODE) {
-        const i = s, e = i.tagName.toLowerCase();
-        (e === "svg" || i.classList.contains("mui-icon") || e === "mui-icon") && !i.hasAttribute("size") && i.setAttribute("size", n);
+    a.forEach((e) => {
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const i = e, n = i.tagName.toLowerCase();
+        (n === "svg" || i.classList.contains("mui-icon") || n === "mui-icon") && !i.hasAttribute("size") && i.setAttribute("size", d);
       }
     });
   }
-  updateBadgeSizes(t) {
-    const o = this.getAttribute("size") || "medium", a = {
+  updateBadgeSizes(a) {
+    const o = this.getAttribute("size") || "medium", t = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
     }[o] || "medium";
-    t.forEach((n) => {
-      if (n.nodeType === Node.ELEMENT_NODE) {
-        const s = n;
-        s.tagName.toLowerCase() === "mui-badge" && s.setAttribute("size", a);
+    a.forEach((d) => {
+      if (d.nodeType === Node.ELEMENT_NODE) {
+        const e = d;
+        e.tagName.toLowerCase() === "mui-badge" && e.setAttribute("size", t);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((t) => {
-      if (typeof v == "function") return t();
+    return new Promise((a) => {
+      if (typeof f == "function") return a();
       const o = () => {
-        typeof v == "function" ? t() : requestAnimationFrame(o);
+        typeof f == "function" ? a() : requestAnimationFrame(o);
       };
       o();
     });
   }
 }
-customElements.get("mui-link") || customElements.define("mui-link", g);
+customElements.get("mui-link") || customElements.define("mui-link", b);