@muibook/components 20.0.0 → 20.1.0

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

@@ -1,46 +1,245 @@
 import "../mui-icons/close/index.js";
+import "../mui-icons/left-chevron/index.js";
+import "../mui-body/index.js";
 import "../mui-button/index.js";
-class u extends HTMLElement {
+import { getPartMap as f } from "../../utils/part-map/index.js";
+const g = 240, W = 320, S = 96, m = 16, z = 64, k = 4;
+class A extends HTMLElement {
   constructor() {
-    super(), this.innerEl = null, this.overlayEl = null, this.footerEl = null, this.actionsSlot = null, this.pushLayout = null, this.outer = null, this.persistentLayout = null, this.headerEl = null, this.headerSlot = null, this._handleEscape = (t) => {
-      const e = this.getAttribute("variant") || "overlay";
-      t.key === "Escape" && (e === "overlay" || e === "push") && this.close();
-    }, this._computedSide = "left", this._handleResize = () => {
+    super(), this.innerEl = null, this.overlayEl = null, this.footerEl = null, this.actionsSlot = null, this.pushLayout = null, this.outer = null, this.persistentLayout = null, this.headerEl = null, this.headerSlot = null, this.resizeRailEl = null, this.workspaceResizeRailEls = [], this.resizeState = null, this.workspaceResizeState = null, this._handleEscape = (e) => {
+      const t = this.getAttribute("variant") || "overlay";
+      if (e.key === "Escape") {
+        if (t === "workspace") {
+          const i = this.getFocusedWorkspaceResizeSide();
+          if (i && this.hasAttribute(`${i}-open`)) {
+            e.preventDefault(), this.removeAttribute(`${i}-open`), this.syncWorkspaceState();
+            return;
+          }
+          this.usesMobileOverlay(t) && this.close();
+          return;
+        }
+        t === "push" && !this.isEventInsideDrawer(e) || (t === "overlay" || t === "push" || this.usesMobileOverlay(t)) && this.close();
+      }
+    }, this._computedSide = "left", this._handleResizeStart = (e) => {
+      var i;
+      const t = this.getAttribute("variant") || "overlay";
+      !this.hasAttribute("resize-rail") || t !== "push" && t !== "persistent" || (e.preventDefault(), this.clearResizeRailKeyboardHint(this.resizeRailEl), this.resizeState = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startWidth: this.getCurrentDrawerWidth(),
+        currentWidth: this.getCurrentDrawerWidth(),
+        closeOnRelease: !1,
+        side: this.getAttribute("side") || this._computedSide
+      }, this.syncResizeCloseOpacity(this.resizeState.startWidth), this.setAttribute("resizing", ""), (i = this.resizeRailEl) == null || i.classList.add("is-resizing"), window.addEventListener("pointermove", this._handleResizeMove), window.addEventListener("pointerup", this._handleResizeEnd));
+    }, this._handleResizeMove = (e) => {
+      var d, l;
+      if (!this.resizeState) return;
+      const t = e.clientX - this.resizeState.startX, i = this.getAttribute("variant") || "overlay", s = this.getResizeRailMinDrawerWidth(), r = this.getResizeRailMaxDrawerWidth(), a = this.resizeState.side === "left" ? this.resizeState.startWidth + t : this.resizeState.startWidth - t, o = Math.min(this.getResizeRailCloseThreshold(), s - 1), n = Math.max(s, Math.min(a, r));
+      this.resizeState.currentWidth = n, this.resizeState.closeOnRelease = i === "push" && a <= o, (d = this.resizeRailEl) == null || d.classList.toggle("threshold", this.resizeState.closeOnRelease);
+      const h = (a <= s || a >= r) && !this.resizeState.closeOnRelease;
+      (l = this.resizeRailEl) == null || l.classList.toggle("at-limit", h), this.syncResizeCloseOpacity(a), this.setAttribute("width", `${Math.round(n)}px`);
+    }, this._handleResizeEnd = (e) => {
+      var s, r, a, o;
+      const t = this.resizeState, i = ((s = this.resizeState) == null ? void 0 : s.closeOnRelease) && (this.getAttribute("variant") || "overlay") === "push";
+      this.resizeState = null, this.removeAttribute("resizing"), (r = this.resizeRailEl) == null || r.classList.remove("is-resizing", "threshold", "at-limit"), window.removeEventListener("pointermove", this._handleResizeMove), window.removeEventListener("pointerup", this._handleResizeEnd), i ? this.close() : this.syncResizeCloseOpacity(this.getCurrentDrawerWidth()), t && this.isResizeRailPointerClick(t.startX, t.startY, e) ? (a = this.resizeRailEl) == null || a.focus() : (o = this.resizeRailEl) == null || o.blur();
+    }, this._handleResizeKeydown = (e) => {
       const t = this.getAttribute("variant") || "overlay";
-      if (t === "push" || t === "persistent") {
-        const e = this.hasAttribute("open");
-        this.updateLayout(t, e);
+      if (!this.hasAttribute("resize-rail") || t !== "push" && t !== "persistent" || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
+      const i = this.getAttribute("side") || this._computedSide, s = e.key === "ArrowRight" ? 1 : -1, r = e.shiftKey ? z : m, a = this.getCurrentDrawerWidth() + (i === "left" ? s : -s) * r, o = Math.max(
+        this.getResizeRailMinDrawerWidth(),
+        Math.min(a, this.getResizeRailMaxDrawerWidth())
+      );
+      this.syncResizeRailKeyboardHint(
+        this.resizeRailEl,
+        a,
+        this.getResizeRailMinDrawerWidth(),
+        t === "push"
+      ), this.setAttribute("width", `${Math.round(o)}px`), this.syncResizeCloseOpacity(o);
+    }, this._handleWorkspaceResizeStart = (e) => {
+      const t = e.currentTarget, i = t == null ? void 0 : t.dataset.workspaceResize;
+      (this.getAttribute("variant") || "overlay") !== "workspace" || !i || !this.hasAttribute("resize-rail") || this.hasAttribute(`${i}-open`) && (e.preventDefault(), this.clearResizeRailKeyboardHint(t), this.workspaceResizeState = {
+        side: i,
+        startX: e.clientX,
+        startY: e.clientY,
+        startLeftWidth: this.getWorkspacePanelWidth("left"),
+        startRightWidth: this.getWorkspacePanelWidth("right"),
+        closeOnRelease: !1
+      }, this.setAttribute("resizing", ""), t == null || t.classList.add("is-resizing"), this.syncWorkspaceResizeCloseOpacity(
+        i,
+        i === "left" ? this.workspaceResizeState.startLeftWidth : this.workspaceResizeState.startRightWidth
+      ), window.addEventListener("pointermove", this._handleWorkspaceResizeMove), window.addEventListener("pointerup", this._handleWorkspaceResizeEnd));
+    }, this._handleWorkspaceResizeMove = (e) => {
+      var l, c;
+      if (!this.workspaceResizeState) return;
+      const t = e.clientX - this.workspaceResizeState.startX, i = this.workspaceResizeState.side, s = i === "left" ? this.workspaceResizeState.startLeftWidth : this.workspaceResizeState.startRightWidth, r = i === "left" ? s + t : s - t, a = this.getResizeRailMinDrawerWidth(i), o = this.getWorkspaceMaxPanelWidth(i), n = Math.min(this.getResizeRailCloseThreshold(), a - 1), h = Math.max(a, Math.min(r, o));
+      this.workspaceResizeState.closeOnRelease = r <= n, (l = this.getWorkspaceResizeRail(i)) == null || l.classList.toggle("threshold", this.workspaceResizeState.closeOnRelease);
+      const d = (r <= a || r >= o) && !this.workspaceResizeState.closeOnRelease;
+      (c = this.getWorkspaceResizeRail(i)) == null || c.classList.toggle("at-limit", d), this.syncWorkspaceResizeCloseOpacity(i, r), this.setAttribute(`${i}-width`, `${Math.round(h)}px`);
+    }, this._handleWorkspaceResizeEnd = (e) => {
+      const t = this.workspaceResizeState;
+      t != null && t.closeOnRelease && this.removeAttribute(`${t.side}-open`), this.workspaceResizeRailEls.forEach((s) => s.classList.remove("is-resizing", "threshold", "at-limit")), this.workspaceResizeState = null, this.removeAttribute("resizing"), window.removeEventListener("pointermove", this._handleWorkspaceResizeMove), window.removeEventListener("pointerup", this._handleWorkspaceResizeEnd), t && !t.closeOnRelease && this.syncWorkspaceResizeCloseOpacity(t.side, this.getWorkspacePanelWidth(t.side));
+      const i = t ? this.getWorkspaceResizeRail(t.side) : null;
+      t && !t.closeOnRelease && this.isResizeRailPointerClick(t.startX, t.startY, e) ? i == null || i.focus() : i == null || i.blur();
+    }, this._handleWorkspaceResizeKeydown = (e) => {
+      const t = e.currentTarget, i = t == null ? void 0 : t.dataset.workspaceResize;
+      if ((this.getAttribute("variant") || "overlay") !== "workspace" || !i || !this.hasAttribute("resize-rail") || !this.hasAttribute(`${i}-open`)) return;
+      if (e.key === "Escape") {
+        e.preventDefault(), this.removeAttribute(`${i}-open`), this.syncWorkspaceState();
+        return;
       }
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
+      const s = e.key === "ArrowRight" ? 1 : -1, r = e.shiftKey ? z : m, a = this.getWorkspacePanelWidth(i) + (i === "left" ? s : -s) * r, o = Math.max(
+        this.getResizeRailMinDrawerWidth(i),
+        Math.min(a, this.getWorkspaceMaxPanelWidth(i))
+      );
+      this.syncResizeRailKeyboardHint(t, a, this.getResizeRailMinDrawerWidth(i), !0), this.setAttribute(`${i}-width`, `${Math.round(o)}px`), this.syncWorkspaceResizeCloseOpacity(i, o);
+    }, this._handleResize = () => {
+      var t;
+      this.syncMobileState(), this.syncResizeRailDrawerWidthBounds(), this.syncDrawerWidth();
+      const e = this.getAttribute("variant") || "overlay";
+      if (this.classList.add("no-transition"), (e === "push" || e === "persistent") && (this.updateLayout(e, this.getLayoutOpenState(e)), this.syncOpenState()), e === "workspace") {
+        const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".workspace-shell");
+        i == null || i.classList.add("no-transition"), this.syncWorkspaceState(), requestAnimationFrame(() => i == null ? void 0 : i.classList.remove("no-transition"));
+      }
+      requestAnimationFrame(() => this.classList.remove("no-transition"));
     }, this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["open", "width", "side", "variant", "z-index", "drawer-space", "breakpoint"];
+    return [
+      "open",
+      "width",
+      "height",
+      "side",
+      "variant",
+      "left-open",
+      "right-open",
+      "left-width",
+      "right-width",
+      "z-index",
+      "drawer-space",
+      "close-size",
+      "breakpoint",
+      "mobile-presentation",
+      "resize-rail",
+      "resize-min-drawer-width",
+      "resize-min-left-width",
+      "resize-min-right-width",
+      "resize-min-page-width",
+      "resize-close-threshold"
+    ];
   }
   connectedCallback() {
-    this.render(), this.cacheEls(), this.attachEvents(), this.updateFooterVisibility(), this.updateHeaderVisibility(), this.syncOpenState(), document.addEventListener("keydown", this._handleEscape), window.addEventListener("resize", this._handleResize);
+    this.syncMobileState(), this.syncHeight(), this.render(), this.cacheEls(), this.syncDrawerWidth(), this.attachEvents(), this.updateFooterVisibility(), this.updateHeaderVisibility(), this.syncOpenState(), this.syncWorkspaceState(), document.addEventListener("keydown", this._handleEscape), window.addEventListener("resize", this._handleResize);
   }
   disconnectedCallback() {
-    document.removeEventListener("keydown", this._handleEscape), window.removeEventListener("resize", this._handleResize);
+    document.removeEventListener("keydown", this._handleEscape), window.removeEventListener("resize", this._handleResize), window.removeEventListener("pointermove", this._handleResizeMove), window.removeEventListener("pointerup", this._handleResizeEnd), window.removeEventListener("pointermove", this._handleWorkspaceResizeMove), window.removeEventListener("pointerup", this._handleWorkspaceResizeEnd);
   }
   getBreakpoint() {
-    const t = this.getAttribute("breakpoint");
-    return t ? Number(t) : 768;
+    const e = this.getAttribute("breakpoint");
+    return e ? Number(e) : 768;
+  }
+  getPositiveNumberAttribute(e, t) {
+    const i = Number(this.getAttribute(e));
+    return Number.isFinite(i) && i > 0 ? i : t;
+  }
+  getResizeRailMinDrawerWidth(e) {
+    return e === "left" && this.hasAttribute("resize-min-left-width") ? this.getPositiveNumberAttribute("resize-min-left-width", g) : e === "right" && this.hasAttribute("resize-min-right-width") ? this.getPositiveNumberAttribute("resize-min-right-width", g) : this.getPositiveNumberAttribute("resize-min-drawer-width", g);
+  }
+  getResizeRailMinPageWidth() {
+    return this.getPositiveNumberAttribute("resize-min-page-width", W);
+  }
+  getResizeRailCloseThreshold() {
+    return this.getPositiveNumberAttribute("resize-close-threshold", S);
+  }
+  getCloseSize() {
+    const e = this.getAttribute("close-size");
+    return e && ["x-small", "small", "medium", "large"].includes(e) ? e : "medium";
+  }
+  getCloseActionSizeToken() {
+    return `var(--action-size-${this.getCloseSize()})`;
+  }
+  getMobilePresentation() {
+    return this.getAttribute("mobile-presentation") === "stack" ? "stack" : "overlay";
+  }
+  isMobileViewport() {
+    return window.innerWidth <= this.getBreakpoint();
+  }
+  usesMobileOverlay(e = this.getAttribute("variant") || "overlay") {
+    return this.isMobileViewport() && (e === "push" || e === "workspace" || e === "persistent" && this.getMobilePresentation() !== "stack");
+  }
+  getLayoutOpenState(e = this.getAttribute("variant") || "overlay") {
+    return e === "persistent" && !this.usesMobileOverlay(e) ? !0 : this.hasAttribute("open");
+  }
+  syncHeight() {
+    this.style.setProperty("--drawer-height", this.getAttribute("height") || "100dvh");
+  }
+  syncDrawerWidth() {
+    if (!(!this.innerEl || (this.getAttribute("variant") || "overlay") === "workspace")) {
+      if (this.isMobileViewport()) {
+        this.innerEl.style.removeProperty("width");
+        return;
+      }
+      this.innerEl.style.width = this.getAttribute("width") || "320px";
+    }
+  }
+  syncResizeRailDrawerWidthBounds() {
+    const e = this.getAttribute("variant") || "overlay";
+    if (!this.hasAttribute("resize-rail") || e !== "push" && e !== "persistent" || this.isMobileViewport()) return;
+    const t = this.getCurrentDrawerWidth(), i = this.getResizeRailMinDrawerWidth(), s = this.getResizeRailMaxDrawerWidth(), r = Math.round(Math.max(i, Math.min(t, s)));
+    Math.round(t) !== r && this.setAttribute("width", `${r}px`);
+  }
+  syncMobileState() {
+    this.toggleAttribute("mobile", this.isMobileViewport());
+  }
+  getWorkspaceColumns() {
+    const e = this.getAttribute("left-width") || "28rem", t = this.getAttribute("right-width") || "32rem", i = this.hasAttribute("left-open") ? e : "0", s = this.hasAttribute("right-open") ? t : "0";
+    if (!this.hasAttribute("resize-rail"))
+      return `${i} minmax(0, 1fr) ${s}`;
+    const r = "var(--drawer-resize-rail-size, var(--space-100))", a = this.hasAttribute("left-open") ? r : "0", o = this.hasAttribute("right-open") ? r : "0";
+    return `${i} ${a} minmax(0, 1fr) ${o} ${s}`;
   }
-  getDrawerTemplate(t = !0) {
-    const e = this.hasAttribute("drawer-space") ? "no-padding" : "";
+  syncWorkspaceState() {
+    var l;
+    if ((this.getAttribute("variant") || "overlay") !== "workspace" || !this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector(".workspace-shell");
+    if (!e) return;
+    const t = this.isMobileViewport();
+    t ? e.style.removeProperty("grid-template-columns") : e.style.gridTemplateColumns = this.getWorkspaceColumns();
+    const i = this.getAttribute("side") === "right" ? "right" : "left", s = this.hasAttribute("open"), r = t ? s && i === "left" : this.hasAttribute("left-open"), a = t ? s && i === "right" : this.hasAttribute("right-open"), o = this.getWorkspacePanel("left"), n = this.getWorkspacePanel("right");
+    this.classList.contains("no-transition") || [o, n, this.overlayEl].forEach((c) => {
+      if (c) {
+        c.classList.add("is-animating");
+        let p = !1;
+        const u = () => {
+          p || (p = !0, c.classList.remove("is-animating"));
+        };
+        c.addEventListener("transitionend", u, { once: !0 }), setTimeout(u, 400);
+      }
+    }), o == null || o.toggleAttribute("inert", !r), n == null || n.toggleAttribute("inert", !a), o && (o.hidden = !t && !r), n && (n.hidden = !t && !a);
+    const h = this.shadowRoot.querySelector('[data-workspace-resize="left"]'), d = this.shadowRoot.querySelector('[data-workspace-resize="right"]');
+    h && (h.hidden = t || !this.hasAttribute("left-open")), d && (d.hidden = t || !this.hasAttribute("right-open")), r || o == null || o.style.removeProperty("opacity"), a || n == null || n.style.removeProperty("opacity"), (l = this.shadowRoot.querySelector(".workspace-page")) == null || l.scrollTo({ left: 0 });
+  }
+  isEventInsideDrawer(e) {
+    const t = e.composedPath();
+    return !!(this.outer && t.includes(this.outer) || this.resizeRailEl && t.includes(this.resizeRailEl) || this.overlayEl && t.includes(this.overlayEl));
+  }
+  getDrawerTemplate(e = !0) {
+    const t = this.hasAttribute("drawer-space") ? "no-padding" : "", i = this.getCloseSize();
     return (
       /*html*/
       `
     <div class="outer">
-      <div class="inner" role="complementary">
+      <div class="inner" part="${f("visual")}" role="complementary">
         <div class="header">
           <slot name="title"></slot>
-          ${t ? `
-            <mui-button class="close" variant="tertiary" aria-label="Close drawer">
-              <mui-icon-close size="medium"></mui-icon-close>
+          ${e ? `
+            <mui-button class="close" variant="tertiary" size="${i}" aria-label="Close drawer">
+              <mui-icon-close size="${i}"></mui-icon-close>
             </mui-button>` : "<span class='spacer'></span>"}
         </div>
-        <div class="content ${e}"><slot></slot></div>
+        <div class="content ${t}"><slot></slot></div>
         <div class="actions" hidden><slot name="actions"></slot></div>
       </div>
     </div>
@@ -49,28 +248,61 @@ class u extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("width") || "320px", e = this.getAttribute("variant") || "overlay", i = !!this.querySelector('[slot="before"]');
-    this._computedSide = this.getAttribute("side") || (i ? "right" : "left"), this.getAttribute("side") !== this._computedSide && this.setAttribute("side", this._computedSide);
-    const o = (
+    const e = this.getAttribute("width") || "320px", t = this.getAttribute("variant") || "overlay", i = this.getBreakpoint(), s = (t === "push" || t === "persistent") && this.hasAttribute("resize-rail"), r = t === "workspace" && this.hasAttribute("resize-rail"), a = this.getCloseSize(), o = f("visual"), n = !!this.querySelector('[slot="before"]');
+    this._computedSide = this.getAttribute("side") || (n ? "right" : "left"), t !== "workspace" && this.getAttribute("side") !== this._computedSide && this.setAttribute("side", this._computedSide);
+    const h = (
       /*css*/
       `
+      :host {
+        --drawer-safe-top: 0px;
+        --drawer-safe-bottom: 0px;
+        --drawer-safe-left: 0px;
+        --drawer-safe-right: 0px;
+        --drawer-safe-inline: 0px;
+      }
+
+      :host([variant="overlay"]:not([contained])) {
+        --drawer-safe-top: env(safe-area-inset-top);
+        --drawer-safe-bottom: env(safe-area-inset-bottom);
+      }
+
+      :host([variant="overlay"]:not([contained])[side="left"]) {
+        --drawer-safe-left: env(safe-area-inset-left);
+        --drawer-safe-inline: env(safe-area-inset-left);
+      }
+
+      :host([variant="overlay"]:not([contained])[side="right"]) {
+        --drawer-safe-right: env(safe-area-inset-right);
+        --drawer-safe-inline: env(safe-area-inset-right);
+      }
+
+      :host(.no-transition) *,
+      :host(.no-transition) {
+        transition: none !important;
+      }
+
       .header {
         display: flex;
         flex: 0 0 auto;
         justify-content: space-between;
         align-items: center;
-        padding: calc(var(--space-400) + env(safe-area-inset-top)) var(--space-400) var(--space-400) var(--space-500);
+        padding: calc(var(--space-400) + var(--drawer-safe-top)) var(--space-400) var(--space-400) var(--space-500);
         border-bottom: var(--border-thin);
         box-sizing: border-box;
       }
       .inner {
         display: flex;
         flex-direction: column;
+        box-sizing: border-box;
+        padding-left: var(--drawer-safe-left);
+        padding-right: var(--drawer-safe-right);
       }
       .content {
         flex: 1 1 auto;
         min-height: 0;
         overflow-y: auto;
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
         height: auto;
         padding: var(--space-500);
         box-sizing: border-box;
@@ -80,11 +312,11 @@ class u extends HTMLElement {
       }
 
       .content.no-heading {
-        padding-top: calc(var(--space-500) + env(safe-area-inset-top));
+        padding-top: calc(var(--space-500) + var(--drawer-safe-top));
       }
 
       .content.no-padding.no-heading {
-        padding-top: env(safe-area-inset-top);
+        padding-top: var(--drawer-safe-top);
       }
 
 
@@ -93,7 +325,7 @@ class u extends HTMLElement {
         flex: 0 0 auto;
         align-items: center;
         justify-content: flex-end;
-        padding: var(--space-400) var(--space-500) calc(var(--space-400) + env(safe-area-inset-bottom));
+        padding: var(--space-400) var(--space-500) calc(var(--space-400) + var(--drawer-safe-bottom));
         border-top: var(--border-thin);
         background: var(--drawer-background);
         gap: var(--space-300);
@@ -104,8 +336,345 @@ class u extends HTMLElement {
       .actions[hidden] {
         display: none !important;
       }
+      .header .spacer {
+        display: inline-flex;
+        flex: 0 0 auto;
+        width: ${this.getCloseActionSizeToken()};
+        height: ${this.getCloseActionSizeToken()};
+      }
+    `
+    ), d = (
+      /*css*/
+      `
+      .resize-rail,
+      .workspace-resize-rail {
+        position: relative;
+        z-index: 2;
+        display: block;
+        width: var(--drawer-resize-rail-size, var(--space-100));
+        height: 100%;
+        padding: 0;
+        border: 0;
+        background: var(--drawer-resize-rail-background, transparent);
+        cursor: col-resize;
+        appearance: none;
+        touch-action: none;
+      }
+
+      .resize-rail[hidden],
+      .workspace-resize-rail[hidden] {
+        display: none !important;
+      }
+
+      .resize-rail::before,
+      .workspace-resize-rail::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: var(--stroke-size-100);
+        background: var(--drawer-resize-rail-inner-background);
+        transform: translateX(-50%);
+        transition:
+          width var(--speed-100) ease,
+          background var(--speed-100) ease;
+      }
+
+      .resize-rail:hover::before,
+      .workspace-resize-rail:hover::before,
+      .resize-rail.is-resizing::before,
+      .workspace-resize-rail.is-resizing::before {
+        width: var(--stroke-size-300);
+        background: var(--outline-color);
+      }
+
+      .resize-rail:focus::before,
+      .workspace-resize-rail:focus::before {
+        width: var(--stroke-size-300);
+        background: var(--outline-color);
+      }
+
+      .resize-rail:focus,
+      .workspace-resize-rail:focus {
+        outline: none;
+      }
+
+      :host([resizing]) .resize-rail.threshold::before,
+      .workspace-resize-rail.threshold::before {
+        width: var(--stroke-size-300);
+        background: var(--drawer-resize-rail-threshold-indicator);
+        animation: resize-rail-threshold-pulse calc(var(--speed-400) * 2) ease-in-out infinite;
+      }
+
+      :host([resizing]) .resize-rail.at-limit::before,
+      .workspace-resize-rail.at-limit::before {
+        width: var(--stroke-size-300);
+        background: var(--drawer-resize-rail-threshold-indicator, var(--attention-color));
+        animation: rail-limit-flash 0.25s ease-in-out 3;
+      }
+
+      @keyframes rail-limit-flash {
+        0%, 100% {
+          opacity: 0.4;
+        }
+        50% {
+          opacity: 0.8;
+        }
+      }
+
+      .resize-rail-icon,
+      .workspace-resize-rail-icon,
+      .resize-rail-esc,
+      .workspace-resize-rail-esc {
+        position: absolute;
+        top: 50%;
+        right: var(--space-200);
+        color: var(--drawer-resize-rail-threshold-indicator);
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(-50%);
+        transition: opacity var(--speed-100) ease;
+      }
+
+      :host([side="right"]) .resize-rail-icon,
+      .workspace-resize-rail-right .workspace-resize-rail-icon {
+        right: auto;
+        left: var(--space-200);
+      }
+
+      :host([side="left"]) .resize-rail-esc,
+      .workspace-resize-rail-left .workspace-resize-rail-esc {
+        left: auto;
+        right: var(--space-400);
+      }
+
+      :host([side="right"]) .resize-rail-esc,
+      .workspace-resize-rail-right .workspace-resize-rail-esc {
+        right: auto;
+        left: var(--space-400);
+      }
+
+      :host([side="right"]) .resize-rail-icon,
+      .workspace-resize-rail-right .workspace-resize-rail-icon {
+        transform: translateY(-50%) rotate(180deg);
+      }
+
+      :host([resizing]) .resize-rail.threshold .resize-rail-icon,
+      .workspace-resize-rail.threshold .workspace-resize-rail-icon {
+        opacity: 0.7;
+      }
+
+      .resize-rail.keyboard-at-min .resize-rail-esc,
+      .workspace-resize-rail.keyboard-at-min .workspace-resize-rail-esc {
+        opacity: 0.85;
+      }
+
+      .resize-rail-esc,
+      .workspace-resize-rail-esc {
+        --text-color: var(--drawer-resize-rail-threshold-indicator);
+      }
+
+      @keyframes resize-rail-threshold-pulse {
+        0%,
+        100% {
+          opacity: 0.4;
+        }
+        50% {
+          opacity: 0.8;
+        }
+      }
     `
-    ), s = (
+    ), l = (
+      /*css*/
+      `
+      :host([variant="workspace"]) {
+        display: block;
+        width: 100%;
+        height: var(--drawer-height, 100dvh);
+      }
+
+      .workspace-shell {
+        display: grid;
+        grid-template-columns: ${this.getWorkspaceColumns()};
+        width: 100%;
+        height: var(--drawer-height, 100dvh);
+        min-width: 0;
+        overflow: hidden;
+        transition: grid-template-columns var(--speed-100) ease;
+      }
+
+      .workspace-panel {
+        min-width: 0;
+        overflow: hidden;
+        background: var(--drawer-background);
+        visibility: hidden;
+      }
+
+      .workspace-panel.is-animating {
+        transition:
+          opacity var(--speed-100) ease,
+          transform 0.3s ease,
+          visibility var(--speed-100) ease;
+      }
+
+      .workspace-panel[hidden] {
+        display: none !important;
+      }
+
+      :host([left-open]) .workspace-panel-left,
+      :host([right-open]) .workspace-panel-right {
+        visibility: visible;
+      }
+
+      :host([resizing]) .workspace-panel,
+      .workspace-shell.no-transition .workspace-panel {
+        transition: none;
+      }
+
+      .workspace-panel-left .inner,
+      .workspace-panel-right .inner {
+        position: static;
+        width: 100%;
+        height: var(--drawer-height, 100dvh);
+        background: var(--drawer-background);
+        padding-top: var(--drawer-safe-top);
+        padding-bottom: var(--drawer-safe-bottom);
+        box-sizing: border-box;
+      }
+
+      .workspace-panel-left .inner {
+        border-right: var(--border-thin);
+      }
+
+      .workspace-panel-right .inner {
+        border-left: var(--border-thin);
+      }
+
+      @media (min-width: ${i + 1}px) {
+        :host([resize-rail]) .workspace-panel-left .inner {
+          border-right: none;
+        }
+
+        :host([resize-rail]) .workspace-panel-right .inner {
+          border-left: none;
+        }
+      }
+
+      .workspace-page {
+        grid-column: 2;
+        min-width: 0;
+        width: 100%;
+        height: var(--drawer-height, 100dvh);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      :host([resize-rail]) .workspace-page {
+        grid-column: 3;
+      }
+
+      ::slotted([slot="page"]) {
+        min-width: 0;
+        height: var(--drawer-height, 100dvh);
+      }
+
+      :host([resizing]) .workspace-shell,
+      .workspace-shell.no-transition {
+        transition: none;
+      }
+
+      @media (max-width: ${i}px) {
+        :host([variant="workspace"]) {
+          --drawer-safe-top: env(safe-area-inset-top);
+          --drawer-safe-bottom: env(safe-area-inset-bottom);
+        }
+
+        :host([variant="workspace"][side="left"]) {
+          --drawer-safe-left: env(safe-area-inset-left);
+          --drawer-safe-inline: env(safe-area-inset-left);
+        }
+
+        :host([variant="workspace"][side="right"]) {
+          --drawer-safe-right: env(safe-area-inset-right);
+          --drawer-safe-inline: env(safe-area-inset-right);
+        }
+
+        /* Mobile overlay surfaces must use the viewport, not --drawer-height, so desktop/contained heights do not clip them. */
+        .overlay {
+          position: fixed;
+          display: block;
+          inset: 0;
+          height: 100dvh;
+          z-index: 10;
+          background: var(--backdrop-overlay);
+          opacity: 0;
+          visibility: hidden;
+        }
+
+        .overlay.is-animating {
+          transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        :host([open]) .overlay {
+          opacity: 1;
+          visibility: visible;
+        }
+
+        .workspace-shell {
+          grid-template-columns: minmax(0, 1fr);
+          height: var(--drawer-height, 100dvh);
+        }
+
+        .workspace-page,
+        :host([resize-rail]) .workspace-page {
+          grid-column: 1;
+          height: var(--drawer-height, 100dvh);
+        }
+
+        .workspace-panel {
+          position: fixed;
+          top: 0;
+          bottom: auto;
+          z-index: 11;
+          width: 90%;
+          max-width: calc(32rem + var(--drawer-safe-inline));
+          height: 100dvh;
+          max-height: 100dvh;
+          overflow: visible;
+          visibility: hidden;
+          pointer-events: none;
+        }
+
+        .workspace-panel .inner {
+          height: 100dvh;
+        }
+
+        .workspace-panel-left {
+          left: 0;
+          right: auto;
+          transform: translateX(-100%);
+        }
+
+        .workspace-panel-right {
+          right: 0;
+          left: auto;
+          transform: translateX(100%);
+        }
+
+        :host([open][side="left"]) .workspace-panel-left,
+        :host([open][side="right"]) .workspace-panel-right {
+          transform: translateX(0);
+          visibility: visible;
+          pointer-events: auto;
+        }
+
+        .workspace-resize-rail {
+          display: none;
+        }
+      }
+    `
+    ), c = (
       /*css*/
       `
       .overlay {
@@ -113,15 +682,18 @@ class u extends HTMLElement {
         top: 0;
         left: 0;
         width: 100%;
-        height: 100%;
+        height: 100dvh;
         z-index: 101;
-        transition: opacity 0.3s ease, visibility 0.3s ease;
         background: var(--backdrop-overlay);
         opacity: 0;
         visibility: hidden;
         will-change: opacity, visibility;
       }
 
+      .overlay.is-animating {
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+      }
+
       .surface {
         background: var(--surface);
         width: 100%;
@@ -130,12 +702,12 @@ class u extends HTMLElement {
       .inner {
         position: fixed;
         top: 0;
-        height: 100dvh;
+        height: var(--drawer-height, 100dvh);
         z-index: 110;
         transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
         background: var(--drawer-background);
         border-left: var(--border-thin);
-        width: ${t};
+        width: ${e};
         transform: translateX(100%);
         opacity: 0;
         visibility: hidden;
@@ -170,109 +742,243 @@ class u extends HTMLElement {
         visibility: visible;
       }
     `
-    ), a = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", l = (
+    ), p = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", u = (
       /*css*/
       `
       .inner {
         background: var(--drawer-background);
-        width: ${t};
+        width: ${e};
         position: fixed;
         top: 0;
         left: 0;
-        height: 100%;
+        height: var(--drawer-height, 100dvh);
       }
 
       .outer {
         overflow: hidden;
         will-change: transform;
+        visibility: hidden;
+      }
+
+      .outer.is-animating {
+        transition: opacity var(--speed-100) ease, visibility var(--speed-100) ease;
+      }
+
+      :host([open]) .outer {
+        visibility: visible;
+      }
+
+      @media (min-width: ${i + 1}px) {
+        :host([variant="persistent"]) .outer {
+          visibility: visible;
+        }
+      }
+
+      :host([resizing]) .outer {
+        transition: none;
       }
 
       :host([variant="push"]),
       :host([variant="persistent"]) {
         display: block;
         width: 100%;
+        height: var(--drawer-height, 100dvh);
+        position: relative;
       }
 
       /* Push */
       :host([variant="push"]) .shell {
         display: grid;
-        height: 100%;
+        height: var(--drawer-height, 100dvh);
         overflow: hidden;
         transition: grid-template-columns var(--speed-100) ease;
       }
 
+      :host([resizing]) .shell {
+        transition: none;
+      }
+
       /* Persistent */
       :host([variant="persistent"]) .shell {
         display: grid;
-        height: 100%;
+        height: var(--drawer-height, 100dvh);
         overflow: hidden;
       }
 
-      :host([variant="persistent"]) .header .spacer {
-        height: 4.4rem;
-      }
-
       /* Hidden & Persistent */
       :host([open]) .outer,
-      :host([variant="persistent"]) .outer  { ${a} }
+      :host([variant="persistent"]) .outer  { ${p} }
+
+      :host([variant="push"][resize-rail]) .outer,
+      :host([variant="persistent"][resize-rail]) .outer {
+        border: none;
+      }
 
+      :host([variant="push"][resize-rail]:not([open])) .resize-rail {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .overlay {
+        display: none;
+      }
 
       /* Direct slotted element */
       ::slotted([slot="page"]) {
-        height: 100dvh;
+        height: var(--drawer-height, 100dvh);
         overflow-y: auto;
+        overscroll-behavior: contain;
         -webkit-overflow-scrolling: touch;
       }
 
     `
-    ), n = (
+    ), w = (
       /*css*/
       `
-      @media (max-width: ${this.getBreakpoint()}px) {
+      @media (max-width: ${i}px) {
+        :host([variant="push"]),
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) {
+          --drawer-safe-top: env(safe-area-inset-top);
+          --drawer-safe-bottom: env(safe-area-inset-bottom);
+        }
+
+        :host([variant="push"][side="left"]),
+        :host([variant="persistent"]:not([mobile-presentation="stack"])[side="left"]) {
+          --drawer-safe-left: env(safe-area-inset-left);
+          --drawer-safe-inline: env(safe-area-inset-left);
+        }
+
+        :host([variant="push"][side="right"]),
+        :host([variant="persistent"]:not([mobile-presentation="stack"])[side="right"]) {
+          --drawer-safe-right: env(safe-area-inset-right);
+          --drawer-safe-inline: env(safe-area-inset-right);
+        }
+
+        /* Mobile overlay surfaces must use the viewport, not --drawer-height, so desktop/contained heights do not clip them. */
+        .actions {
+          padding-bottom: calc(var(--space-400) + max(env(safe-area-inset-bottom), var(--space-400)));
+        }
+
         .outer {
           position: fixed;
-          left: 0;
-          right: 0;
-          bottom: 0;
           top: 0;
-          width: 100%;
+          bottom: 0;
+          max-height: var(--drawer-height, 100dvh);
+        }
+
+        .outer.is-animating {
+          transition: transform 0.3s ease, visibility 0.3s ease;
+        }
+
+        :host([variant="push"]) .outer,
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) .outer {
+          bottom: auto;
+          width: 90%;
+          max-width: calc(${e} + var(--drawer-safe-inline));
+          height: 100dvh;
           max-height: 100dvh;
-          transform: translateY(100%);
-          transition: none;
-        }        
+          overflow: visible;
+          transform: translateX(-100%);
+          z-index: 11;
+          visibility: hidden;
+        }
 
-        :host([open]) .outer {
-          transform: translateY(0);
-          transition: transform 0.3s ease;
+        :host([variant="push"]) .overlay,
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) .overlay {
+          position: fixed;
+          display: block;
+          inset: 0;
+          height: 100dvh;
+          z-index: 10;
+          background: var(--backdrop-overlay);
+          opacity: 0;
+          visibility: hidden;
+        }
+
+        :host([variant="push"]) .overlay.is-animating,
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) .overlay.is-animating {
+          transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        :host([variant="push"][side="left"]) .outer,
+        :host([variant="persistent"]:not([mobile-presentation="stack"])[side="left"]) .outer {
+          left: 0;
+          right: auto;
+        }
+
+        :host([variant="push"][side="right"]) .outer,
+        :host([variant="persistent"]:not([mobile-presentation="stack"])[side="right"]) .outer {
+          left: auto;
+          right: 0;
+          transform: translateX(100%);
+        }
+
+        :host([open][variant="push"]) .outer,
+        :host([open][variant="persistent"]:not([mobile-presentation="stack"])) .outer {
+          transform: translateX(0);
+          visibility: visible;
           border: none;
         }
 
+        :host([open][variant="push"][side="left"]) .inner,
+        :host([open][variant="persistent"]:not([mobile-presentation="stack"])[side="left"]) .inner {
+          border-right: var(--border-thin);
+        }
+
+        :host([open][variant="push"][side="right"]) .inner,
+        :host([open][variant="persistent"]:not([mobile-presentation="stack"])[side="right"]) .inner {
+          border-left: var(--border-thin);
+        }
+
+        :host([open][variant="push"]) .overlay,
+        :host([open][variant="persistent"]:not([mobile-presentation="stack"])) .overlay {
+          opacity: 1;
+          visibility: visible;
+        }
+
         /* Overlay */
         :host([variant="overlay"]) .inner {
-          max-width: ${t};
+          max-width: calc(${e} + var(--drawer-safe-inline));
           width: 90%;
-          height: 100%;
+          height: 100dvh;
         }
 
         /* Push */
-        :host([variant="push"]) .inner {
+        :host([variant="push"]) .inner,
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) .inner {
+          position: static;
           width: 100%;
-          height: 100%;
+          height: 100dvh;
+        }
+
+        :host([variant="push"]),
+        :host([variant="push"]) .shell,
+        :host([variant="push"]) ::slotted([slot="page"]),
+        :host([variant="persistent"]:not([mobile-presentation="stack"])),
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) .shell,
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) ::slotted([slot="page"]) {
+          height: auto;
+          min-height: var(--drawer-height, 100dvh);
+          overflow: visible;
+        }
+
+        :host([variant="persistent"]:not([mobile-presentation="stack"])) .close {
+          display: inline-flex;
         }
 
         /* Persistent */
-        :host([variant="persistent"]) .inner {
+        :host([variant="persistent"][mobile-presentation="stack"]) .inner {
           width: 100%;
           position: static;
           height: auto;
           border-radius: var(--radius-200);
         }
 
-        :host([variant="persistent"]) .shell {
+        :host([variant="persistent"][mobile-presentation="stack"]) .shell {
           height: auto;
         }
 
-        :host([variant="persistent"]) .outer {
+        :host([variant="persistent"][mobile-presentation="stack"]) .outer {
           width: 100%;
           position: static;
           height: auto;
@@ -284,95 +990,257 @@ class u extends HTMLElement {
           z-index: initial;
         }
 
-        :host([variant="persistent"]) .header {
+        :host([variant="persistent"][mobile-presentation="stack"]) .header {
           padding-top: var(--space-400);
         }
 
-        :host([variant="persistent"]) .content {
+        :host([variant="persistent"][mobile-presentation="stack"]) .content {
           flex: 0 1 auto;
           min-height: initial;
           height: auto;
         }
 
-        :host([variant="persistent"]) .actions {
+        :host([variant="persistent"][mobile-presentation="stack"]) .actions {
           border-bottom-right-radius: var(--radius-200);
           border-bottom-left-radius: var(--radius-200);
           width: 100%;
           padding: var(--space-400) var(--space-500) var(--space-400);
         }
 
+        .resize-rail {
+          display: none;
+        }
+
       }
 
       @media (max-width: 360px) {
-        :host([variant="persistent"]) .outer {
+        :host([variant="persistent"][mobile-presentation="stack"]) .outer {
           padding: calc(var(--space-400) / 2);
         }
       }
 
     `
-    ), d = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
-    let r = "";
-    const c = this.hasAttribute("drawer-space") ? "no-padding" : "";
-    e === "overlay" ? r = /*html*/
-    `
-      <style>${o}${s}${n}</style>
+    ), R = this.getAttribute("side") || this._computedSide, b = t === "overlay" || t === "push" || this.usesMobileOverlay(t);
+    let v = "";
+    const E = this.hasAttribute("drawer-space") ? "no-padding" : "";
+    if (t === "workspace")
+      v = /*html*/
+      `
+        <style>${h}${d}${l}</style>
+        <div class="overlay"></div>
+        <div class="workspace-shell">
+          <div class="outer workspace-panel workspace-panel-left">
+            <div class="inner" role="complementary">
+              <div class="content no-padding"><slot name="left"></slot></div>
+            </div>
+          </div>
+          ${r ? '<button class="workspace-resize-rail workspace-resize-rail-left" part="resize-rail" type="button" aria-label="Resize left drawer" data-workspace-resize="left"><mui-icon-left-chevron class="workspace-resize-rail-icon" size="x-small" color="var(--drawer-resize-rail-threshold-indicator)" aria-hidden="true"></mui-icon-left-chevron><mui-body class="workspace-resize-rail-esc" size="xx-small" weight="bold" aria-hidden="true">ESC</mui-body></button>' : ""}
+          <div class="workspace-page">
+            <slot name="page"></slot>
+          </div>
+          ${r ? '<button class="workspace-resize-rail workspace-resize-rail-right" part="resize-rail" type="button" aria-label="Resize right drawer" data-workspace-resize="right"><mui-icon-left-chevron class="workspace-resize-rail-icon" size="x-small" color="var(--drawer-resize-rail-threshold-indicator)" aria-hidden="true"></mui-icon-left-chevron><mui-body class="workspace-resize-rail-esc" size="xx-small" weight="bold" aria-hidden="true">ESC</mui-body></button>' : ""}
+          <div class="outer workspace-panel workspace-panel-right">
+            <div class="inner" role="complementary">
+              <div class="content no-padding"><slot name="right"></slot></div>
+            </div>
+          </div>
+        </div>
+      `;
+    else if (t === "overlay")
+      v = /*html*/
+      `
+      <style>${h}${c}${w}</style>
       <div class="overlay"></div>
-      <div class="inner" role="dialog" aria-modal="true">
+      <div class="inner" part="${o}" role="dialog" aria-modal="true">
         <div class="header" hidden>
           <slot name="title"></slot>
-          <mui-button class="close" variant="tertiary" aria-label="Close drawer">
-            <mui-icon-close size="medium"></mui-icon-close>
+          <mui-button class="close" variant="tertiary" size="${a}" aria-label="Close drawer">
+            <mui-icon-close size="${a}"></mui-icon-close>
           </mui-button>
         </div>
-        <div class="content ${c}">
+        <div class="content ${E}">
           <slot></slot>
         </div>
         <div class="actions" hidden>
           <slot name="actions"></slot>
         </div>
       </div>
-    ` : (e === "push" || e === "persistent") && (r = /*html*/
-    `
-        <style>${o}${l}${n}</style>
+    `;
+    else if (t === "push" || t === "persistent") {
+      const y = s ? '<button class="resize-rail" part="resize-rail" type="button" aria-label="Resize drawer"><mui-icon-left-chevron class="resize-rail-icon" size="x-small" color="var(--drawer-resize-rail-threshold-indicator)" aria-hidden="true"></mui-icon-left-chevron><mui-body class="resize-rail-esc" size="xx-small" weight="bold" aria-hidden="true">ESC</mui-body></button>' : "";
+      v = /*html*/
+      `
+        <style>${h}${d}${u}${w}</style>
+        <div class="overlay"></div>
         <div class="shell">
-          ${d === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
+          ${R === "left" ? this.getDrawerTemplate(b) + y + '<slot name="page"></slot>' : '<slot name="page"></slot>' + y + this.getDrawerTemplate(b)}
         </div>
-      `), this.shadowRoot.innerHTML = r;
+      `;
+    }
+    this.shadowRoot.innerHTML = v;
   }
   cacheEls() {
-    this.innerEl = this.shadowRoot.querySelector(".inner"), this.overlayEl = this.shadowRoot.querySelector(".overlay"), this.footerEl = this.shadowRoot.querySelector(".actions"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]'), this.outer = this.shadowRoot.querySelector(".outer"), this.pushLayout = this.shadowRoot.querySelector(".shell"), this.persistentLayout = this.shadowRoot.querySelector(".shell"), this.headerEl = this.shadowRoot.querySelector(".header"), this.headerSlot = this.shadowRoot.querySelector('slot[name="title"]');
+    this.innerEl = this.shadowRoot.querySelector(".inner"), this.overlayEl = this.shadowRoot.querySelector(".overlay"), this.footerEl = this.shadowRoot.querySelector(".actions"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]'), this.outer = this.shadowRoot.querySelector(".outer"), this.pushLayout = this.shadowRoot.querySelector(".shell"), this.persistentLayout = this.shadowRoot.querySelector(".shell"), this.headerEl = this.shadowRoot.querySelector(".header"), this.headerSlot = this.shadowRoot.querySelector('slot[name="title"]'), this.resizeRailEl = this.shadowRoot.querySelector(".resize-rail"), this.workspaceResizeRailEls = Array.from(this.shadowRoot.querySelectorAll("[data-workspace-resize]"));
   }
   attachEvents() {
-    var t, e, i, o;
-    (t = this.shadowRoot.querySelector(".close")) == null || t.addEventListener("click", () => this.close()), (e = this.overlayEl) == null || e.addEventListener("click", () => this.close()), (i = this.actionsSlot) == null || i.addEventListener("slotchange", () => this.updateFooterVisibility()), (o = this.headerSlot) == null || o.addEventListener("slotchange", () => this.updateHeaderVisibility());
+    var e, t, i, s, r, a, o;
+    (e = this.shadowRoot.querySelector(".close")) == null || e.addEventListener("click", () => this.close()), (t = this.overlayEl) == null || t.addEventListener("click", () => this.close()), (i = this.actionsSlot) == null || i.addEventListener("slotchange", () => this.updateFooterVisibility()), (s = this.headerSlot) == null || s.addEventListener("slotchange", () => this.updateHeaderVisibility()), (r = this.resizeRailEl) == null || r.addEventListener("pointerdown", this._handleResizeStart), (a = this.resizeRailEl) == null || a.addEventListener("keydown", this._handleResizeKeydown), (o = this.resizeRailEl) == null || o.addEventListener("blur", () => this.clearResizeRailKeyboardHint(this.resizeRailEl)), this.workspaceResizeRailEls.forEach((n) => {
+      n.addEventListener("pointerdown", this._handleWorkspaceResizeStart), n.addEventListener("keydown", this._handleWorkspaceResizeKeydown), n.addEventListener("blur", () => this.clearResizeRailKeyboardHint(n));
+    });
   }
   updateFooterVisibility() {
     if (!this.footerEl || !this.actionsSlot) return;
-    const t = this.actionsSlot.assignedElements().length > 0;
-    this.footerEl.hidden = !t, this.toggleAttribute("has-footer", t);
+    const e = this.actionsSlot.assignedElements().length > 0;
+    this.footerEl.hidden = !e, this.toggleAttribute("has-footer", e);
   }
   updateHeaderVisibility() {
     if (!this.headerEl || !this.headerSlot || !this.innerEl) return;
-    const t = this.headerSlot.assignedElements().length > 0;
-    this.headerEl.hidden = !t, this.toggleAttribute("has-header", t);
-    const e = this.innerEl.querySelector(".content");
-    e && e.classList.toggle("no-heading", !t);
+    const e = this.headerSlot.assignedElements().length > 0;
+    this.headerEl.hidden = !e, this.toggleAttribute("has-header", e);
+    const t = this.innerEl.querySelector(".content");
+    t && t.classList.toggle("no-heading", !e);
+  }
+  clearResizeRailKeyboardHint(e) {
+    e == null || e.classList.remove("keyboard-at-min");
   }
-  attributeChangedCallback(t, e, i) {
-    t === "open" && this.syncOpenState(), t === "width" && this.innerEl && (this.innerEl.style.width = i || "320px"), t === "side" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState()), t === "variant" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState());
+  syncResizeRailKeyboardHint(e, t, i, s) {
+    e == null || e.classList.toggle("keyboard-at-min", s && t <= i);
+  }
+  attributeChangedCallback(e, t, i) {
+    if (e === "breakpoint") {
+      this.syncMobileState(), this.syncDrawerWidth();
+      const s = this.getAttribute("variant") || "overlay";
+      (s === "push" || s === "persistent") && this.updateLayout(s, this.getLayoutOpenState(s)), this.syncOpenState();
+    }
+    if (e === "open" && (this.syncOpenState(), this.syncWorkspaceState()), (e === "left-open" || e === "right-open" || e === "left-width" || e === "right-width") && this.syncWorkspaceState(), e === "height") {
+      this.syncHeight();
+      const s = this.getAttribute("variant") || "overlay";
+      s === "workspace" && this.syncWorkspaceState(), (s === "push" || s === "persistent") && this.updateLayout(s, this.getLayoutOpenState(s));
+    }
+    if (e === "width" && this.innerEl) {
+      this.syncDrawerWidth();
+      const s = this.getAttribute("variant") || "overlay";
+      (s === "push" || s === "persistent") && this.updateLayout(s, this.getLayoutOpenState(s));
+    }
+    if (e === "mobile-presentation") {
+      this.syncDrawerWidth();
+      const s = this.getAttribute("variant") || "overlay";
+      (s === "push" || s === "persistent") && this.updateLayout(s, this.getLayoutOpenState(s)), this.syncOpenState();
+    }
+    if (e === "side" && (this.getAttribute("variant") || "overlay") === "workspace") {
+      this.syncOpenState(), this.syncWorkspaceState();
+      return;
+    }
+    if ((e === "side" || e === "resize-rail") && (this.render(), this.cacheEls(), this.syncDrawerWidth(), this.attachEvents(), this.syncOpenState(), this.syncWorkspaceState()), e === "resize-min-drawer-width" || e === "resize-min-page-width") {
+      const s = this.getAttribute("variant") || "overlay";
+      if ((s === "push" || s === "persistent") && this.hasAttribute("resize-rail") && (this.syncResizeRailDrawerWidthBounds(), this.updateLayout(s, s === "persistent" ? !0 : this.hasAttribute("open"))), s === "workspace" && this.hasAttribute("resize-rail")) {
+        const r = this.getResizeRailMinDrawerWidth();
+        ["left", "right"].forEach((a) => {
+          this.hasAttribute(`${a}-open`) && this.getWorkspacePanelWidth(a) < r && this.setAttribute(`${a}-width`, `${r}px`);
+        }), this.syncWorkspaceState();
+      }
+    }
+    if (e === "resize-close-threshold") {
+      const s = this.getAttribute("variant") || "overlay";
+      s === "push" && this.hasAttribute("resize-rail") && this.updateLayout(s, this.hasAttribute("open"));
+    }
+    e === "variant" && (this.render(), this.cacheEls(), this.syncDrawerWidth(), this.attachEvents(), this.syncOpenState());
+  }
+  syncResizeCloseOpacity(e) {
+    var s;
+    if (!this.outer) return;
+    const t = this.getAttribute("variant") || "overlay", i = window.innerWidth <= this.getBreakpoint();
+    if (t !== "push" || !this.hasAttribute("resize-rail") || i) {
+      this.outer.style.removeProperty("opacity"), (s = this.resizeRailEl) == null || s.classList.remove("threshold");
+      return;
+    }
+    this.outer.style.opacity = this.getResizeCloseOpacity(e).toString();
+  }
+  getResizeCloseOpacity(e) {
+    const t = this.getResizeRailMinDrawerWidth(), i = Math.min(this.getResizeRailCloseThreshold(), t - 1), s = t - i;
+    return 0.2 + Math.max(0, Math.min((e - i) / s, 1)) * 0.8;
+  }
+  getCurrentDrawerWidth() {
+    var i;
+    const e = this.getAttribute("width") || "320px", t = Number.parseFloat(e);
+    return e.endsWith("px") && Number.isFinite(t) ? t : ((i = this.innerEl) == null ? void 0 : i.getBoundingClientRect().width) || 320;
+  }
+  getResizeRailMaxDrawerWidth() {
+    var r, a;
+    const e = ((r = this.pushLayout) == null ? void 0 : r.getBoundingClientRect().width) || window.innerWidth, t = this.getResizeRailMinDrawerWidth(), i = Math.min(this.getResizeRailMinPageWidth(), e * 0.5), s = ((a = this.resizeRailEl) == null ? void 0 : a.getBoundingClientRect().width) || 0;
+    return Math.max(t, e - i - s);
+  }
+  getWorkspacePanelWidth(e) {
+    const t = this.getWorkspacePanel(e), i = this.getAttribute(`${e}-width`) || (e === "left" ? "28rem" : "32rem"), s = Number.parseFloat(i);
+    return i.endsWith("px") && Number.isFinite(s) ? s : i.endsWith("rem") && Number.isFinite(s) ? s * parseFloat(getComputedStyle(document.documentElement).fontSize) : (t == null ? void 0 : t.getBoundingClientRect().width) || s || g;
+  }
+  getWorkspacePanel(e) {
+    var t;
+    return ((t = this.shadowRoot) == null ? void 0 : t.querySelector(`.workspace-panel-${e}`)) || null;
+  }
+  getWorkspaceResizeRail(e) {
+    var t;
+    return ((t = this.shadowRoot) == null ? void 0 : t.querySelector(`[data-workspace-resize="${e}"]`)) || null;
+  }
+  getFocusedWorkspaceResizeSide() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.activeElement, t = e == null ? void 0 : e.dataset.workspaceResize;
+    return t === "left" || t === "right" ? t : null;
+  }
+  isResizeRailPointerClick(e, t, i) {
+    return Math.abs(i.clientX - e) <= k && Math.abs(i.clientY - t) <= k;
+  }
+  syncWorkspaceResizeCloseOpacity(e, t) {
+    var a;
+    const i = this.getWorkspacePanel(e);
+    if (!i) return;
+    const s = this.getAttribute("variant") || "overlay", r = window.innerWidth <= this.getBreakpoint();
+    if (s !== "workspace" || !this.hasAttribute("resize-rail") || r) {
+      i.style.removeProperty("opacity"), (a = this.getWorkspaceResizeRail(e)) == null || a.classList.remove("threshold");
+      return;
+    }
+    i.style.opacity = this.getResizeCloseOpacity(t).toString();
+  }
+  getWorkspaceMaxPanelWidth(e) {
+    var h;
+    const t = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".workspace-shell"), i = (t == null ? void 0 : t.getBoundingClientRect().width) || window.innerWidth, s = this.getResizeRailMinDrawerWidth(), r = Math.min(this.getResizeRailMinPageWidth(), i * 0.5), a = e === "left" ? "right" : "left", o = this.hasAttribute(`${a}-open`) ? this.getWorkspacePanelWidth(a) : 0, n = this.workspaceResizeRailEls.reduce((d, l) => d + (l.hidden ? 0 : l.getBoundingClientRect().width), 0);
+    return Math.max(s, i - o - r - n);
   }
   syncOpenState() {
-    const t = this.hasAttribute("open"), e = this.getAttribute("variant") || "overlay", i = this.getAttribute("z-index"), o = i ? Number(i) : 10, s = i ? Number(i) + 1 : 11;
-    e === "overlay" && this.overlayEl && (this.overlayEl.style.visibility = t ? "visible" : "hidden", this.overlayEl.style.opacity = t ? "1" : "0", this.overlayEl.style.zIndex = o.toString(), this.innerEl.style.zIndex = s.toString(), this.inert = !t), e === "push" && this.outer && (this.updateLayout(e, t), this.outer.style.zIndex = s.toString(), this.outer.inert = !t), e === "persistent" && this.outer && (this.updateLayout(e, t), this.outer.inert = !1);
+    const e = this.hasAttribute("open"), t = this.getAttribute("variant") || "overlay", i = this.getAttribute("z-index"), s = i ? Number(i) : 10, r = i ? Number(i) + 1 : 11;
+    if (this.classList.contains("no-transition") || [this.outer, this.overlayEl].forEach((a) => {
+      if (a) {
+        a.classList.add("is-animating");
+        let o = !1;
+        const n = () => {
+          o || (o = !0, a.classList.remove("is-animating"));
+        };
+        a.addEventListener("transitionend", n, { once: !0 }), setTimeout(n, 400);
+      }
+    }), t === "overlay" && this.overlayEl && (this.overlayEl.style.visibility = e ? "visible" : "hidden", this.overlayEl.style.opacity = e ? "1" : "0", this.overlayEl.style.zIndex = s.toString(), this.innerEl.style.zIndex = r.toString(), this.inert = !e), t === "push" && this.outer && (this.updateLayout(t, e), this.resizeState || this.syncResizeCloseOpacity(e ? this.getCurrentDrawerWidth() : 0), this.overlayEl && (this.overlayEl.style.zIndex = s.toString()), this.outer.style.zIndex = i ? r.toString() : "", this.style.zIndex = i || "", this.outer.inert = !e, this.resizeRailEl && (this.resizeRailEl.tabIndex = e ? 0 : -1, this.resizeRailEl.setAttribute("aria-hidden", e ? "false" : "true"))), t === "persistent" && this.outer) {
+      const a = this.usesMobileOverlay(t);
+      this.updateLayout(t, this.getLayoutOpenState(t)), this.overlayEl && (this.overlayEl.style.zIndex = s.toString()), this.outer.style.zIndex = a && i ? r.toString() : "", this.style.zIndex = i || "", this.outer.inert = a ? !e : !1, this.resizeRailEl && (this.resizeRailEl.tabIndex = 0, this.resizeRailEl.setAttribute("aria-hidden", "false"));
+    }
+    if (t === "workspace") {
+      if (this.overlayEl) {
+        const o = this.usesMobileOverlay(t) && e;
+        this.overlayEl.style.visibility = o ? "visible" : "hidden", this.overlayEl.style.opacity = o ? "1" : "0", this.overlayEl.style.zIndex = s.toString();
+      }
+      const a = this.usesMobileOverlay(t) && i ? r.toString() : "";
+      [this.getWorkspacePanel("left"), this.getWorkspacePanel("right")].forEach((o) => {
+        o && (o.style.zIndex = a);
+      }), this.style.zIndex = i || "", this.syncWorkspaceState();
+    }
   }
-  updateLayout(t, e) {
-    const i = this.getAttribute("width") || "320px", o = this.getAttribute("side") || this._computedSide, s = t === "push" ? this.pushLayout : t === "persistent" ? this.persistentLayout : null;
-    if (!s) return;
+  updateLayout(e, t) {
+    var o, n;
+    const i = this.getAttribute("width") || "320px", s = this.getAttribute("side") || this._computedSide, r = e === "push" ? this.pushLayout : e === "persistent" ? this.persistentLayout : null;
+    if (!r) return;
     if (window.innerWidth <= this.getBreakpoint()) {
-      t === "push" ? s.style.removeProperty("grid-template-columns") : t === "persistent" && (s.style.display = "grid", s.style.removeProperty("grid-template-columns"));
+      (o = this.outer) == null || o.style.removeProperty("opacity"), (n = this.resizeRailEl) == null || n.classList.remove("threshold"), e === "push" ? r.style.removeProperty("grid-template-columns") : e === "persistent" && (this.getMobilePresentation() === "stack" && (r.style.display = "grid"), r.style.removeProperty("grid-template-columns"));
       return;
     }
-    s.style.display = "grid", t === "push" ? s.style.gridTemplateColumns = o === "left" ? e ? `${i} auto` : "0 auto" : e ? `auto ${i}` : "auto 0" : t === "persistent" && (s.style.gridTemplateColumns = o === "left" ? `${i} auto` : `auto ${i}`);
+    r.style.display = "grid", e === "push" ? this.hasAttribute("resize-rail") ? r.style.gridTemplateColumns = s === "left" ? t ? `${i} var(--drawer-resize-rail-size, var(--space-100)) minmax(0, 1fr)` : "0 0 minmax(0, 1fr)" : t ? `minmax(0, 1fr) var(--drawer-resize-rail-size, var(--space-100)) ${i}` : "minmax(0, 1fr) 0 0" : r.style.gridTemplateColumns = s === "left" ? t ? `${i} auto` : "0 auto" : t ? `auto ${i}` : "auto 0" : e === "persistent" && (this.hasAttribute("resize-rail") ? r.style.gridTemplateColumns = s === "left" ? `${i} var(--drawer-resize-rail-size, var(--space-100)) minmax(0, 1fr)` : `minmax(0, 1fr) var(--drawer-resize-rail-size, var(--space-100)) ${i}` : r.style.gridTemplateColumns = s === "left" ? `${i} auto` : `auto ${i}`);
   }
   open() {
     this.setAttribute("open", ""), this.dispatchEvent(new CustomEvent("mui-drawer-open", { bubbles: !0, composed: !0 }));
@@ -381,4 +1249,4 @@ class u extends HTMLElement {
     this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("mui-drawer-close", { bubbles: !0, composed: !0 }));
   }
 }
-customElements.get("mui-drawer") || customElements.define("mui-drawer", u);
+customElements.get("mui-drawer") || customElements.define("mui-drawer", A);