@lapismd/design-core 0.1.2 → 0.3.0

package/src/shared/shadcn/tooltip/tooltip-content.svelte

@@ -119,14 +119,23 @@
         fill: var(--foreground);
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        padding-inline: calc(var(--spacing) * 3);
+        padding-inline: var(
+          --ui-tooltip-padding-inline,
+          calc(var(--spacing) * 3)
+        );
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        padding-block: calc(var(--spacing) * 1.5);
+        padding-block: var(
+          --ui-tooltip-padding-block,
+          calc(var(--spacing) * 1.5)
+        );
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        font-size: var(--text-xs);
-        line-height: var(--tw-leading, var(--text-xs--line-height));
+        font-size: var(--ui-tooltip-font-size, var(--text-xs));
+        line-height: var(
+          --ui-tooltip-line-height,
+          var(--tw-leading, var(--text-xs--line-height))
+        );
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
         color: var(--ui-tooltip-foreground, var(--background));

package/src/shared/shadcn/tooltip/tooltip.tokens.ts

@@ -4,6 +4,10 @@ export const tooltipTokenNames = {
   borderColor: "--ui-tooltip-border-color",
   radius: "--ui-tooltip-radius",
   focusRingColor: "--ui-tooltip-focus-ring-color",
+  fontSize: "--ui-tooltip-font-size",
+  lineHeight: "--ui-tooltip-line-height",
+  paddingInline: "--ui-tooltip-padding-inline",
+  paddingBlock: "--ui-tooltip-padding-block",
 } as const;
 
 export type TooltipToken =

package/src/shared/shell/app-shell/AppShell.css

@@ -64,6 +64,10 @@
   background: transparent;
 }
 
+.ui-minimal-app-shell__sidebar[hidden] {
+  display: none !important;
+}
+
 .ui-minimal-app-shell__sidebar[data-side="left"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-left-sidebar-width));
 }
@@ -78,12 +82,19 @@
   background: var(--background);
 }
 
+.ui-minimal-app-shell__sidebar[data-variant="rail"][data-presentation="inline"] {
+  margin-block: var(--ui-shell-main-block-inset);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 .ui-minimal-app-shell__sidebar[data-variant="outer"][data-side="left"][data-presentation="inline"] {
   border-inline-end: 1px solid var(--border);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"] {
   position: absolute;
   z-index: 31;
   inset-block: 0;
@@ -92,14 +103,12 @@
     color-mix(in srgb, var(--foreground) 18%, transparent);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="left"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"] {
   inset-inline-start: 0;
   border-inline-end: 1px solid var(--border);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="right"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"] {
   inset-inline-end: 0;
   margin-inline-start: 0;
   border-inline-start: 1px solid var(--border);
@@ -139,24 +148,27 @@
   display: block;
 }
 
-.ui-minimal-app-shell[data-desktop-overlay-right]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-side="right"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]),
-.ui-minimal-app-shell[data-desktop-overlay-left]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-mobile-panel-id="left"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]),
-.ui-minimal-app-shell[data-desktop-overlay-outer-left]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-side="left"][data-variant="outer"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]) {
+.ui-minimal-app-shell__sidebar[data-desktop-constrained][data-constrained-presentation="preview"][data-presentation="inline"] {
   display: none;
 }
 
+.ui-minimal-app-shell__sidebar[data-presentation="replace-main"] {
+  position: absolute;
+  z-index: 31;
+  inset-block-start: var(--ui-shell-replacement-block-start, 0px);
+  inset-block-end: var(--ui-shell-replacement-block-end, 0px);
+  inset-inline-start: var(--ui-shell-replacement-inline-start, 0px);
+  inset-inline-end: var(--ui-shell-replacement-inline-end, 0px);
+  display: flex;
+  width: auto;
+  overflow: hidden;
+  margin: 0;
+  border: var(--ui-shell-main-border);
+  border-radius: var(--ui-shell-main-radius);
+  background: var(--background);
+  box-shadow: none;
+}
+
 .ui-minimal-app-shell__sidebar[data-side="right"][data-state="expanded"] {
   border-inline-start: 1px solid var(--border);
 }
@@ -171,13 +183,11 @@
   min-width: 0;
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="left"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-left-sidebar-width));
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="right"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-right-sidebar-width));
 }
 
@@ -271,6 +281,76 @@
   box-shadow: var(--ui-shell-main-shadow);
 }
 
+.ui-minimal-app-shell__surface-layer {
+  position: absolute;
+  z-index: 32;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.ui-minimal-app-shell__surface-layer-scrim {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-shell-main-radius);
+  background: color-mix(in oklab, var(--background) 75%, transparent);
+  pointer-events: auto;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.ui-minimal-app-shell__surface-layer-scrim:hover {
+  background: color-mix(in oklab, var(--background) 65%, transparent);
+}
+
+.ui-minimal-app-shell__surface-layer-surface {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--ui-shell-surface-layer-main-start-allowance);
+  inset-inline-end: var(--ui-shell-surface-layer-inline-end-inset);
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  grid-template-rows: auto minmax(0, 1fr);
+  border: var(--ui-shell-main-border);
+  border-radius: var(--ui-shell-main-radius);
+  outline: none;
+  background: var(--background);
+  box-shadow: none;
+  pointer-events: auto;
+}
+
+.ui-minimal-app-shell__surface-layer-surface:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.ui-minimal-app-shell__surface-layer-header {
+  display: flex;
+  min-width: 0;
+  min-height: var(--ui-shell-toolbar-height);
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+}
+
+.ui-minimal-app-shell__surface-layer-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-minimal-app-shell__surface-layer-scroll-area {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
 .ui-minimal-app-shell[data-display-mode="desktop"] .ui-minimal-app-shell__main {
   min-width: min(100%, var(--ui-shell-desktop-min-main-width));
 }
@@ -301,12 +381,6 @@
   margin-inline-end: var(--ui-shell-main-block-inset);
 }
 
-.ui-minimal-app-shell[data-desktop-overlay-right]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__main {
-  margin-inline-end: var(--ui-shell-main-block-inset);
-}
-
 .ui-minimal-app-shell__toolbar {
   display: flex;
   flex: none;
@@ -445,7 +519,8 @@
   height: 100%;
   min-width: 0;
   min-height: 0;
-  overflow: hidden;
+  /* Stage position belongs to the translated track, not focus scrolling. */
+  overflow: clip;
 }
 
 .ui-minimal-app-shell__mobile-track {

package/src/shared/shell/app-shell/AppShellBody.svelte

@@ -13,12 +13,19 @@
     ref = $bindable(null),
     label,
     layout = "scroll",
+    element = "main",
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLElement>> & {
     /** Optional accessible name when a page contains multiple main landmarks. */
     label?: string;
+    /**
+     * Semantic element used for the body landmark. Keep the default `main` for
+     * primary pages and use `section`/`div` when composing an embedded shell
+     * body inside another page landmark.
+     */
+    element?: "main" | "section" | "div";
     /**
      * `scroll` gives the whole body one Scroll Area. `regions` lets nested
      * `Body.Sidebar` and `Body.Content` parts scroll independently.
@@ -53,7 +60,8 @@
   });
 </script>
 
-<main
+<svelte:element
+  this={element}
   bind:this={ref}
   {...restProps}
   class={["ui-minimal-app-shell__body", className].filter(Boolean).join(" ")}
@@ -69,4 +77,4 @@
       {@render children?.()}
     </ScrollArea>
   {/if}
-</main>
+</svelte:element>

package/src/shared/shell/app-shell/AppShellMain.svelte

@@ -8,15 +8,24 @@
   let {
     ref = $bindable(null),
     tabindex: _tabindex,
+    inert: inertProp,
+    "aria-hidden": ariaHidden,
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
   const controller = useAppShell();
+  let mainOccluded = $state(controller.mainOccluded);
+  const unsubscribeProjection = controller.onProjectionChange(() => {
+    mainOccluded = controller.mainOccluded;
+  });
 
   $effect(() => controller.mobile.setMainElement(ref));
-  onDestroy(() => controller.mobile.setMainElement(null));
+  onDestroy(() => {
+    unsubscribeProjection();
+    controller.mobile.setMainElement(null);
+  });
 </script>
 
 <div
@@ -30,6 +39,8 @@
   class={["ui-minimal-app-shell__main", className].filter(Boolean).join(" ")}
   data-ui-component="app-shell"
   data-ui-part="main"
+  inert={Boolean(inertProp) || mainOccluded}
+  aria-hidden={Boolean(inertProp) || mainOccluded ? "true" : ariaHidden}
 >
   {@render children?.()}
 </div>

package/src/shared/shell/app-shell/AppShellRoot.svelte

@@ -64,6 +64,10 @@
   let dragOffset = $state<number | null>(null);
   let measuredPanelWidth = $state(0);
   let measuredDesktopMinMainWidth = $state(576);
+  let projectionVersion = $state(0);
+  const unsubscribeProjection = rootController.onProjectionChange(() => {
+    projectionVersion += 1;
+  });
   let rootStyle = $derived(
     [
       style,
@@ -93,6 +97,7 @@
     rootController.mobile.panelsFor("right").length > 0,
   );
   let constrainedDesktopPanelIds = $derived.by(() => {
+    void projectionVersion;
     if (resolvedMode !== "desktop" || !Number.isFinite(observedWidth)) {
       return [] as string[];
     }
@@ -101,7 +106,7 @@
       desktopMinMainWidth ?? measuredDesktopMinMainWidth,
     );
     if (minimumMainWidth === 0) return [] as string[];
-    const candidates = [
+    const registeredPanels = [
       ...rootController.mobile
         .panelsFor("right")
         .filter((panel) => panel.kind === "sidebar"),
@@ -111,18 +116,33 @@
       ...rootController.mobile
         .panelsFor("left")
         .filter((panel) => panel.kind === "sidebar" && panel.id === "left"),
-    ].flatMap((panel) => {
+    ];
+    const candidates = registeredPanels.flatMap((panel, order) => {
       const sidebar = rootController.getPanel(panel.id);
-      if (!sidebar || sidebar.closed) return [];
+      if (
+        !sidebar ||
+        sidebar.closed ||
+        rootController.isPanelSuspended(panel.id)
+      ) {
+        return [];
+      }
       return [
         {
           id: panel.id,
+          order,
+          priority: Number.isFinite(panel.constraintPriority)
+            ? (panel.constraintPriority ?? order)
+            : order,
           width: sidebar.collapsed
             ? 48
             : (sidebar.width ?? APP_SHELL_DEFAULT_SIDEBAR_WIDTH),
         },
       ];
     });
+    candidates.sort(
+      (left, right) =>
+        left.priority - right.priority || left.order - right.order,
+    );
     let occupiedWidth = candidates.reduce(
       (total, candidate) => total + candidate.width,
       minimumMainWidth + 16,
@@ -139,16 +159,8 @@
   $effect(() => rootController.mobile.setResolvedMode(resolvedMode));
   $effect(() => {
     const panelIds = constrainedDesktopPanelIds;
-    queueMicrotask(() => {
-      for (const sidebar of ref?.querySelectorAll<HTMLElement>(
-        '[data-ui-part="sidebar"][data-desktop-overlay-preview]',
-      ) ?? []) {
-        const panelId = sidebar.dataset.mobilePanelId;
-        if (!panelId || !panelIds.includes(panelId)) {
-          sidebar.removeAttribute("data-desktop-overlay-preview");
-        }
-      }
-    });
+    untrack(() => rootController.setConstrainedPanelIds(panelIds));
+    untrack(() => rootController.syncPanelProjections());
   });
   $effect(() => rootController.mobile.setRootElement(ref));
   $effect(() => rootController.mobile.setPanelHost("left", leftPanelHost));
@@ -175,11 +187,13 @@
   });
 
   onDestroy(() => {
+    unsubscribeProjection();
     clearGesture();
     rootController.mobile.setRootElement(null);
     rootController.mobile.setPanelHost("left", null);
     rootController.mobile.setMainHost(null);
     rootController.mobile.setPanelHost("right", null);
+    rootController.setConstrainedPanelIds([]);
     void rootController.flushSave();
   });
 
@@ -463,10 +477,7 @@
     class="ui-minimal-app-shell__mobile-stage"
     data-ui-component="app-shell"
     data-ui-part="mobile-stage"
-    role={resolvedMode === "mobile" ? "group" : undefined}
-    aria-label={resolvedMode === "mobile"
-      ? "Mobile application shell"
-      : undefined}
+    role="presentation"
     style:touch-action={stageDragging ? "none" : "pan-y"}
     onpointerdown={handlePointerDown}
     onpointermove={handlePointerMove}

package/src/shared/shell/app-shell/AppShellSidebar.svelte

@@ -22,11 +22,16 @@
     resizable = true,
     closeable = false,
     variant = "default",
+    constraintPriority,
+    constrainedPresentation = "preview",
     revealOnEdgeHover = false,
     edgeRevealLabel,
     resizeLabel,
     mobileLabel,
     tabindex: _tabindex,
+    hidden: hiddenProp,
+    inert: inertProp,
+    "aria-hidden": ariaHidden,
     style,
     class: className,
     children,
@@ -43,7 +48,11 @@
     /** Whether nested `AppShell.Sidebar.Close` actions may close this sidebar. */
     closeable?: boolean;
     /** Full-height outer chrome or the default transparent shell sidebar. */
-    variant?: "default" | "outer";
+    variant?: "default" | "outer" | "rail";
+    /** Lower values leave inline desktop flow before higher values. */
+    constraintPriority?: number;
+    /** Presentation used when protected main width displaces this panel. */
+    constrainedPresentation?: "preview" | "replace-main";
     /** Preview a collapsed or closed sidebar from the corresponding page edge. */
     revealOnEdgeHover?: boolean;
     /** Accessible name for the collapsed/closed edge-preview control. */
@@ -79,6 +88,7 @@
     get controller() {
       return sidebar;
     },
+    syncLayout,
     dismissOverlay,
   });
   let renderedWidth = $state(APP_SHELL_DEFAULT_SIDEBAR_WIDTH);
@@ -99,6 +109,18 @@
       (side === "left" ? "Preview left sidebar" : "Preview right sidebar"),
   );
   let mobilePanelId = $derived(controller.getPanelId(sidebar));
+  let desktopConstrained = $state(false);
+  let desktopPreviewed = $state(false);
+  let suspended = $state(false);
+  let covered = $state(false);
+  function syncProjection(): void {
+    desktopConstrained = controller.isPanelConstrained(mobilePanelId);
+    desktopPreviewed = controller.isPanelDesktopPreviewed(mobilePanelId);
+    suspended = controller.isPanelSuspended(mobilePanelId);
+    covered = controller.isPanelCovered(mobilePanelId);
+  }
+  syncProjection();
+  const unsubscribeProjection = controller.onProjectionChange(syncProjection);
   let mobileMode = $derived(controller.mobile.resolvedMode === "mobile");
   let mobileActive = $derived(
     !mobileMode ||
@@ -106,13 +128,15 @@
         controller.mobile.activePanelId(side) === mobilePanelId),
   );
   let presentation = $derived(
-    mobileMode ? "mobile" : sidebar.previewed ? "overlay" : "inline",
-  );
-  let renderSidebar = $derived(
     mobileMode
-      ? mobilePanelId !== undefined
-      : !sidebarClosed || sidebar.previewed,
+      ? "mobile"
+      : sidebar.previewed || desktopPreviewed
+        ? "overlay"
+        : desktopConstrained && constrainedPresentation === "replace-main"
+          ? "replace-main"
+          : "inline",
   );
+  let renderSidebar = $derived(mobileMode ? mobilePanelId !== undefined : true);
   let preserveCollapsedRail = $derived(
     !mobileMode && !sidebarClosed && sidebarCollapsed && sidebar.previewed,
   );
@@ -147,10 +171,78 @@
       get element() {
         return ref;
       },
+      ...(constraintPriority === undefined ? {} : { constraintPriority }),
+      constrainedPresentation,
     };
     return untrack(() => controller.mobile.registerPanel(registration));
   });
 
+  $effect(() => {
+    const panelId = mobilePanelId;
+    const element = ref;
+    untrack(() => controller.setPanelElement(panelId, element));
+    return () => untrack(() => controller.setPanelElement(panelId, null));
+  });
+
+  $effect(() => {
+    const element = ref;
+    const root = controller.mobile.getRootElement();
+    const main = controller.mobile.getMainElement();
+    if (
+      presentation !== "replace-main" ||
+      !element ||
+      !root ||
+      !main ||
+      typeof ResizeObserver === "undefined"
+    ) {
+      return;
+    }
+
+    const updateInsets = () => {
+      const rootBounds = root.getBoundingClientRect();
+      const mainBounds = main.getBoundingClientRect();
+      const paddingLeft = rootBounds.left + root.clientLeft;
+      const paddingRight = paddingLeft + root.clientWidth;
+      const paddingTop = rootBounds.top + root.clientTop;
+      const paddingBottom = paddingTop + root.clientHeight;
+      const rtl = getComputedStyle(root).direction === "rtl";
+      const inlineStart = rtl
+        ? paddingRight - mainBounds.right
+        : mainBounds.left - paddingLeft;
+      const inlineEnd = rtl
+        ? mainBounds.left - paddingLeft
+        : paddingRight - mainBounds.right;
+      element.style.setProperty(
+        "--ui-shell-replacement-inline-start",
+        `${Math.max(0, inlineStart)}px`,
+      );
+      element.style.setProperty(
+        "--ui-shell-replacement-inline-end",
+        `${Math.max(0, inlineEnd)}px`,
+      );
+      element.style.setProperty(
+        "--ui-shell-replacement-block-start",
+        `${Math.max(0, mainBounds.top - paddingTop)}px`,
+      );
+      element.style.setProperty(
+        "--ui-shell-replacement-block-end",
+        `${Math.max(0, paddingBottom - mainBounds.bottom)}px`,
+      );
+    };
+    let frame = requestAnimationFrame(updateInsets);
+    const scheduleUpdate = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(updateInsets);
+    };
+    const observer = new ResizeObserver(scheduleUpdate);
+    observer.observe(root);
+    observer.observe(main);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  });
+
   $effect(() => {
     const sidebarElement = ref;
     if (!sidebarElement) return;
@@ -227,8 +319,12 @@
 
   onDestroy(() => {
     unsubscribeLayout();
+    unsubscribeProjection();
     stopResize();
     sidebar.dismissPreview();
+    controller.setPanelElement(mobilePanelId, null);
+    if (mobilePanelId)
+      controller.setPanelDesktopPreviewed(mobilePanelId, false);
   });
 
   function revealFromEdge(element?: Element | null): void {
@@ -239,7 +335,9 @@
       return;
     }
     if (isDesktopOverlayOnly(element)) {
-      ref?.setAttribute("data-desktop-overlay-preview", "");
+      if (mobilePanelId) {
+        controller.setPanelDesktopPreviewed(mobilePanelId, true);
+      }
       queueMicrotask(() => ref?.focus({ preventScroll: true }));
       return;
     }
@@ -247,18 +345,14 @@
   }
 
   function isDesktopOverlayOnly(element?: Element | null): boolean {
-    if (!mobilePanelId) return false;
-    return (
-      (element ?? ref)
-        ?.closest("[data-shell-root]")
-        ?.getAttribute("data-desktop-overlay-panels")
-        ?.split(/\s+/)
-        .includes(mobilePanelId) ?? false
-    );
+    void element;
+    return desktopConstrained && constrainedPresentation === "preview";
   }
 
   function dismissOverlay(): void {
     sidebar.dismissPreview();
+    if (mobilePanelId)
+      controller.setPanelDesktopPreviewed(mobilePanelId, false);
   }
 
   function keepOverlay(): void {
@@ -412,7 +506,9 @@
     onblur={handleOverlayBlur}
     onclick={(event) => {
       if (isDesktopOverlayOnly(event.currentTarget)) {
-        ref?.setAttribute("data-desktop-overlay-preview", "");
+        if (mobilePanelId) {
+          controller.setPanelDesktopPreviewed(mobilePanelId, true);
+        }
         queueMicrotask(() => ref?.focus({ preventScroll: true }));
       } else sidebar.toggle();
     }}
@@ -448,15 +544,21 @@
     data-state={sidebarState}
     data-variant={variant}
     data-presentation={presentation}
+    data-desktop-constrained={desktopConstrained || undefined}
+    data-constrained-presentation={constrainedPresentation}
     data-collapsed={sidebarCollapsed || undefined}
     data-closeable={closeable || undefined}
     data-previewed={sidebar.previewed || undefined}
     data-mobile-panel-id={mobilePanelId}
     data-mobile-panel-active={mobileActive || undefined}
     data-resizing={resizing || undefined}
+    data-consumer-hidden={Boolean(hiddenProp) || undefined}
+    data-consumer-inert={Boolean(inertProp) || undefined}
+    data-consumer-aria-hidden={ariaHidden}
     aria-label={accessibleLabel}
-    aria-hidden={mobileMode && !mobileActive}
-    inert={mobileMode && !mobileActive}
+    hidden={Boolean(hiddenProp) || suspended}
+    aria-hidden={(mobileMode && !mobileActive) || covered ? "true" : ariaHidden}
+    inert={Boolean(inertProp) || (mobileMode && !mobileActive) || covered}
     onmouseenter={keepOverlay}
     onmouseleave={presentation === "overlay"
       ? handleOverlayPointerLeave
@@ -465,7 +567,7 @@
     onfocusout={presentation === "overlay" ? handleOverlayBlur : undefined}
   >
     {@render children?.()}
-    {#if !mobileMode && resizable && (!sidebarCollapsed || presentation === "overlay")}
+    {#if !mobileMode && resizable && presentation !== "replace-main" && (!sidebarCollapsed || presentation === "overlay")}
       <div
         role="slider"
         tabindex="0"

package/src/shared/shell/app-shell/AppShellSidebarBody.svelte

@@ -8,8 +8,12 @@
     ref = $bindable(null),
     class: className,
     children,
+    scrollable = true,
     ...restProps
-  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /** Disable the shell viewport when a bounded child owns scrolling. */
+    scrollable?: boolean;
+  } = $props();
 
   useAppShell();
 </script>
@@ -23,7 +27,10 @@
   data-ui-component="app-shell"
   data-ui-part="sidebar-body"
 >
-  <ScrollArea type="auto" class="ui-minimal-app-shell__sidebar-scroll-area">
-    {@render children?.()}
-  </ScrollArea>
+  {#if scrollable}<ScrollArea
+      type="auto"
+      class="ui-minimal-app-shell__sidebar-scroll-area"
+    >
+      {@render children?.()}
+    </ScrollArea>{:else}{@render children?.()}{/if}
 </div>