@muibook/components 19.6.0 → 20.1.0

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

@@ -1,79 +1,141 @@
-import { getPartMap as v } from "../../utils/part-map/index.js";
-class h extends HTMLElement {
+import { getPartMap as f } from "../../utils/part-map/index.js";
+class b 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" });
   }
+  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"), 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, e, o) {
+  attributeChangedCallback(a, o, r) {
     if (this.shadowRoot) {
-      if (t === "href") {
-        const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("href", o || "#");
-      }
-      if (t === "target") {
-        const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("target", o || "_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") || "#")));
-      }
-      if (t === "download") {
-        const a = this.shadowRoot.querySelector("a");
-        if (!a) return;
-        o !== null ? a.setAttribute("download", o === "" ? "" : o) : a.removeAttribute("download");
-      }
-      t === "size" && e !== o && 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 r = i.assignedNodes({ flatten: !0 });
-            this.updateIconSizes(r, s), this.updateAvatarSizes(r), this.updateBadgeSizes(r);
+      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);
           }
         });
-      });
+      }), a === "stroke-ring-size" && o !== r && this.syncRingSizeAttribute();
+    }
+  }
+  syncRingSizeAttribute() {
+    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 = 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, 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(
+    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 c;
-        return l.nodeType === Node.ELEMENT_NODE || l.nodeType === Node.TEXT_NODE && !!((c = l.textContent) != null && c.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());
       }
-    ), s = n(o), 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) => {
+    );
+    this.toggleAttribute("avatar-only", u);
+    const g = !u && !h && n.length > 0 && n.every(
+      (s) => {
         var l;
-        return d.nodeType === Node.ELEMENT_NODE ? d.classList.contains("mui-icon") || d.tagName.toLowerCase() === "svg" : !((l = d.textContent) != null && l.trim());
+        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", u), u ? this.updateIconSizes(r, !0) : [o, e, a].forEach((l) => {
+    this.toggleAttribute("icon-only", g), g ? this.updateIconSizes(n, !0) : [r, o, t].forEach((l) => {
       if (l) {
-        const c = l.assignedNodes({ flatten: !0 });
-        this.updateIconSizes(c, !1), this.updateAvatarSizes(c), this.updateBadgeSizes(c);
+        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>
 
-      :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 +148,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,11 +157,14 @@ 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);
-        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 {
@@ -142,12 +208,13 @@ 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);
-        border-radius: var(--action-radius);
+        min-height: var(--action-size-medium);
+        border-radius: var(--action-radius-medium);
         font-size: var(--action-font-size);
         font-weight: var(--action-font-weight);
         line-height: var(--action-line-height);
@@ -324,18 +391,125 @@ 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);
       }
       /* ===================================== */
 
+      :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);
@@ -425,6 +599,15 @@ class h 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);
@@ -569,9 +752,10 @@ class h 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);
         border-width: var(--stroke-size-100);
         border-radius: var(--action-radius-x-small);
@@ -588,6 +772,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 +782,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 +791,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,10 +800,45 @@ 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);
       }
 
+      :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,
@@ -638,32 +860,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,11 +982,45 @@ 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>
 
     <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"}"
@@ -777,8 +1033,8 @@ 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" ? {
+  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",
@@ -790,52 +1046,52 @@ class h extends HTMLElement {
       small: "xx-small",
       medium: "small",
       large: "medium"
-    })[e] || "small";
-    t.forEach((i) => {
+    })[o] || "small";
+    a.forEach((i) => {
       if (i.nodeType === Node.ELEMENT_NODE) {
-        const r = i;
-        r.tagName.toLowerCase() === "mui-avatar" && r.setAttribute("size", s);
+        const n = i;
+        n.tagName.toLowerCase() === "mui-avatar" && n.setAttribute("size", e);
       }
     });
   }
-  updateIconSizes(t, e) {
-    const o = 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: e ? "medium" : "small",
-      large: e ? "large" : "medium"
-    }[o] || "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);
+      medium: o ? "medium" : "small",
+      large: o ? "large" : "medium"
+    }[r] || "small";
+    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 e = 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"
-    }[e] || "medium";
-    t.forEach((n) => {
-      if (n.nodeType === Node.ELEMENT_NODE) {
-        const s = n;
-        s.tagName.toLowerCase() === "mui-badge" && s.setAttribute("size", a);
+    }[o] || "medium";
+    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();
-      const e = () => {
-        typeof v == "function" ? t() : requestAnimationFrame(e);
+    return new Promise((a) => {
+      if (typeof f == "function") return a();
+      const o = () => {
+        typeof f == "function" ? a() : requestAnimationFrame(o);
       };
-      e();
+      o();
     });
   }
 }
-customElements.get("mui-link") || customElements.define("mui-link", h);
+customElements.get("mui-link") || customElements.define("mui-link", b);