@muibook/components 11.0.1 → 13.0.0

package/dist/esm/components/mui-slide-frame/index.js

@@ -0,0 +1,410 @@
+import "../mui-heading/index.js";
+import "../mui-body/index.js";
+import "../mui-stack/vstack/index.js";
+import "../mui-stack/hstack/index.js";
+import "../mui-button/index.js";
+import "../mui-icons/warning/index.js";
+import "../mui-dialog/index.js";
+class x extends HTMLElement {
+  constructor() {
+    super(), this.defaultSlot = null, this.headerSlot = null, this.headerAfterSlot = null, this.headerDescriptionSlot = null, this.footerSlot = null, this.footerAfterSlot = null, this.footerDescriptionSlot = null, this.notesSlot = null, this.imageSlot = null, this.surfaceEl = null, this.pointerStartX = null, this.pointerStartY = null, this.onSlotChange = () => this.syncSections(), this.onChromeSlotChange = () => this.syncChromeState(), this.onSurfaceClick = (e) => this.handleSurfaceClick(e), this.onPointerDown = (e) => this.handlePointerDown(e), this.onPointerUp = (e) => this.handlePointerUp(e), this.onKeyDown = (e) => this.handleArrowNavigation(e), this.onDocumentKeyDown = (e) => {
+      this.shouldHandleGlobalKeys(e) && (this.isEditableTarget(e.target) || this.handleArrowNavigation(e));
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "ratio",
+      "ratio-width",
+      "ratio-height",
+      "present",
+      "active-section",
+      "padding",
+      "notes-open",
+      "variant",
+      "radius",
+      "title",
+      "footer-text",
+      "hide-counter",
+      "preview",
+      "lightbox",
+      "scroll"
+    ];
+  }
+  connectedCallback() {
+    this.hasAttribute("ratio") || this.setAttribute("ratio", "16:9"), this.hasAttribute("padding") || this.setAttribute("padding", "medium"), this.hasAttribute("active-section") || this.setAttribute("active-section", "0"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("radius") || this.setAttribute("radius", "default"), this.render(), this.syncSections(), this.syncChromeState(), this.addEventListener("keydown", this.onKeyDown), document.addEventListener("keydown", this.onDocumentKeyDown);
+  }
+  disconnectedCallback() {
+    var e, t, i, o, s, r, a, l, h, d, n, c;
+    (e = this.defaultSlot) == null || e.removeEventListener("slotchange", this.onSlotChange), (t = this.headerSlot) == null || t.removeEventListener("slotchange", this.onChromeSlotChange), (i = this.headerAfterSlot) == null || i.removeEventListener("slotchange", this.onChromeSlotChange), (o = this.headerDescriptionSlot) == null || o.removeEventListener("slotchange", this.onChromeSlotChange), (s = this.footerSlot) == null || s.removeEventListener("slotchange", this.onChromeSlotChange), (r = this.footerAfterSlot) == null || r.removeEventListener("slotchange", this.onChromeSlotChange), (a = this.footerDescriptionSlot) == null || a.removeEventListener("slotchange", this.onChromeSlotChange), (l = this.notesSlot) == null || l.removeEventListener("slotchange", this.onChromeSlotChange), (h = this.imageSlot) == null || h.removeEventListener("slotchange", this.onChromeSlotChange), (d = this.surfaceEl) == null || d.removeEventListener("click", this.onSurfaceClick), (n = this.surfaceEl) == null || n.removeEventListener("pointerdown", this.onPointerDown), (c = this.surfaceEl) == null || c.removeEventListener("pointerup", this.onPointerUp), this.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keydown", this.onDocumentKeyDown);
+  }
+  attributeChangedCallback(e, t, i) {
+    t !== i && (this.render(), this.syncSections(), this.syncChromeState());
+  }
+  getSections() {
+    var t;
+    return (((t = this.defaultSlot) == null ? void 0 : t.assignedElements({ flatten: !0 })) || []).filter((i) => !["header", "footer"].includes(i.getAttribute("slot") || ""));
+  }
+  getActiveSectionIndex() {
+    const e = this.getSections(), t = parseInt(this.getAttribute("active-section") || "0", 10);
+    return !Number.isFinite(t) || e.length === 0 ? 0 : Math.max(0, Math.min(t, e.length - 1));
+  }
+  setActiveSectionIndex(e) {
+    this.setAttribute("active-section", String(e));
+  }
+  nextSection() {
+    const e = this.getSections();
+    if (e.length === 0) return;
+    const t = Math.min(this.getActiveSectionIndex() + 1, e.length - 1);
+    this.setActiveSectionIndex(t), this.dispatchEvent(
+      new CustomEvent("section-change", {
+        detail: { index: t, total: e.length },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  prevSection() {
+    const e = this.getSections();
+    if (e.length === 0) return;
+    const t = Math.max(this.getActiveSectionIndex() - 1, 0);
+    this.setActiveSectionIndex(t), this.dispatchEvent(
+      new CustomEvent("section-change", {
+        detail: { index: t, total: e.length },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  addSection(e) {
+    const t = document.createElement("div");
+    t.setAttribute("data-slide-section", ""), typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && t.appendChild(e), this.appendChild(t);
+    const i = this.getSections(), o = Math.max(0, i.length - 1);
+    this.setActiveSectionIndex(o), this.syncSections(), this.dispatchEvent(
+      new CustomEvent("section-add", {
+        detail: { index: o, total: i.length },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  toggleNotes(e) {
+    const t = typeof e == "boolean" ? e : !this.hasAttribute("notes-open");
+    this.toggleAttribute("notes-open", t), this.dispatchEvent(
+      new CustomEvent("notes-toggle", {
+        detail: { open: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  resolveRatio() {
+    const e = (this.getAttribute("ratio") || "16:9").trim();
+    if (e === "custom") {
+      const i = parseFloat(this.getAttribute("ratio-width") || "16"), o = parseFloat(this.getAttribute("ratio-height") || "9");
+      return i > 0 && o > 0 ? `${i} / ${o}` : "16 / 9";
+    }
+    const t = e.split(":");
+    if (t.length === 2) {
+      const i = parseFloat(t[0]), o = parseFloat(t[1]);
+      if (i > 0 && o > 0) return `${i} / ${o}`;
+    }
+    return "16 / 9";
+  }
+  syncSections() {
+    if (!this.shadowRoot) return;
+    const e = this.getSections(), t = this.getActiveSectionIndex(), i = this.hasAttribute("present") || e.length > 1;
+    e.forEach((o, s) => {
+      o.setAttribute("data-slide-section", ""), s === t ? (o.removeAttribute("slide-hidden"), o.setAttribute("slide-active", "")) : (o.removeAttribute("slide-active"), i ? o.setAttribute("slide-hidden", "") : o.removeAttribute("slide-hidden"));
+    }), this.style.setProperty("--slide-frame-ratio", this.resolveRatio());
+  }
+  handleArrowNavigation(e) {
+    if (!(this.getSections().length < 2) && !e.defaultPrevented) {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault(), this.nextSection();
+        return;
+      }
+      (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), this.prevSection());
+    }
+  }
+  isEditableTarget(e) {
+    return e instanceof HTMLElement ? !!(e.closest("input, textarea, select") || e.isContentEditable) : !1;
+  }
+  shouldHandleGlobalKeys(e) {
+    const t = e.target instanceof Node ? e.target : null;
+    if (t && this.contains(t) || this.matches(":hover")) return !0;
+    const i = document.activeElement;
+    return !!(i && this.contains(i));
+  }
+  render() {
+    var s, r, a, l, h, d, n, c, g, u, m, f, v, p, b, S, w, y;
+    if (!this.shadowRoot) return;
+    const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), i = this.escapeHtml(e), o = this.escapeHtml(t);
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          --slide-frame-ratio: 16 / 9;
+          --slide-frame-padding-active: var(--slide-frame-padding-medium);
+          --slide-frame-leading-offset: var(--space-025);
+          --slide-frame-border-active: var(--border-thin);
+          --slide-frame-border-color-active: var(--slide-frame-border-color);
+          --slide-frame-background-active: var(--slide-frame-background);
+          --slide-frame-shadow-active: var(--slide-frame-shadow);
+          --slide-frame-radius-active: var(--slide-frame-radius);
+        }
+        :host([variant="plain"]) {
+          --slide-frame-border-active: none;
+          --slide-frame-border-color-active: transparent;
+          --slide-frame-background-active: transparent;
+          --slide-frame-shadow-active: none;
+        }
+        :host([variant="ghost"]) {
+          --slide-frame-border-active: none;
+          --slide-frame-border-color-active: transparent;
+          --slide-frame-background-active: var(--slide-frame-background-ghost);
+          --slide-frame-shadow-active: none;
+        }
+        :host([radius="none"]) { --slide-frame-radius-active: 0; }
+        :host([radius="small"]) { --slide-frame-radius-active: var(--slide-frame-radius-small); }
+        :host([radius="medium"]) { --slide-frame-radius-active: var(--slide-frame-radius-medium); }
+        :host([radius="large"]) { --slide-frame-radius-active: var(--slide-frame-radius-large); }
+
+        .frame {
+          display: grid;
+          width: 100%;
+          gap: 0;
+          padding: var(--space-400);
+          background: var(--surface-recessed-200);
+          box-sizing: border-box;
+        }
+        :host([has-chrome]) .frame {
+          gap: var(--slide-frame-gap, var(--space-300));
+        }
+
+        .surface {
+          position: relative;
+          width: 100%;
+          aspect-ratio: var(--slide-frame-ratio);
+          border: var(--slide-frame-border-active);
+          border-color: var(--slide-frame-border-color-active);
+          border-radius: var(--slide-frame-radius-active);
+          background: var(--slide-frame-background-active);
+          box-shadow: var(--slide-frame-shadow-active);
+          box-sizing: border-box;
+          padding: var(--slide-frame-padding-active);
+          overflow: hidden;
+          display: block;
+        }
+        :host([scroll]) .surface {
+          overflow: auto;
+        }
+        :host([preview]) .surface {
+          border-color: var(--slide-frame-preview-border-color, var(--text-color-warning));
+          box-shadow:
+            var(--slide-frame-shadow-active),
+            0 0 0 var(--stroke-size-100) color-mix(in srgb, var(--slide-frame-preview-border-color, var(--text-color-warning)) 45%, transparent);
+        }
+        .header,
+        .footer {
+          display: block;
+        }
+        .leading {
+          margin-inline: var(--slide-frame-leading-offset);
+        }
+
+        .leading_top {
+          margin-block-start: var(--space-050);
+          margin-block-end: var(--space-100);
+        }
+
+        .header-main,
+        .footer-main {
+          min-width: 0;
+          width: 100%;
+        }
+        .header-leading,
+        .footer-leading {
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          gap: var(--space-200);
+          min-width: 0;
+          flex: 1 1 auto;
+        }
+        
+        .header-title,
+        .footer-copy {
+          min-width: 0;
+        }
+        .header-description {
+          min-width: 0;
+        }
+        .header-after,
+        .footer-after {
+          justify-content: flex-end;
+          min-width: 0;
+        }
+        .footer-counter {
+          white-space: nowrap;
+        }
+        .notes {
+          display: none;
+        }
+        :host([notes-open]) .notes {
+          display: block;
+          padding: var(--space-400);
+          background: var(--surface-elevated-100);
+          border-radius: var(--radius-200);
+
+        }
+        :host([present]) .surface {
+          background: var(--slide-frame-background-present, var(--slide-frame-background-active));
+        }
+        .lightbox-image {
+          display: block;
+          width: 100%;
+          max-height: 75vh;
+          height: auto;
+          object-fit: contain;
+        }
+
+        .present-controls {
+          display: grid;
+          padding-bottom: var(--space-100);
+          border-bottom: var(--border-thin);
+        }
+        :host([present]) .present-controls {
+          display: none;
+        }
+        :host(:not([present])) #slideFrameTogglePresentBtn {
+          /* optional: style to indicate inactive state */
+        }
+
+        ::slotted([data-slide-section][slide-hidden]) {
+          display: none !important;
+        }
+      </style>
+      <div class="frame">
+        <mui-grid col="1fr auto" class="present-controls" aligny="center">
+          <mui-h-stack space="var(--space-050)" aligny="center">
+            <mui-button id="slideFrameAddSectionBtn" variant="tertiary" size="x-small">Add Section</mui-button>
+            <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
+            <mui-button id="slideFrameTogglePresentBtn" variant="tertiary" size="x-small">Present Mode</mui-button>
+            <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
+            <mui-button id="slideFrameToggleNotesBtn" variant="tertiary" size="x-small">Notes</mui-button>
+          </mui-h-stack>
+          <mui-h-stack space="var(--space-050)" aligny="center">
+            <mui-button id="slideFramePrevSectionBtn" variant="tertiary" size="x-small"><mui-icon-left-chevron slot="before"></mui-icon-left-chevron>Previous</mui-button>
+            <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
+            <mui-button id="slideFrameNextSectionBtn" variant="tertiary" size="x-small">Next<mui-icon-right-chevron slot="after"></mui-icon-right-chevron></mui-button>
+          </mui-h-stack>
+        </mui-grid>
+        <div class="header" id="headerRegion">
+          <mui-v-stack class="leading leading_top" space="var(--space-100)" alignx="stretch" aligny="center"> 
+            <mui-h-stack class="header-main" alignx="space-between" aligny="center" space="var(--space-300)">
+              <div class="header-leading">
+                <mui-heading class="header-title" size="4" level="4" id="headerTitle"${i ? "" : " hidden"}>${i}</mui-heading>
+                <slot name="header"></slot>
+              </div>
+              <mui-h-stack class="header-after" alignx="end" aligny="center" space="var(--space-200)">
+                <slot name="header-after"></slot>
+              </mui-h-stack>
+            </mui-h-stack>
+            <mui-h-stack class="header-description" alignx="start" aligny="start" space="var(--space-200)">
+              <slot name="header-description"></slot>
+            </mui-h-stack>
+          </mui-v-stack>
+        </div>
+        <div class="surface" tabindex="0" role="region" aria-label="Slide frame">
+          <slot name="image"></slot>
+          <slot></slot>
+        </div>
+        <div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
+        <div class="footer" id="footerRegion">
+          <mui-v-stack class="leading leading_bottom" space="var(--space-400)">
+            <mui-h-stack class="footer-main" alignx="space-between" aligny="center" space="var(--space-300)">
+              <div class="footer-leading">
+                <mui-body class="footer-copy" size="small" id="footerText"${o ? "" : " hidden"}>${o}</mui-body>
+                <slot name="footer"></slot>
+              </div>
+              <mui-h-stack class="footer-after" alignx="end" aligny="center" space="var(--space-200)">
+                <mui-body class="footer-counter" id="footerCounter" size="x-small" variant="optional" hidden>Section 1/1</mui-body>
+                <slot name="footer-after"></slot>
+              </mui-h-stack>
+            </mui-h-stack>
+          </mui-v-stack>
+        </div>
+      </div>
+      <mui-dialog id="lightboxDialog" width="min(94vw, 1200px)" content-padding="none">
+        <mui-heading slot="title" size="5" level="3">Image Preview</mui-heading>
+        <img id="lightboxImage" class="lightbox-image" alt="Slide image preview" />
+      </mui-dialog>
+    `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (s = this.defaultSlot) == null || s.addEventListener("slotchange", this.onSlotChange), this.headerSlot = this.shadowRoot.querySelector('slot[name="header"]'), this.headerAfterSlot = this.shadowRoot.querySelector('slot[name="header-after"]'), this.headerDescriptionSlot = this.shadowRoot.querySelector('slot[name="header-description"]'), this.footerSlot = this.shadowRoot.querySelector('slot[name="footer"]'), this.footerAfterSlot = this.shadowRoot.querySelector('slot[name="footer-after"]'), this.notesSlot = this.shadowRoot.querySelector('slot[name="notes"]'), this.imageSlot = this.shadowRoot.querySelector('slot[name="image"]'), this.surfaceEl = this.shadowRoot.querySelector(".surface"), (r = this.headerSlot) == null || r.addEventListener("slotchange", this.onChromeSlotChange), (a = this.headerAfterSlot) == null || a.addEventListener("slotchange", this.onChromeSlotChange), (l = this.headerDescriptionSlot) == null || l.addEventListener("slotchange", this.onChromeSlotChange), (h = this.footerSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (d = this.footerAfterSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (n = this.footerDescriptionSlot) == null || n.addEventListener("slotchange", this.onChromeSlotChange), (c = this.notesSlot) == null || c.addEventListener("slotchange", this.onChromeSlotChange), (g = this.surfaceEl) == null || g.addEventListener("click", this.onSurfaceClick), (u = this.surfaceEl) == null || u.addEventListener("pointerdown", this.onPointerDown), (m = this.surfaceEl) == null || m.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (f = this.shadowRoot.querySelector("#lightboxDialog")) == null || f.addEventListener("mui-dialog-close", () => {
+      this.dispatchEvent(new CustomEvent("lightbox-close", { bubbles: !0, composed: !0 }));
+    }), (v = this.shadowRoot.querySelector("#notesActionBtn")) == null || v.addEventListener("click", () => {
+      this.toggleNotes();
+    }), (p = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || p.addEventListener("click", () => {
+      this.addSection(`Section ${(this.getSections().length + 1).toString()}: New`);
+    }), (b = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || b.addEventListener("click", () => {
+      this.prevSection();
+    }), (S = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || S.addEventListener("click", () => {
+      this.nextSection();
+    }), (w = this.shadowRoot.querySelector("#slideFrameTogglePresentBtn")) == null || w.addEventListener("click", () => {
+      this.toggleAttribute("present"), this.syncChromeState();
+    }), (y = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || y.addEventListener("click", () => {
+      this.toggleNotes();
+    });
+  }
+  syncChromeState() {
+    if (!this.shadowRoot) return;
+    const e = (u) => ((u == null ? void 0 : u.assignedNodes({ flatten: !0 })) || []).some(
+      (m) => m.nodeType === Node.ELEMENT_NODE || (m.textContent || "").trim().length > 0
+    ), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), o = !this.hasAttribute("hide-counter") && this.getSections().length > 0, s = t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot), r = i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || o, a = e(this.notesSlot), l = this.hasAttribute("notes-open"), h = this.shadowRoot.querySelector("#headerRegion"), d = this.shadowRoot.querySelector("#footerRegion"), n = this.shadowRoot.querySelector("#footerCounter"), c = Math.max(this.getSections().length, 1), g = this.getActiveSectionIndex() + 1;
+    n && (n.hidden = !o, n.textContent = `Section ${Math.min(g, c)}/${c}`), h && (h.hidden = !s), d && (d.hidden = !r), this.toggleAttribute("has-header", s), this.toggleAttribute("has-footer", r), this.toggleAttribute("has-notes", a), this.toggleAttribute("notes-visible", l), this.toggleAttribute("has-chrome", s || r || l);
+  }
+  handleSurfaceClick(e) {
+    if (!this.hasAttribute("lightbox") || !this.imageSlot) return;
+    const t = this.imageSlot.assignedElements({ flatten: !0 });
+    if (t.length === 0) return;
+    const i = e.composedPath();
+    if (!t.some((r) => i.includes(r))) return;
+    const s = this.resolveLightboxImage(i, t);
+    !s || !s.src || this.openLightbox(s.src, s.alt || "Slide image preview");
+  }
+  handlePointerDown(e) {
+    this.pointerStartX = e.clientX, this.pointerStartY = e.clientY;
+  }
+  handlePointerUp(e) {
+    if (this.pointerStartX == null || this.pointerStartY == null || this.getSections().length < 2) return;
+    const t = e.clientX - this.pointerStartX, i = e.clientY - this.pointerStartY;
+    this.pointerStartX = null, this.pointerStartY = null, !(Math.abs(t) < 40 || Math.abs(t) <= Math.abs(i)) && (t < 0 ? this.nextSection() : this.prevSection());
+  }
+  resolveLightboxImage(e, t) {
+    var o;
+    const i = e.find((s) => s instanceof HTMLImageElement);
+    if (i instanceof HTMLImageElement) return i;
+    for (const s of t) {
+      if (s instanceof HTMLImageElement) return s;
+      const r = (o = s.querySelector) == null ? void 0 : o.call(s, "img");
+      if (r instanceof HTMLImageElement) return r;
+    }
+    return null;
+  }
+  openLightbox(e, t) {
+    var s, r, a;
+    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("#lightboxDialog"), o = (r = this.shadowRoot) == null ? void 0 : r.querySelector("#lightboxImage");
+    !i || !o || (o.src = e, o.alt = t, (a = i.open) == null || a.call(i), this.dispatchEvent(
+      new CustomEvent("lightbox-open", {
+        detail: { src: e, alt: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  escapeHtml(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+}
+customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", x);

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

@@ -1,4 +1,4 @@
-class o extends HTMLElement {
+class n extends HTMLElement {
   constructor() {
     super(), this._checked = !1, this._checkbox = null, this.attachShadow({ mode: "open" }), this._checked = !1;
   }
@@ -9,27 +9,28 @@ class o extends HTMLElement {
     this._cleanupListeners();
   }
   static get observedAttributes() {
-    return ["label", "disabled", "checked"];
+    return ["label", "disabled", "checked", "size"];
   }
-  attributeChangedCallback(i, e, t) {
-    if (i === "checked" && e !== t && (this._checked = t !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), i === "disabled" && e !== t) {
-      const s = t !== null;
-      this._checkbox && (this._checkbox.disabled = s, this._checkbox.setAttribute("aria-disabled", s.toString())), this._updateDisabledState();
+  attributeChangedCallback(s, t, e) {
+    if (s === "checked" && t !== e && (this._checked = e !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), s === "disabled" && t !== e) {
+      const i = e !== null;
+      this._checkbox && (this._checkbox.disabled = i, this._checkbox.setAttribute("aria-disabled", i.toString())), this._updateDisabledState();
     }
+    s === "size" && t !== e && this._enforceIconSize();
   }
   get checked() {
     return this._checked;
   }
-  set checked(i) {
-    const e = !!i;
-    this._checked !== e && (this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked, this._checkbox.setAttribute("aria-checked", this._checked.toString()), this._updateIcons()));
+  set checked(s) {
+    const t = !!s;
+    this._checked !== t && (this._checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked, this._checkbox.setAttribute("aria-checked", this._checked.toString()), this._updateIcons()));
   }
   _cleanupListeners() {
     this._checkbox && this._changeHandler && this._checkbox.removeEventListener("change", this._changeHandler);
   }
   _updateDisabledState() {
-    var e, t, s, c;
-    this.hasAttribute("disabled") ? ((e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (t = this._checkbox) == null || t.setAttribute("tabindex", "-1")) : ((s = this._checkbox) == null || s.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+    var t, e, i, c;
+    this.hasAttribute("disabled") ? ((t = this._checkbox) == null || t.setAttribute("aria-disabled", "true"), (e = this._checkbox) == null || e.setAttribute("tabindex", "-1")) : ((i = this._checkbox) == null || i.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
   }
   _setupListener() {
     this._checkbox && (this._cleanupListeners(), this._changeHandler = () => {
@@ -43,27 +44,32 @@ class o extends HTMLElement {
     }, this._checkbox.addEventListener("change", this._changeHandler));
   }
   _enforceIconSize() {
-    const i = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]'), t = (s) => {
-      if (!s) return;
-      const c = () => {
-        s.assignedElements().forEach((h) => {
-          h.tagName.toLowerCase().startsWith("mui-icon") && h.setAttribute("size", "x-small");
+    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), t = this.shadowRoot.querySelector('slot[name="off-icon"]'), e = this.getAttribute("size") || "large", c = {
+      "x-small": "xx-small",
+      small: "xx-small",
+      medium: "x-small",
+      large: "x-small"
+    }[e] || "x-small", a = (h) => {
+      if (!h) return;
+      const o = () => {
+        h.assignedElements().forEach((r) => {
+          r.tagName.toLowerCase().startsWith("mui-icon") && r.setAttribute("size", c);
         });
       };
-      s.addEventListener("slotchange", c), setTimeout(c, 0);
+      h.addEventListener("slotchange", o), setTimeout(o, 0);
     };
-    t(i), t(e);
+    a(s), a(t);
   }
   _updateIcons() {
-    const i = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
-    i && i.assignedElements().forEach((t) => {
-      t.style.display = this._checked ? "inline" : "none";
-    }), e && e.assignedElements().forEach((t) => {
-      t.style.display = this._checked ? "none" : "inline";
+    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), t = this.shadowRoot.querySelector('slot[name="off-icon"]');
+    s && s.assignedElements().forEach((e) => {
+      e.style.display = this._checked ? "inline" : "none";
+    }), t && t.assignedElements().forEach((e) => {
+      e.style.display = this._checked ? "none" : "inline";
     });
   }
   render() {
-    const i = this.getAttribute("label");
+    const s = this.getAttribute("label"), t = this.getAttribute("size") || "large", i = ["x-small", "small", "medium", "large"].includes(t) ? t : "large";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -72,8 +78,8 @@ class o extends HTMLElement {
         .switch {
           position: relative;
           display: inline-block;
-          width: var(--switch-width);
-          height: var(--switch-height);
+          width: var(--_switch-width, var(--switch-width));
+          height: var(--_switch-height, var(--switch-height));
         }
 
         .switch input {
@@ -95,15 +101,15 @@ class o extends HTMLElement {
           bottom: 0;
           background-color: var(--switch-track-background);
           transition: background-color var(--speed-200);
-          border-radius: var(--switch-height);
+          border-radius: var(--_switch-height, var(--switch-height));
         }
 
         .thumb {
           position: absolute;
-          top: var(--switch-offset);
-          left: var(--switch-offset);
-          width: var(--switch-thumb-size);
-          height: var(--switch-thumb-size);
+          top: var(--_switch-offset, var(--switch-offset));
+          left: var(--_switch-offset, var(--switch-offset));
+          width: var(--_switch-thumb-size, var(--switch-thumb-size));
+          height: var(--_switch-thumb-size, var(--switch-thumb-size));
           background-color: var(--switch-thumb-bg);
           transition: transform var(--speed-200);
           border-radius: 50%;
@@ -117,7 +123,38 @@ class o extends HTMLElement {
         }
 
         input:checked + .track .thumb {
-          transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - (var(--switch-offset) * 2)));
+          transform: translateX(
+            calc(
+              var(--_switch-width, var(--switch-width)) -
+              var(--_switch-thumb-size, var(--switch-thumb-size)) -
+              (var(--_switch-offset, var(--switch-offset)) * 2)
+            )
+          );
+        }
+
+        :host([size="x-small"]) {
+          --_switch-offset: var(--stroke-size-100);
+          --_switch-thumb-size: calc(var(--action-icon-only-size-x-small) - var(--space-200));
+          --_switch-height: calc(var(--_switch-thumb-size) + (var(--_switch-offset) * 2));
+          --_switch-width: calc(var(--_switch-height) * 1.6);
+        }
+        :host([size="small"]) {
+          --_switch-offset: var(--stroke-size-100);
+          --_switch-thumb-size: calc(var(--action-icon-only-size-small) - var(--space-200));
+          --_switch-height: calc(var(--_switch-thumb-size) + (var(--_switch-offset) * 2));
+          --_switch-width: calc(var(--_switch-height) * 1.6);
+        }
+        :host([size="medium"]) {
+          --_switch-offset: var(--stroke-size-100);
+          --_switch-thumb-size: calc(var(--switch-thumb-size) - var(--space-100));
+          --_switch-height: calc(var(--_switch-thumb-size) + (var(--_switch-offset) * 2));
+          --_switch-width: calc(var(--_switch-height) * 1.6);
+        }
+        :host([size="large"]) {
+          --_switch-offset: var(--switch-offset);
+          --_switch-thumb-size: var(--switch-thumb-size);
+          --_switch-height: var(--switch-height);
+          --_switch-width: var(--switch-width);
         }
 
         ::slotted([slot="on-icon"]),
@@ -140,7 +177,7 @@ class o extends HTMLElement {
           type="checkbox"
           role="switch"
           aria-checked="${this._checked}"
-          ${i ? `aria-label="${i}"` : ""}
+          ${s ? `aria-label="${s}"` : ""}
         >
         <span class="track">
           <span class="thumb">
@@ -149,7 +186,7 @@ class o extends HTMLElement {
           </span>
         </span>
       </label>
-    `;
+    `, this.setAttribute("size", i);
   }
 }
-customElements.get("mui-switch") || customElements.define("mui-switch", o);
+customElements.get("mui-switch") || customElements.define("mui-switch", n);

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

@@ -85,7 +85,7 @@ class l extends HTMLElement {
         :host([variant="ghost"]) {
           border: none;
           background: transparent;
-          box-shadow: none;
+          box-shadow: var(--tabs-ghost-box-shadow);
         }
 
         :host([variant="ghost"]) .highlight {