@muibook/components 10.0.1 → 11.0.0

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

@@ -1,45 +1,259 @@
-class s extends HTMLElement {
-  updateIcon(t) {
-    if (this.shadowRoot && (this.iconEl && (this.shadowRoot.removeChild(this.iconEl), this.iconEl = void 0), t && t.trim() !== "" && customElements.get(t))) {
-      const e = document.createElement(t);
-      e.setAttribute("color", this.hasAttribute("active") ? "var(--tab-icon-active)" : "var(--tab-icon)"), e.setAttribute("size", "small"), this.shadowRoot.insertBefore(e, this.shadowRoot.firstChild), this.iconEl = e;
-    }
+class i extends HTMLElement {
+  getIconSizeFromTabSize() {
+    const t = this.getAttribute("size") || "medium";
+    return t === "x-small" || t === "small" ? "x-small" : t === "large" ? "medium" : "small";
+  }
+  getBadgeSizeFromTabSize() {
+    const t = this.getAttribute("size") || "medium";
+    return t === "x-small" ? "x-small" : t === "small" ? "small" : t === "large" ? "large" : "medium";
+  }
+  hasAssignedContent(t) {
+    return t ? t.assignedNodes({ flatten: !0 }).some(
+      (a) => {
+        var e;
+        return a.nodeType === Node.ELEMENT_NODE || a.nodeType === Node.TEXT_NODE && !!((e = a.textContent) != null && e.trim());
+      }
+    ) : !1;
+  }
+  syncSlottedAffordances(t) {
+    if (!t) return;
+    t.assignedElements({ flatten: !0 }).forEach((e) => {
+      const s = e.tagName.toLowerCase();
+      s.startsWith("mui-icon-") && (e.setAttribute("size", this.getIconSizeFromTabSize()), e.setAttribute("color", this.hasAttribute("active") ? "var(--tab-icon-active)" : "var(--tab-icon)")), s === "mui-badge" && e.setAttribute("size", this.getBadgeSizeFromTabSize());
+    });
+  }
+  updateSlotState() {
+    const t = this.hasAssignedContent(this.beforeSlot), a = this.hasAssignedContent(this.afterSlot);
+    this.toggleAttribute("has-before", t), this.toggleAttribute("has-after", a), this.syncSlottedAffordances(this.beforeSlot), this.syncSlottedAffordances(this.afterSlot);
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["active", "icon"];
+    return ["active", "size", "variant"];
   }
-  attributeChangedCallback(t, e, o) {
-    t === "active" ? this.updateActiveState() : t === "icon" && this.updateIcon(o);
+  attributeChangedCallback(t) {
+    t === "active" ? this.updateActiveState() : (t === "size" || t === "variant") && this.updateSlotState();
   }
   connectedCallback() {
+    var a, e;
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("icon");
-    this.setAttribute("tabindex", this.hasAttribute("active") ? "0" : "-1"), this.shadowRoot.innerHTML = "";
-    const e = document.createElement("style");
-    if (e.textContent = /*css*/
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.setAttribute("tabindex", this.hasAttribute("active") ? "0" : "-1"), this.shadowRoot.innerHTML = "";
+    const t = document.createElement("style");
+    t.textContent = /*css*/
     `
       :host {
         user-select: none;
-        display: flex;
-        justify-content: center;
-        gap: var(--space-100);
+        display: inline-flex;
         align-items: center;
-        padding: var(--space-200) var(--space-400);
+        justify-content: center;
+        padding: var(--action-padding);
         font-size: var(--text-font-size-m);
         line-height: var(--text-line-height-m);
-        font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-semi-bold);
         color: var(--tab-text-color);
         background: transparent;
         white-space: nowrap;
         cursor: pointer;
-        min-height: 4.2rem;
+        min-height: var(--action-icon-only-size);
         box-sizing: border-box;
         border-radius: calc(var(--tab-radius) - 0.2rem);
       }
 
+      .inner {
+        display: grid;
+        width: 100%;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: stretch;
+        gap: var(--space-100);
+        grid-template-columns: auto;
+      }
+
+      :host([has-before]) .inner {
+        grid-template-columns: auto 1fr;
+      }
+
+      :host([has-after]) .inner {
+        grid-template-columns: 1fr auto;
+      }
+
+      :host([has-before][has-after]) .inner {
+        grid-template-columns: auto 1fr auto;
+      }
+
+      .label {
+        display: inline-flex;
+        justify-content: center;
+        justify-self: center;
+      }
+
+      slot[name="before"] {
+        justify-self: start;
+      }
+
+      slot[name="after"] {
+        justify-self: end;
+      }
+
+      :host([has-after]) {
+        padding-right: var(--action-after-slot-padding);
+      }
+
+      :host([has-before]) {
+        padding-left: var(--action-before-slot-padding);
+      }
+
+      :host([has-after][has-before]) {
+        padding-right: var(--action-after-slot-padding);
+        padding-left: var(--action-before-slot-padding);
+      }
+
+      ::slotted([slot="before"]),
+      ::slotted([slot="after"]) {
+        display: inline-flex;
+        align-items: center;
+        line-height: 1;
+      }
+
+      :host([has-before]) ::slotted(mui-badge[slot="before"]) {
+        margin-right: var(--tab-badge-offset);
+      }
+
+      :host([has-after]) ::slotted(mui-badge[slot="after"]) {
+        margin-left: var(--tab-badge-offset);
+      }
+
+      :host([size="x-small"][has-before]) ::slotted(mui-badge[slot="before"]) {
+        margin-right: var(--tab-badge-offset);
+      }
+
+      :host([size="x-small"][has-after]) ::slotted(mui-badge[slot="after"]) {
+        margin-left: var(--tab-badge-offset);
+      }
+
+      :host([size="large"][has-before]) ::slotted(mui-badge[slot="before"]) {
+        margin-right: var(--tab-badge-offset-large);
+      }
+
+      :host([size="large"][has-after]) ::slotted(mui-badge[slot="after"]) {
+        margin-left: var(--tab-badge-offset-large);
+      }
+
+      :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);
+      }
+
+      :host([size="x-small"][has-after]) {
+        padding-right: var(--action-after-slot-padding-x-small);
+      }
+
+      :host([size="x-small"][has-before]) {
+        padding-left: var(--action-before-slot-padding-x-small);
+      }
+
+      :host([size="x-small"][has-after][has-before]) {
+        padding-right: var(--action-after-slot-padding-x-small);
+        padding-left: var(--action-before-slot-padding-x-small);
+      }
+
+      :host([size="x-small"]) .inner {
+        gap: var(--space-050);
+      }
+
+      :host([size="small"]) {
+        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);
+      }
+
+      :host([size="small"][has-after]) {
+        padding-right: var(--action-after-slot-padding-small);
+      }
+
+      :host([size="small"][has-before]) {
+        padding-left: var(--action-before-slot-padding-small);
+      }
+
+      :host([size="small"][has-after][has-before]) {
+        padding-right: var(--action-after-slot-padding-small);
+        padding-left: var(--action-before-slot-padding-small);
+      }
+
+      :host([size="small"]) .inner {
+        gap: var(--space-100);
+      }
+
+      :host([size="large"]) {
+        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);
+      }
+
+      :host([size="large"][has-after]) {
+        padding-right: var(--action-after-slot-padding-large);
+      }
+
+      :host([size="large"][has-before]) {
+        padding-left: var(--action-before-slot-padding-large);
+      }
+
+      :host([size="large"][has-after][has-before]) {
+        padding-right: var(--action-after-slot-padding-large);
+        padding-left: var(--action-before-slot-padding-large);
+      }
+
+      :host([size="large"]) .inner {
+        gap: var(--space-200);
+      }
+
+      /* Outer-edge padding for slot affordances */
+      :host([has-before]),
+      :host([has-after][has-before]) {
+        padding-left: calc(var(--action-before-slot-padding) + var(--tab-edge-padding-extra));
+      }
+
+      :host([has-after]),
+      :host([has-after][has-before]) {
+        padding-right: calc(var(--action-after-slot-padding) + var(--tab-edge-padding-extra));
+      }
+
+      :host([size="x-small"][has-before]),
+      :host([size="x-small"][has-after][has-before]) {
+        padding-left: calc(var(--action-before-slot-padding-x-small) + var(--tab-edge-padding-extra-x-small));
+      }
+
+      :host([size="x-small"][has-after]),
+      :host([size="x-small"][has-after][has-before]) {
+        padding-right: calc(var(--action-after-slot-padding-x-small) + var(--tab-edge-padding-extra-x-small));
+      }
+
+      :host([size="small"][has-before]),
+      :host([size="small"][has-after][has-before]) {
+        padding-left: calc(var(--action-before-slot-padding-small) + var(--tab-edge-padding-extra-small));
+      }
+
+      :host([size="small"][has-after]),
+      :host([size="small"][has-after][has-before]) {
+        padding-right: calc(var(--action-after-slot-padding-small) + var(--tab-edge-padding-extra-small));
+      }
+
+      :host([size="large"][has-before]),
+      :host([size="large"][has-after][has-before]) {
+        padding-left: calc(var(--action-before-slot-padding-large) + var(--tab-edge-padding-extra-large));
+      }
+
+      :host([size="large"][has-after]),
+      :host([size="large"][has-after][has-before]) {
+        padding-right: calc(var(--action-after-slot-padding-large) + var(--tab-edge-padding-extra-large));
+      }
+
       :host([active]) {
         color: var(--tab-text-color-active);
       }
@@ -49,19 +263,61 @@ class s extends HTMLElement {
         outline-offset: -5px;
       }
 
-      ::slotted(*) {
-        margin-left: var(--space-100);
+      :host([variant="dots"]:focus-visible) {
+        outline: var(--outline-medium);
+        outline-offset: var(--stroke-size-200);
+      }
+
+      :host([variant="dots"]) {
+        width: var(--tab-dot-size);
+        height: var(--tab-dot-size);
+        min-height: var(--tab-dot-size);
+        min-width: var(--tab-dot-size);
+        border-radius: 999px;
+        padding: var(--space-000);
+        background: var(--tab-dot-color);
       }
-    `, this.shadowRoot.appendChild(e), t && t.trim() !== "" && customElements.get(t)) {
-      const i = document.createElement(t);
-      i.setAttribute("color", "var(--tab-icon)"), i.setAttribute("size", "small"), this.shadowRoot.appendChild(i), this.iconEl = i;
-    }
-    const o = document.createElement("slot");
-    this.shadowRoot.appendChild(o), this.updateActiveState();
+
+      :host([variant="dots"]) .inner {
+        width: 100%;
+        height: 100%;
+        gap: var(--space-000);
+        display: block;
+      }
+
+      :host([variant="dots"]) .label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      :host([variant="dots"]) slot[name="before"],
+      :host([variant="dots"]) slot[name="after"] {
+        display: none;
+      }
+
+      :host([variant="dots"][active]) {
+        background: var(--tab-dot-color-active);
+      }
+    `, this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${t.textContent}</style>
+      <div class="inner">
+        <slot name="before"></slot>
+        <span class="label"><slot></slot></span>
+        <slot name="after"></slot>
+      </div>
+    `, this.beforeSlot = this.shadowRoot.querySelector('slot[name="before"]'), this.afterSlot = this.shadowRoot.querySelector('slot[name="after"]'), (a = this.beforeSlot) == null || a.addEventListener("slotchange", () => this.updateSlotState()), (e = this.afterSlot) == null || e.addEventListener("slotchange", () => this.updateSlotState()), this.updateSlotState(), this.updateActiveState();
   }
   updateActiveState() {
     const t = this.hasAttribute("active");
-    this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.iconEl && this.iconEl.setAttribute("color", t ? "var(--tab-icon-active)" : "var(--tab-icon)");
+    this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.syncSlottedAffordances(this.beforeSlot), this.syncSlottedAffordances(this.afterSlot);
   }
 }
-customElements.get("mui-tab-item") || customElements.define("mui-tab-item", s);
+customElements.get("mui-tab-item") || customElements.define("mui-tab-item", i);

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

@@ -11,6 +11,9 @@ class e extends HTMLElement {
         :host {
           display: block;
         }
+        :host([hidden]) {
+          display: none !important;
+        }
         .inner {
           padding: var(--tab-panel-padding, 0);
         }

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

@@ -4,45 +4,52 @@ class l extends HTMLElement {
       this._activeTab && this._updateHighlight(this._activeTab);
     });
   }
+  static get observedAttributes() {
+    return ["size", "variant"];
+  }
+  attributeChangedCallback(e, s, a) {
+    (e === "size" || e === "variant") && s !== a && (this._applySizeToChildren(), this._applyVariantToChildren(), this._activeTab && this._updateHighlight(this._activeTab));
+  }
   connectedCallback() {
-    const i = this.getAttribute("speed") || "200";
-    this._animationSpeed = parseInt(i, 10);
+    this.hasAttribute("size") || this.setAttribute("size", "medium");
+    const e = this.getAttribute("speed") || "200";
+    this._animationSpeed = parseInt(e, 10);
     const s = Array.from(this.children);
-    this.setAttribute("role", "tablist");
+    this._applySizeToChildren(s), this._applyVariantToChildren(s), this.setAttribute("role", "tablist");
     const a = this.getAttribute("orientation") || "horizontal";
-    this.setAttribute("aria-orientation", a), this.addEventListener("keydown", (e) => {
-      const t = Array.from(this.children), r = t.findIndex((d) => d.hasAttribute("active")), n = this.getAttribute("aria-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";
       let o = r;
-      switch (e.key) {
+      switch (t.key) {
         case "ArrowRight":
-          n === "horizontal" && (o = (r + 1) % t.length, e.preventDefault());
+          n === "horizontal" && (o = (r + 1) % i.length, t.preventDefault());
           break;
         case "ArrowLeft":
-          n === "horizontal" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
+          n === "horizontal" && (o = (r - 1 + i.length) % i.length, t.preventDefault());
           break;
         case "ArrowDown":
-          n === "vertical" && (o = (r + 1) % t.length, e.preventDefault());
+          n === "vertical" && (o = (r + 1) % i.length, t.preventDefault());
           break;
         case "ArrowUp":
-          n === "vertical" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
+          n === "vertical" && (o = (r - 1 + i.length) % i.length, t.preventDefault());
           break;
         case "Home":
-          o = 0, e.preventDefault();
+          o = 0, t.preventDefault();
           break;
         case "End":
-          o = t.length - 1, e.preventDefault();
+          o = i.length - 1, t.preventDefault();
           break;
         default:
           return;
       }
-      const h = t[o];
+      const h = i[o];
       h && (this.setActiveTab(h), h.focus());
-    }), s.forEach((e, t) => {
-      e.classList.remove("first", "middle", "last", "only"), s.length === 1 ? e.classList.add("only") : t === 0 ? e.classList.add("first") : t === s.length - 1 ? e.classList.add("last") : e.classList.add("middle");
-    }), s.forEach((e) => {
-      const t = e;
-      t.addEventListener("click", () => {
-        this.setActiveTab(t);
+    }), 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");
+    }), s.forEach((t) => {
+      const i = t;
+      i.addEventListener("click", () => {
+        this.setActiveTab(i);
       });
     }), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
@@ -66,6 +73,29 @@ class l extends HTMLElement {
           width: 100%;
         }
 
+        :host([variant="dots"]) {
+          border: none;
+          border-radius: var(--radius-000);
+          background: transparent;
+          gap: var(--tab-dot-gap);
+          overflow: visible;
+          align-items: center;
+        }
+
+        :host([variant="ghost"]) {
+          border: none;
+          background: transparent;
+          box-shadow: none;
+        }
+
+        :host([variant="ghost"]) .highlight {
+          box-shadow: none;
+        }
+
+        :host([variant="dots"][full-width]) {
+          justify-content: center;
+        }
+
         .highlight {
           border-radius: calc(var(--tab-radius) - 0.2rem);
           position: absolute;
@@ -82,6 +112,10 @@ class l extends HTMLElement {
           width: 0;
         }
 
+        :host([variant="dots"]) .highlight {
+          display: none;
+        }
+
         ::slotted(mui-tab-item) {
           position: relative;
           z-index: 1;
@@ -89,18 +123,34 @@ class l extends HTMLElement {
           contain: content; /* Performance optimization */
           transform: translateZ(0);
         }
+
+        :host([variant="dots"]) ::slotted(mui-tab-item) {
+          flex: 0;
+        }
       </style>
       <div class="highlight"></div>
       <slot></slot>
     `, window.addEventListener("resize", this._handleResize), this._resizeObserver.observe(this), requestAnimationFrame(() => {
-      const e = this.shadowRoot.querySelector(".highlight");
-      e.style.transition = "none";
-      const t = s.find((r) => r.hasAttribute("active")) || s[0];
-      t && (this._activeTab = t, t.setAttribute("active", ""), this._updateHighlight(t), this._observedTab = t, this._resizeObserver.observe(t)), e.offsetWidth, requestAnimationFrame(() => {
-        e.style.transition = "", this._hasInitialized = !0;
+      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(() => {
+        t.style.transition = "", this._hasInitialized = !0;
       });
     }));
   }
+  _applySizeToChildren(e) {
+    const s = this.getAttribute("size") || "medium";
+    (e || Array.from(this.children)).forEach((t) => {
+      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("size", s);
+    });
+  }
+  _applyVariantToChildren(e) {
+    const s = this.getAttribute("variant") || "default";
+    (e || Array.from(this.children)).forEach((t) => {
+      t.tagName.toLowerCase() === "mui-tab-item" && t.setAttribute("variant", s);
+    });
+  }
   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();
   }
@@ -109,27 +159,28 @@ class l extends HTMLElement {
     this._resizeTimeout && clearTimeout(this._resizeTimeout), this._activeTab && Array.from(this.children).forEach((s) => {
       s === this._activeTab ? s.setAttribute("active", "") : s.removeAttribute("active");
     });
-    const i = this.shadowRoot.querySelector(".highlight");
-    i && (i.style.transition = "none", this._updateHighlight(this._activeTab), i.offsetWidth, this._resizeTimeout = window.setTimeout(() => {
-      i.style.transition = "", this._updateHighlight(this._activeTab);
+    const e = this.shadowRoot.querySelector(".highlight");
+    e && (e.style.transition = "none", this._updateHighlight(this._activeTab), e.offsetWidth, this._resizeTimeout = window.setTimeout(() => {
+      e.style.transition = "", this._updateHighlight(this._activeTab);
     }, 100));
   }
-  _updateHighlight(i) {
-    const s = this.shadowRoot.querySelector(".highlight"), a = i.getBoundingClientRect(), e = this.getBoundingClientRect(), t = parseFloat(getComputedStyle(this).borderWidth) || 0, r = a.left - e.left - t;
+  _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`;
   }
-  setActiveTab(i) {
-    if (Array.from(this.children).forEach((a) => a.removeAttribute("active")), i.setAttribute("active", ""), this._activeTab = i, this._observedTab && this._observedTab !== i && this._resizeObserver.unobserve(this._observedTab), this._observedTab = i, this._resizeObserver.observe(i), this._hasInitialized)
-      this._updateHighlight(i);
+  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)
+      this._updateHighlight(e);
     else {
       const a = this.shadowRoot.querySelector(".highlight");
-      a.style.transition = "none", this._updateHighlight(i), a.offsetWidth, a.style.transition = "", this._hasInitialized = !0;
+      a.style.transition = "none", this._updateHighlight(e), a.offsetWidth, a.style.transition = "", this._hasInitialized = !0;
     }
     this.dispatchEvent(
       new CustomEvent("tab-change", {
         bubbles: !0,
         composed: !0,
-        detail: { activeId: i.id }
+        detail: { activeId: e.id }
       })
     );
   }