@muibook/components 19.6.0 → 20.1.0

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

@@ -1,21 +1,164 @@
-class t extends HTMLElement {
+class n extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.hoverRow = null, this.handlePointerOver = (t) => {
+      if (!this.isHoverHighlightEnabled()) return;
+      const e = this.getEventRow(t);
+      if (!e || !this.isBodyRow(e)) {
+        this.hoverRow && (this.hoverRow = null, this.scheduleHighlightUpdate());
+        return;
+      }
+      this.hoverRow !== e && (this.hoverRow = e, this.scheduleHighlightUpdate());
+    }, this.handlePointerLeave = () => {
+      this.hoverRow && (this.hoverRow = null, this.scheduleHighlightUpdate());
+    }, this.handleRowClick = (t) => {
+      if (!this.hasHighlightMode("select")) return;
+      const e = this.getEventRow(t);
+      if (!e || !this.isBodyRow(e)) return;
+      const i = e.getAttribute("row-id"), r = this.getBodyRows().indexOf(e);
+      i ? (this.setAttribute("highlight-row", i), this.removeAttribute("highlight-row-index")) : r >= 0 && (this.setAttribute("highlight-row-index", String(r)), this.removeAttribute("highlight-row")), this.dispatchEvent(
+        new CustomEvent("row-highlight-change", {
+          detail: { row: e, rowId: i, rowIndex: r, source: "select" },
+          bubbles: !0
+        })
+      );
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["highlight", "highlight-row", "highlight-row-index"];
   }
   connectedCallback() {
-    this.setAttribute("role", "table"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    this.setAttribute("role", "table"), this.render(), this.addEventListener("pointerover", this.handlePointerOver), this.addEventListener("pointerleave", this.handlePointerLeave), this.addEventListener("click", this.handleRowClick), this.syncHighlightTracking(), this.scheduleHighlightUpdate();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("pointerover", this.handlePointerOver), this.removeEventListener("pointerleave", this.handlePointerLeave), this.removeEventListener("click", this.handleRowClick), this.disconnectLayoutObservers(), this.animationFrame && cancelAnimationFrame(this.animationFrame);
+  }
+  attributeChangedCallback() {
+    this.syncHighlightTracking(), this.scheduleHighlightUpdate();
+  }
+  hasHighlightTarget() {
+    return this.hasAttribute("highlight-row") || this.hasAttribute("highlight-row-index");
+  }
+  get highlightModes() {
+    return (this.getAttribute("highlight") || "").split(/\s+/).map((t) => t.trim().toLowerCase()).filter(Boolean);
+  }
+  hasHighlightMode(t) {
+    return this.highlightModes.includes(t);
+  }
+  isHoverHighlightEnabled() {
+    return this.hasHighlightMode("hover") && !this.hasHighlightMode("select");
+  }
+  hasHighlightBehavior() {
+    return this.hasHighlightTarget() || this.highlightModes.length > 0;
+  }
+  getBodyRows() {
+    return Array.from(this.querySelectorAll("mui-row-group:not([heading]) > mui-row"));
+  }
+  getEventRow(t) {
+    return t.composedPath().find((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "mui-row");
+  }
+  isBodyRow(t) {
+    return this.getBodyRows().includes(t);
+  }
+  getHighlightRow() {
+    if (this.hoverRow && this.isHoverHighlightEnabled())
+      return this.hoverRow;
+    const t = this.getAttribute("highlight-row");
+    if (t)
+      return this.querySelector(`mui-row[row-id="${CSS.escape(t)}"]`);
+    const e = this.getAttribute("highlight-row-index");
+    if (e === null) return null;
+    const i = Number.parseInt(e, 10);
+    return !Number.isFinite(i) || i < 0 ? null : this.getBodyRows()[i] || null;
+  }
+  observeLayout() {
+    var t, e;
+    (t = this.resizeObserver) == null || t.disconnect(), (e = this.mutationObserver) == null || e.disconnect(), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.scheduleHighlightUpdate()), this.resizeObserver.observe(this)), this.mutationObserver = new MutationObserver(() => this.scheduleHighlightUpdate()), this.mutationObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["row-id", "hidden", "style", "columns", "size"]
+    });
+  }
+  disconnectLayoutObservers() {
+    var t, e;
+    (t = this.resizeObserver) == null || t.disconnect(), (e = this.mutationObserver) == null || e.disconnect(), this.resizeObserver = void 0, this.mutationObserver = void 0;
+  }
+  syncHighlightTracking() {
+    this.hasHighlightBehavior() ? this.observeLayout() : this.disconnectLayoutObservers();
+  }
+  scheduleHighlightUpdate() {
+    this.animationFrame && cancelAnimationFrame(this.animationFrame), this.animationFrame = requestAnimationFrame(() => {
+      this.animationFrame = void 0, this.updateHighlight();
+    });
+  }
+  updateHighlight() {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".row-highlight");
+    if (!t) return;
+    const e = this.getHighlightRow();
+    if (!e) {
+      t.removeAttribute("data-visible"), t.removeAttribute("data-last-row");
+      return;
+    }
+    const i = this.getBodyRows(), r = this.getBoundingClientRect(), s = e.getBoundingClientRect(), a = s.top - r.top, h = t.hasAttribute("data-visible");
+    h || t.setAttribute("data-positioning", ""), t.style.transform = `translate3d(0, ${a}px, 0)`, t.style.height = `${s.height}px`, t.toggleAttribute("data-last-row", i.at(-1) === e), t.setAttribute("data-visible", ""), h || requestAnimationFrame(() => {
+      t.removeAttribute("data-positioning");
+    });
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-    <style>
-      :host {
-        display: block;
-        box-sizing: border-box;
-        text-indent: initial;
-        width: 100%;
-        margin: var(--space-000);
-      }
-    </style>
-    <slot></slot>
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          text-indent: initial;
+          width: 100%;
+          margin: var(--space-000);
+          position: relative;
+        }
+        :host([card-slot]) {
+          --table-row-highlight-background: var(--surface-elevated-200);
+        }
+        :host([card-slot]) .row-highlight[data-last-row] {
+          border-bottom-left-radius: var(--card-radius);
+          border-bottom-right-radius: var(--card-radius);
+        }
+        .row-highlight {
+          position: absolute;
+          inset-block-start: 0;
+          inset-inline: 0;
+          height: 0;
+          border-radius: var(--table-row-highlight-radius, var(--radius-000));
+          background: var(--table-row-highlight-background, var(--surface-elevated-100));
+          box-shadow: var(--table-row-highlight-shadow, none);
+          opacity: 0;
+          pointer-events: none;
+          transform: translate3d(0, 0, 0);
+          transition:
+            transform var(--table-row-highlight-speed, var(--speed-200)) var(--table-row-highlight-easing, ease),
+            height var(--table-row-highlight-speed, var(--speed-200)) var(--table-row-highlight-easing, ease),
+            opacity var(--speed-100) ease;
+          z-index: 0;
+        }
+        .row-highlight[data-visible] {
+          opacity: 1;
+        }
+        .row-highlight[data-positioning] {
+          transition: opacity var(--speed-100) ease;
+        }
+        slot {
+          position: relative;
+          z-index: 1;
+        }
+        ::slotted(mui-row-group) {
+          position: relative;
+          z-index: 1;
+        }
+      </style>
+      <div class="row-highlight" aria-hidden="true"></div>
+      <slot></slot>
     `);
   }
 }
-customElements.get("mui-table") || customElements.define("mui-table", t);
+customElements.get("mui-table") || customElements.define("mui-table", n);

package/dist/esm/components/mui-tabs/controller/index.js

@@ -1,9 +1,9 @@
-class s extends HTMLElement {
+class a extends HTMLElement {
   constructor() {
-    super(), this.handleTabChange = this.handleTabChange.bind(this);
+    super(), this.handleTabChange = this.handleTabChange.bind(this), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.addEventListener("tab-change", this.handleTabChange), requestAnimationFrame(() => this.initializePanels());
+    this.render(), this.addEventListener("tab-change", this.handleTabChange), requestAnimationFrame(() => this.initializePanels());
   }
   disconnectedCallback() {
     this.removeEventListener("tab-change", this.handleTabChange);
@@ -22,9 +22,20 @@ class s extends HTMLElement {
     if (!e.length) return;
     let n = e.find((t) => t.getAttribute("item") === i) || null;
     n || (n = e[0]), e.forEach((t) => {
-      const a = t === n;
-      t.toggleAttribute("hidden", !a), t.setAttribute("aria-hidden", String(!a)), t.style.display = a ? "" : "none";
+      const s = t === n;
+      t.toggleAttribute("hidden", !s), t.setAttribute("aria-hidden", String(!s)), t.style.display = s ? "" : "none";
     });
   }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
 }
-customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", s);
+customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", a);

package/dist/esm/components/mui-tabs/item/index.js

@@ -5,7 +5,7 @@ class i extends HTMLElement {
   }
   getBadgeSizeFromTabSize() {
     const t = this.getAttribute("size") || "medium";
-    return t === "x-small" ? "x-small" : t === "small" ? "small" : t === "large" ? "large" : "medium";
+    return t === "x-small" ? "xx-small" : t === "small" ? "x-small" : t === "large" ? "large" : "medium";
   }
   hasAssignedContent(t) {
     return t ? t.assignedNodes({ flatten: !0 }).some(
@@ -55,7 +55,7 @@ class i extends HTMLElement {
         background: transparent;
         white-space: nowrap;
         cursor: pointer;
-        min-height: var(--action-icon-only-size);
+        min-height: var(--tab-item-size-medium, var(--action-size-medium));
         box-sizing: border-box;
         border-radius: calc(var(--tab-radius) - 0.2rem);
       }
@@ -140,12 +140,24 @@ class i extends HTMLElement {
         margin-left: var(--tab-badge-offset-large);
       }
 
+      :host ::slotted(mui-badge[variant="neutral"]:not([color])[slot="before"]),
+      :host ::slotted(mui-badge[variant="neutral"]:not([color])[slot="after"]) {
+        --badge-background: var(--tab-text-color);
+        --badge-text-color: var(--tab-background);
+      }
+
+      :host([active]) ::slotted(mui-badge[variant="neutral"]:not([color])[slot="before"]),
+      :host([active]) ::slotted(mui-badge[variant="neutral"]:not([color])[slot="after"]) {
+        --badge-background: var(--tab-text-color-active);
+        --badge-text-color: var(--tab-background-active);
+      }
+
       :host([size="x-small"]) {
         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);
-        min-height: var(--action-icon-only-size-x-small);
+        min-height: var(--tab-item-size-x-small, var(--action-size-x-small));
       }
 
       :host([size="x-small"][has-after]) {
@@ -169,7 +181,7 @@ class i extends HTMLElement {
         font-size: var(--text-font-size-s);
         line-height: var(--text-line-height-s);
         padding: var(--action-padding-small);
-        min-height: var(--action-icon-only-size-small);
+        min-height: var(--tab-item-size-small, var(--action-size-small));
       }
 
       :host([size="small"][has-after]) {
@@ -193,7 +205,7 @@ class i extends HTMLElement {
         font-size: var(--text-font-size-l);
         line-height: var(--text-line-height-l);
         padding: var(--action-padding-large);
-        min-height: var(--action-icon-only-size-large);
+        min-height: var(--tab-item-size-large, var(--action-size-large));
       }
 
       :host([size="large"][has-after]) {

package/dist/esm/components/mui-tabs/tab-bar/index.js

@@ -1,51 +1,51 @@
-class l extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
     super(), this._animationSpeed = 200, this.attachShadow({ mode: "open" }), this._handleResize = this._handleResize.bind(this), this._hasInitialized = !1, this._resizeTimeout = null, this._observedTab = null, this._activeTab = null, this._resizeObserver = new ResizeObserver(() => {
       this._activeTab && this._updateHighlight(this._activeTab);
     });
   }
   static get observedAttributes() {
-    return ["size", "variant"];
+    return ["size", "variant", "stroke", "radius"];
   }
-  attributeChangedCallback(e, s, a) {
-    (e === "size" || e === "variant") && s !== a && (this._applySizeToChildren(), this._applyVariantToChildren(), this._activeTab && this._updateHighlight(this._activeTab));
+  attributeChangedCallback(e, i, s) {
+    (e === "size" || e === "variant" || e === "stroke") && i !== s && (this._applySizeToChildren(), this._applyVariantToChildren(), this._activeTab && this._updateHighlight(this._activeTab)), e === "radius" && i !== s && this._syncRadiusAttribute();
   }
   connectedCallback() {
-    this.hasAttribute("size") || this.setAttribute("size", "medium");
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this._syncRadiusAttribute();
     const e = this.getAttribute("speed") || "200";
     this._animationSpeed = parseInt(e, 10);
-    const s = Array.from(this.children);
-    this._applySizeToChildren(s), this._applyVariantToChildren(s), this.setAttribute("role", "tablist");
-    const a = this.getAttribute("orientation") || "horizontal";
-    this.setAttribute("aria-orientation", a), this.addEventListener("keydown", (t) => {
-      const i = Array.from(this.children), r = i.findIndex((d) => d.hasAttribute("active")), n = this.getAttribute("aria-orientation") || "horizontal";
+    const i = Array.from(this.children);
+    this._applySizeToChildren(i), this._applyVariantToChildren(i), this.setAttribute("role", "tablist");
+    const s = this.getAttribute("orientation") || "horizontal";
+    this.setAttribute("aria-orientation", s), this.addEventListener("keydown", (t) => {
+      const a = Array.from(this.children), r = a.findIndex((l) => l.hasAttribute("active")), n = this.getAttribute("aria-orientation") || "horizontal";
       let o = r;
       switch (t.key) {
         case "ArrowRight":
-          n === "horizontal" && (o = (r + 1) % i.length, t.preventDefault());
+          n === "horizontal" && (o = (r + 1) % a.length, t.preventDefault());
           break;
         case "ArrowLeft":
-          n === "horizontal" && (o = (r - 1 + i.length) % i.length, t.preventDefault());
+          n === "horizontal" && (o = (r - 1 + a.length) % a.length, t.preventDefault());
           break;
         case "ArrowDown":
-          n === "vertical" && (o = (r + 1) % i.length, t.preventDefault());
+          n === "vertical" && (o = (r + 1) % a.length, t.preventDefault());
           break;
         case "ArrowUp":
-          n === "vertical" && (o = (r - 1 + i.length) % i.length, t.preventDefault());
+          n === "vertical" && (o = (r - 1 + a.length) % a.length, t.preventDefault());
           break;
         case "Home":
           o = 0, t.preventDefault();
           break;
         case "End":
-          o = i.length - 1, t.preventDefault();
+          o = a.length - 1, t.preventDefault();
           break;
         default:
           return;
       }
-      const h = i[o];
+      const h = a[o];
       h && (this.setActiveTab(h), h.focus());
-    }), s.forEach((t, i) => {
-      t.classList.remove("first", "middle", "last", "only"), s.length === 1 ? t.classList.add("only") : i === 0 ? t.classList.add("first") : i === s.length - 1 ? t.classList.add("last") : t.classList.add("middle");
+    }), i.forEach((t, a) => {
+      t.classList.remove("first", "middle", "last", "only"), i.length === 1 ? t.classList.add("only") : a === 0 ? t.classList.add("first") : a === i.length - 1 ? t.classList.add("last") : t.classList.add("middle");
     }), this.addEventListener("click", (t) => {
       const r = (typeof t.composedPath == "function" ? t.composedPath() : []).find(
         (h) => h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-tab-item"
@@ -56,24 +56,48 @@ class l extends HTMLElement {
       <style>
         :host {
           --tab-animation-speed: ${this._animationSpeed}ms;
+          --tab-stroke-size: var(--stroke-size-100);
+          --tab-item-size-x-small: calc(var(--action-size-x-small) - (var(--tab-stroke-size) * 2));
+          --tab-item-size-small: calc(var(--action-size-small) - (var(--tab-stroke-size) * 2));
+          --tab-item-size-medium: calc(var(--action-size-medium) - (var(--tab-stroke-size) * 2));
+          --tab-item-size-large: calc(var(--action-size-large) - (var(--tab-stroke-size) * 2));
+          --tab-active-shadow: var(--tab-shadow-active);
+          --tab-active-inset-width: var(--stroke-size-300);
           position: relative;
           display: inline-flex;
-          border-width: var(--stroke-size-100);
+          border-width: var(--tab-stroke-size);
           border-style: var(--stroke-solid);
           border-color: var(--tab-border-color);
           border-radius: var(--tab-radius);
           background: var(--tab-background);
-          will-change: transform;
           box-sizing: border-box;
           overflow: hidden;
         }
 
+        :host([active-inset]) {
+          --tab-active-shadow: none;
+        }
+
+        :host([stroke="none"]) {
+          --tab-stroke-size: 0px;
+          --tab-item-size-x-small: var(--action-size-x-small);
+          --tab-item-size-small: var(--action-size-small);
+          --tab-item-size-medium: var(--action-size-medium);
+          --tab-item-size-large: var(--action-size-large);
+          border: none;
+        }
+
         :host([full-width]) {
           display: flex;
           width: 100%;
         }
 
         :host([variant="dots"]) {
+          --tab-stroke-size: 0px;
+          --tab-item-size-x-small: var(--action-size-x-small);
+          --tab-item-size-small: var(--action-size-small);
+          --tab-item-size-medium: var(--action-size-medium);
+          --tab-item-size-large: var(--action-size-large);
           border: none;
           border-radius: var(--radius-000);
           background: transparent;
@@ -83,6 +107,11 @@ class l extends HTMLElement {
         }
 
         :host([variant="ghost"]) {
+          --tab-stroke-size: 0px;
+          --tab-item-size-x-small: var(--action-size-x-small);
+          --tab-item-size-small: var(--action-size-small);
+          --tab-item-size-medium: var(--action-size-medium);
+          --tab-item-size-large: var(--action-size-large);
           border: none;
           background: transparent;
           box-shadow: var(--tabs-ghost-box-shadow);
@@ -106,12 +135,29 @@ class l extends HTMLElement {
           z-index: 0;
           padding: var(--space-200) var(--space-400);
           box-sizing: border-box;
-          box-shadow: var(--tab-shadow-active);
-          will-change: transform, width;
-          transform: translateX(0) translateZ(0);
+          box-shadow: var(--tab-active-shadow);
+          transform: translateX(0);
           width: 0;
         }
 
+        .highlight::after {
+          content: none;
+        }
+
+        :host([active-inset]) .highlight {
+          background: var(--tab-background);
+          box-shadow: none;
+        }
+
+        :host([active-inset]) .highlight::after {
+          content: "";
+          position: absolute;
+          inset: var(--tab-active-inset-width);
+          border-radius: calc(var(--tab-radius) - var(--tab-active-inset-width));
+          background: var(--tab-background-active);
+          box-shadow: var(--tab-active-shadow);
+        }
+
         :host([variant="dots"]) .highlight {
           display: none;
         }
@@ -120,8 +166,6 @@ class l extends HTMLElement {
           position: relative;
           z-index: 1;
           flex: 1;
-          contain: content; /* Performance optimization */
-          transform: translateZ(0);
         }
 
         :host([variant="dots"]) ::slotted(mui-tab-item) {
@@ -133,31 +177,41 @@ class l extends HTMLElement {
     `, window.addEventListener("resize", this._handleResize), this._resizeObserver.observe(this), requestAnimationFrame(() => {
       const t = this.shadowRoot.querySelector(".highlight");
       t.style.transition = "none";
-      const i = s.find((r) => r.hasAttribute("active")) || s[0];
-      i && (this._activeTab = i, i.setAttribute("active", ""), this._updateHighlight(i), this._observedTab = i, this._resizeObserver.observe(i)), t.offsetWidth, requestAnimationFrame(() => {
+      const a = i.find((r) => r.hasAttribute("active")) || i[0];
+      a && (this._activeTab = a, a.setAttribute("active", ""), this._updateHighlight(a), this._observedTab = a, this._resizeObserver.observe(a)), t.offsetWidth, requestAnimationFrame(() => {
         t.style.transition = "", this._hasInitialized = !0;
       });
     }));
   }
   _applySizeToChildren(e) {
-    const s = this.getAttribute("size") || "medium";
+    const i = this.getAttribute("size") || "medium";
     (e || Array.from(this.children)).forEach((t) => {
-      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("size", s);
+      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("size", i);
     });
   }
   _applyVariantToChildren(e) {
-    const s = this.getAttribute("variant") || "default";
+    const i = this.getAttribute("variant") || "default";
     (e || Array.from(this.children)).forEach((t) => {
-      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("variant", s);
+      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("variant", i);
     });
   }
+  _syncRadiusAttribute() {
+    var t;
+    const e = (t = this.getAttribute("radius")) == null ? void 0 : t.trim();
+    if (!e) {
+      this.style.removeProperty("--tab-radius");
+      return;
+    }
+    const i = e.startsWith("radius-") ? e.replace("radius-", "") : e, s = /^(000|100|150|200|300|400|500|600)$/.test(i);
+    this.style.setProperty("--tab-radius", s ? `var(--radius-${i})` : e);
+  }
   disconnectedCallback() {
     window.removeEventListener("resize", this._handleResize), this._observedTab && this._resizeObserver.unobserve(this._observedTab), this._resizeObserver.unobserve(this), this._resizeTimeout && clearTimeout(this._resizeTimeout), this._resizeObserver.disconnect();
   }
   _handleResize() {
     if (!this._activeTab) return;
-    this._resizeTimeout && clearTimeout(this._resizeTimeout), this._activeTab && Array.from(this.children).forEach((s) => {
-      s === this._activeTab ? s.setAttribute("active", "") : s.removeAttribute("active");
+    this._resizeTimeout && clearTimeout(this._resizeTimeout), this._activeTab && Array.from(this.children).forEach((i) => {
+      i === this._activeTab ? i.setAttribute("active", "") : i.removeAttribute("active");
     });
     const e = this.shadowRoot.querySelector(".highlight");
     e && (e.style.transition = "none", this._updateHighlight(this._activeTab), e.offsetWidth, this._resizeTimeout = window.setTimeout(() => {
@@ -166,15 +220,15 @@ class l extends HTMLElement {
   }
   _updateHighlight(e) {
     if (this.getAttribute("variant") === "dots") return;
-    const s = this.shadowRoot.querySelector(".highlight"), a = e.getBoundingClientRect(), t = this.getBoundingClientRect(), i = parseFloat(getComputedStyle(this).borderWidth) || 0, r = a.left - t.left - i;
-    s.style.transform = `translateX(${r}px) translateZ(0)`, s.style.width = `${a.width}px`;
+    const i = this.shadowRoot.querySelector(".highlight"), s = e.getBoundingClientRect(), t = this.getBoundingClientRect(), a = parseFloat(getComputedStyle(this).borderWidth) || 0, r = s.left - t.left - a;
+    i.style.transform = `translateX(${r}px)`, i.style.width = `${s.width}px`;
   }
   setActiveTab(e) {
-    if (Array.from(this.children).forEach((a) => a.removeAttribute("active")), e.setAttribute("active", ""), this._activeTab = e, this._observedTab && this._observedTab !== e && this._resizeObserver.unobserve(this._observedTab), this._observedTab = e, this._resizeObserver.observe(e), this._hasInitialized)
+    if (Array.from(this.children).forEach((s) => s.removeAttribute("active")), e.setAttribute("active", ""), this._activeTab = e, this._observedTab && this._observedTab !== e && this._resizeObserver.unobserve(this._observedTab), this._observedTab = e, this._resizeObserver.observe(e), this._hasInitialized)
       this._updateHighlight(e);
     else {
-      const a = this.shadowRoot.querySelector(".highlight");
-      a.style.transition = "none", this._updateHighlight(e), a.offsetWidth, a.style.transition = "", this._hasInitialized = !0;
+      const s = this.shadowRoot.querySelector(".highlight");
+      s.style.transition = "none", this._updateHighlight(e), s.offsetWidth, s.style.transition = "", this._hasInitialized = !0;
     }
     this.dispatchEvent(
       new CustomEvent("tab-change", {
@@ -185,4 +239,4 @@ class l extends HTMLElement {
     );
   }
 }
-customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", l);
+customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", d);