@mario_hahn/jumpy-ui 0.10.0 → 0.11.0

package/README.md

@@ -211,7 +211,7 @@ Jumpy Components als ein gemeinsames UI-Paket.
 Starting with 0.5.0, Jumpy UI uses the public npmjs registry. No package token is required to install:
 
 ```bash
-npm install @mario_hahn/jumpy-ui@^0.10.0
+npm install @mario_hahn/jumpy-ui@^0.11.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases
@@ -324,6 +324,10 @@ import { JumpAppShell, JumpSideMenu, JumpSideMenuItem, JumpTabBar, JumpTabBarIte
 - `topBar.leading` defaults to `'menu'` when `navigation` exists; `'back'` calls
   `onBack`. `topBar.title` falls back to `brand`. `topBar.desktop` keeps the bar on
   desktop (without the menu button). `topBar={null}` removes it.
+- `topBar.largeTitle` (0.11.0+) renders `title`/`subtitle` as a large page `h1`; on
+  mobile the bar stays empty and blends into the page until that heading scrolls under
+  it, then shows a compact centered title. Set `--jumpy-app-shell-gutter` to match your
+  content padding. Do not render a second page heading yourself.
 - `JumpTopBar` and `JumpTabBar` also work standalone. Both are sticky and include
   safe-area insets. `JumpTabBarItem` accepts `as` (e.g. Next `Link`), `href`, `icon`,
   numeric or custom `badge` and `selected` (`aria-current="page"`).

package/dist/{chunk-LORNGSIB.js → chunk-V3XYXQPA.js}

@@ -9945,7 +9945,8 @@ var providerStyles = `
 }
 
 /* An icon SVG fills the leading slot: otherwise a 20px icon is squeezed to the slot width but keeps its height and drops below the label. */
-[data-jumpy-theme='true'] :is([data-jumpy-component='list-item'], [data-jumpy-component='menu-item'], [data-jumpy-component='side-menu-item']) > [data-jumpy-slot='leading'] > svg {
+[data-jumpy-theme='true'] :is([data-jumpy-component='list-item'], [data-jumpy-component='menu-item'], [data-jumpy-component='side-menu-item']) > [data-jumpy-slot='leading'] > svg,
+[data-jumpy-theme='true'] [data-jumpy-component='tab-bar-item'] > [data-jumpy-slot='tab-bar-item-icon'] > svg {
   width: 100%;
   height: 100%;
   flex: none;
@@ -11869,6 +11870,19 @@ var providerStyles = `
   box-shadow: var(--jumpy-shadow-positive-small);
 }
 
+[data-jumpy-theme='true'] [data-jumpy-component='top-bar'] > [data-jumpy-slot='top-bar-title'] {
+  transition: opacity var(--jumpy-animation-duration-xsmall) var(--jumpy-animation-easing-drift);
+}
+
+/* Large-title mode: until the page title scrolls under it, the bar blends into the page (iOS). */
+[data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-large-title='true'][data-title-hidden='true'] {
+  background-color: var(--jumpy-color-surface-canvas);
+  border-bottom-color: transparent;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='tab-bar-item'] {
   transition: background-color var(--jumpy-animation-duration-xsmall) var(--jumpy-animation-easing-drift), color var(--jumpy-animation-duration-xsmall) var(--jumpy-animation-easing-drift);
   -webkit-tap-highlight-color: transparent;
@@ -11887,13 +11901,43 @@ var providerStyles = `
   animation: jumpy-app-shell-drawer-in var(--jumpy-animation-duration-small) var(--jumpy-animation-easing-drift);
 }
 
+[data-jumpy-theme='true'] [data-jumpy-component='app-shell-drawer'][data-state='closing'] {
+  animation: jumpy-app-shell-drawer-out var(--jumpy-animation-duration-small) var(--jumpy-animation-easing-release) forwards;
+  pointer-events: none;
+}
+
+[data-jumpy-theme='true'] [data-jumpy-component='app-shell-drawer-overlay'] {
+  animation: jumpy-app-shell-overlay-in var(--jumpy-animation-duration-small) var(--jumpy-animation-easing-drift);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-component='app-shell-drawer-overlay'][data-state='closing'] {
+  animation: jumpy-app-shell-overlay-out var(--jumpy-animation-duration-small) var(--jumpy-animation-easing-release) forwards;
+  pointer-events: none;
+}
+
 @keyframes jumpy-app-shell-drawer-in {
   from { transform: translateX(-100%); }
   to { transform: translateX(0); }
 }
 
+@keyframes jumpy-app-shell-drawer-out {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+@keyframes jumpy-app-shell-overlay-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes jumpy-app-shell-overlay-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  [data-jumpy-theme='true'] [data-jumpy-component='app-shell-drawer'] {
+  [data-jumpy-theme='true'] [data-jumpy-component='app-shell-drawer'],
+  [data-jumpy-theme='true'] [data-jumpy-component='app-shell-drawer-overlay'] {
     animation: none;
   }
 }

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-LORNGSIB.js";
+} from "./chunk-V3XYXQPA.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -2416,7 +2416,7 @@ function JumpyNavigationIcon({ type }) {
   };
   return /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", "data-jumpy-stroke-icon": "true", style: { display: "block" }, children: /* @__PURE__ */ jsx2("path", { d: paths[type] }) });
 }
-function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle, trailing, sticky = true, ariaLabels = {}, className = "", ...props }) {
+function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle, trailing, sticky = true, titleAlign = "start", titleHidden = false, ariaLabels = {}, className = "", ...props }) {
   const theme = useJumpyTheme();
   const [scrolled, setScrolled] = useState2(false);
   const titleStyle = textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized);
@@ -2437,6 +2437,8 @@ function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle
       "data-jumpy-component": "top-bar",
       "data-sticky": sticky ? "true" : "false",
       "data-scrolled": scrolled ? "true" : "false",
+      "data-title-align": titleAlign,
+      "data-title-hidden": titleHidden ? "true" : "false",
       className: cn(className),
       style: {
         boxSizing: "border-box",
@@ -2453,11 +2455,25 @@ function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle
       },
       children: [
         leadingNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-leading", "data-leading": leadingType, style: { marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: leadingNode }) : null,
-        /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "top-bar-title", style: { display: "flex", flexDirection: "column", flex: "1 1 auto", minWidth: 0 }, children: [
-          title ? /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: titleStyle.fontSize, lineHeight: titleStyle.lineHeight, fontWeight: titleStyle.fontWeight }, children: title }) : null,
-          subtitle ? /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--jumpy-color-text-secondary)", fontSize: subtitleStyle.fontSize, lineHeight: subtitleStyle.lineHeight }, children: subtitle }) : null
+        /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "top-bar-title", "aria-hidden": titleHidden || void 0, style: titleAlign === "center" ? {
+          position: "absolute",
+          left: `calc(${sizeValue(theme, JumpySize.largeXL) + spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`,
+          right: `calc(${sizeValue(theme, JumpySize.largeXL) + spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px))`,
+          top: "env(safe-area-inset-top, 0px)",
+          bottom: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          minWidth: 0,
+          pointerEvents: "none",
+          opacity: titleHidden ? 0 : 1
+        } : { display: "flex", flexDirection: "column", flex: "1 1 auto", minWidth: 0, opacity: titleHidden ? 0 : 1 }, children: [
+          title ? /* @__PURE__ */ jsx2("span", { style: { maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: titleStyle.fontSize, lineHeight: titleStyle.lineHeight, fontWeight: titleStyle.fontWeight }, children: title }) : null,
+          subtitle ? /* @__PURE__ */ jsx2("span", { style: { maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--jumpy-color-text-secondary)", fontSize: subtitleStyle.fontSize, lineHeight: subtitleStyle.lineHeight }, children: subtitle }) : null
         ] }),
-        trailing ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-trailing", style: { display: "inline-flex", flex: "0 0 auto", alignItems: "center", gap: spacingValue(theme, JumpySpacing.smallXS) }, children: trailing }) : null
+        trailing ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-trailing", style: { display: "inline-flex", flex: "0 0 auto", marginLeft: "auto", alignItems: "center", gap: spacingValue(theme, JumpySpacing.smallXS) }, children: trailing }) : null
       ]
     }
   );
@@ -2504,7 +2520,7 @@ function JumpTabBar({ children, className = "", "aria-label": ariaLabel = "Main
 function JumpTabBarItem({ as, icon, badge, selected = false, children, className = "", ...props }) {
   const theme = useJumpyTheme();
   const Component = as || (props.href ? "a" : "button");
-  const labelStyle = textStyleValue(theme, JumpyTextStyle.labelSmallEmphasized);
+  const labelStyle = textStyleValue(theme, JumpyTextStyle.labelSmall);
   const badgeNode = typeof badge === "number" ? badge > 0 ? /* @__PURE__ */ jsx2(JumpBadge, { size: "small", status: "active", "aria-label": void 0, role: "presentation", "aria-live": "off", children: badge > 99 ? "99+" : badge }) : null : badge;
   return /* @__PURE__ */ jsxs2(
     Component,
@@ -2539,7 +2555,7 @@ function JumpTabBarItem({ as, icon, badge, selected = false, children, className
         ...props.style || {}
       },
       children: [
-        icon ? /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "tab-bar-item-icon", "aria-hidden": "true", style: { position: "relative", display: "inline-flex", width: sizeValue(theme, JumpySize.small2XS), height: sizeValue(theme, JumpySize.small2XS) }, children: [
+        icon ? /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "tab-bar-item-icon", "aria-hidden": "true", style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: sizeValue(theme, JumpySize.smallXS), height: sizeValue(theme, JumpySize.smallXS) }, children: [
           icon,
           badgeNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "tab-bar-item-badge", style: { position: "absolute", top: -spacingValue(theme, JumpySpacing.smallXS), left: "50%", marginLeft: spacingValue(theme, JumpySpacing.small3XS), display: "inline-flex" }, children: badgeNode }) : null
         ] }) : null,
@@ -2555,8 +2571,14 @@ function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTa
   const isOpen = Boolean(navigation) && (navigationOpen ?? internalOpen);
   const swipeStart = useRef2(null);
   const rootRef = useRef2(null);
-  const wasOpen = useRef2(isOpen);
-  const { desktop: topBarOnDesktop = false, leading, ...topBarProps } = topBar || {};
+  const [drawerMounted, setDrawerMounted] = useState2(isOpen);
+  const showDrawer = isOpen || drawerMounted;
+  const closing = drawerMounted && !isOpen;
+  const wasShown = useRef2(showDrawer);
+  const { desktop: topBarOnDesktop = false, leading, largeTitle = false, ...topBarProps } = topBar || {};
+  const showLargeTitle = largeTitle && Boolean(topBarProps.title);
+  const largeTitleRef = useRef2(null);
+  const [largeTitleCovered, setLargeTitleCovered] = useState2(false);
   const resolvedLeading = leading ?? (navigation ? "menu" : void 0);
   const shell = `[data-jumpy-app-shell="${shellId}"]`;
   const width = typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
@@ -2575,15 +2597,37 @@ function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTa
     return () => desktop.removeEventListener("change", closeOnDesktop);
   });
   useEffect2(() => {
-    const closed = wasOpen.current && !isOpen;
-    wasOpen.current = isOpen;
+    if (isOpen) {
+      setDrawerMounted(true);
+      return void 0;
+    }
+    if (!drawerMounted) return void 0;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDrawerMounted(false);
+      return void 0;
+    }
+    const timer = window.setTimeout(() => setDrawerMounted(false), animationDurationValue(theme, JumpyAnimationDuration.small) * 1e3 + 100);
+    return () => window.clearTimeout(timer);
+  }, [isOpen, drawerMounted]);
+  useEffect2(() => {
+    const closed = wasShown.current && !showDrawer;
+    wasShown.current = showDrawer;
     if (!closed) return void 0;
     const frame = window.requestAnimationFrame(() => {
       if (document.activeElement && document.activeElement !== document.body) return;
       rootRef.current?.querySelector(':scope > [data-jumpy-slot="app-shell-body"] > [data-jumpy-component="top-bar"] > [data-leading="menu"] button')?.focus();
     });
     return () => window.cancelAnimationFrame(frame);
-  }, [isOpen]);
+  }, [showDrawer]);
+  useEffect2(() => {
+    const element = largeTitleRef.current;
+    if (!showLargeTitle || !element || typeof IntersectionObserver === "undefined") return void 0;
+    const bar = rootRef.current?.querySelector(':scope > [data-jumpy-slot="app-shell-body"] > [data-jumpy-component="top-bar"]');
+    const barHeight = bar && bar.getBoundingClientRect().height > 0 ? bar.getBoundingClientRect().height : 0;
+    const observer = new IntersectionObserver(([entry]) => setLargeTitleCovered(!entry.isIntersecting), { rootMargin: `-${Math.round(barHeight)}px 0px 0px 0px` });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [showLargeTitle, topBarProps.title]);
   function closeOnNavigate(event) {
     const item = event.target.closest?.('a[href], [data-jumpy-component="side-menu-item"]');
     if (!item || item.hasAttribute("aria-expanded") || item.getAttribute("aria-disabled") === "true" || item.disabled) return;
@@ -2608,6 +2652,10 @@ ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
       menuOpen: isOpen,
       onMenu: () => setOpen(true),
       title: topBarProps.title ?? brand,
+      subtitle: showLargeTitle ? void 0 : topBarProps.subtitle,
+      titleAlign: showLargeTitle ? "center" : topBarProps.titleAlign,
+      titleHidden: showLargeTitle ? !largeTitleCovered : topBarProps.titleHidden,
+      "data-large-title": showLargeTitle ? "true" : void 0,
       ariaLabels: { menu: ariaLabels.openNavigation, back: ariaLabels.back, ...topBarProps.ariaLabels || {} }
     }
   );
@@ -2641,29 +2689,39 @@ ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
               top: 0,
               height: "100dvh",
               flexDirection: "column",
-              overflowY: "auto",
+              overflow: "hidden",
               borderRight: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)`,
               backgroundColor: "var(--jumpy-color-surface-card)"
             },
             children: [
-              brand ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-brand", style: { padding: spacingValue(theme, JumpySpacing.large2XL), borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: brand }) : null,
-              navigation ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-navigation", style: { flex: 1, padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }) : null,
-              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-sidebar-footer", style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
+              brand ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-brand", style: { flex: "0 0 auto", padding: spacingValue(theme, JumpySpacing.large2XL), borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: brand }) : null,
+              navigation ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-navigation", style: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }) : null,
+              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-sidebar-footer", style: { flex: "0 0 auto", padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
             ]
           }
         ),
         /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-body", style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: "100dvh" }, children: [
           topBar !== null ? topBarNode : null,
-          /* @__PURE__ */ jsx2("main", { "data-jumpy-slot": "app-shell-content", style: { flex: 1, minWidth: 0 }, children }),
+          /* @__PURE__ */ jsxs2("main", { "data-jumpy-slot": "app-shell-content", style: { flex: 1, minWidth: 0 }, children: [
+            showLargeTitle ? /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-large-title", style: { padding: `${spacingValue(theme, JumpySpacing.smallXS)}px calc(var(--jumpy-app-shell-gutter, ${spacingValue(theme, JumpySpacing.large)}px) + env(safe-area-inset-right, 0px)) 0 calc(var(--jumpy-app-shell-gutter, ${spacingValue(theme, JumpySpacing.large)}px) + env(safe-area-inset-left, 0px))` }, children: [
+              /* @__PURE__ */ jsx2("h1", { ref: largeTitleRef, style: { margin: 0, ...textStyleValue(theme, JumpyTextStyle.displaySmallEmphasized), overflowWrap: "anywhere" }, children: topBarProps.title }),
+              topBarProps.subtitle ? /* @__PURE__ */ jsx2("p", { style: { margin: `${spacingValue(theme, JumpySpacing.small4XS)}px 0 0`, color: "var(--jumpy-color-text-secondary)", ...textStyleValue(theme, JumpyTextStyle.bodyMedium) }, children: topBarProps.subtitle }) : null
+            ] }) : null,
+            children
+          ] }),
           tabBar && !hideTabBar ? tabBar : null
         ] }),
-        isOpen ? /* @__PURE__ */ jsx2(JumpyModalLayer, { onVisibleChange: setOpen, "data-jumpy-component": "app-shell-drawer-overlay", style: { position: "fixed", inset: 0, zIndex: 60, backgroundColor: "var(--jumpy-color-surface-overlay)" }, children: /* @__PURE__ */ jsxs2(
+        showDrawer ? /* @__PURE__ */ jsx2(JumpyModalLayer, { onVisibleChange: setOpen, "data-jumpy-component": "app-shell-drawer-overlay", "data-state": closing ? "closing" : "open", style: { position: "fixed", inset: 0, zIndex: 60, backgroundColor: "var(--jumpy-color-surface-overlay)" }, children: /* @__PURE__ */ jsxs2(
           "div",
           {
             role: "dialog",
             "aria-modal": "true",
             "aria-label": ariaLabels.navigation || "Navigation",
             "data-jumpy-component": "app-shell-drawer",
+            "data-state": closing ? "closing" : "open",
+            onAnimationEnd: (event) => {
+              if (closing && event.target === event.currentTarget) setDrawerMounted(false);
+            },
             onClick: closeOnNavigate,
             onTouchStart: (event) => {
               const touch = event.touches[0];
@@ -2686,20 +2744,25 @@ ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
               flexDirection: "column",
               width: "100vw",
               height: "100dvh",
-              overflowY: "auto",
+              overflow: "hidden",
               outline: "none",
               backgroundColor: "var(--jumpy-color-surface-card)",
               color: "var(--jumpy-color-text-primary)",
-              fontFamily: theme.fontFamily.familyBase,
-              paddingBottom: "env(safe-area-inset-bottom, 0px)"
+              fontFamily: theme.fontFamily.familyBase
             },
             children: [
-              /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-drawer-header", style: { boxSizing: "border-box", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", alignItems: "center", gap: spacingValue(theme, JumpySpacing.medium), minHeight: `calc(${sizeValue(theme, JumpySize.large2XL)}px + env(safe-area-inset-top, 0px))`, padding: `calc(${spacingValue(theme, JumpySpacing.smallXS)}px + env(safe-area-inset-top, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px)) ${spacingValue(theme, JumpySpacing.smallXS)}px calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`, borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: [
-                /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.closeNavigation || "Close navigation", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "close" }) }) }),
-                /* @__PURE__ */ jsx2("span", { style: { minWidth: 0 }, children: brand })
-              ] }),
-              /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-navigation", style: { flex: 1, padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }),
-              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-footer", style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
+              /* @__PURE__ */ jsx2(
+                JumpTopBar,
+                {
+                  "data-jumpy-slot": "app-shell-drawer-header",
+                  sticky: false,
+                  style: { flex: "0 0 auto" },
+                  leading: /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.closeNavigation || "Close navigation", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "close" }) }),
+                  title: brand
+                }
+              ),
+              /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-navigation", style: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }),
+              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-footer", style: { flex: "0 0 auto", padding: `${spacingValue(theme, JumpySpacing.large)}px calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-bottom, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`, borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)`, backgroundColor: "var(--jumpy-color-surface-card)" }, children: sidebarFooter }) : null
             ]
           }
         ) }) : null

package/dist/theme.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-LORNGSIB.js";
+} from "./chunk-V3XYXQPA.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,

package/index.d.ts

@@ -111,12 +111,12 @@ export declare function JumpTableCell(props: Omit<TdHTMLAttributes<HTMLTableCell
 export declare function JumpTableHeaderCell(props: Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> & { as?: ElementTag; ref?: Ref<HTMLTableCellElement>; selected?: boolean; disabled?: boolean; align?: JumpTableAlign; variant?: 'default' | 'control'; padding?: 'default' | 'none' | 'checkbox'; showHorizontalBorder?: boolean; pinned?: JumpTablePinned; pinnedEdge?: boolean; sortable?: boolean; sortOrder?: JumpTableSortOrder; onSortChange?: (sortOrder: JumpTableSortOrder) => void; ariaLabels?: { sort?: string | ((sortOrder: JumpTableSortOrder) => string) }; leading?: ReactNode; trailing?: ReactNode; slots?: { leading?: ReactNode; trailing?: ReactNode }; innerClasses?: JumpTableCellInnerClasses; children?: ReactNode }): ReactNode
 export declare function JumpSheet(props: HTMLAttributes<HTMLElement> & { visible?: boolean; onVisibleChange?: (visible: boolean) => void; position?: 'top' | 'right' | 'bottom' | 'left'; title?: string; subtitle?: string; footer?: ReactNode; children?: ReactNode }): ReactNode
 export type JumpTopBarLeading = 'menu' | 'back' | ReactNode
-export type JumpTopBarProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & { leading?: JumpTopBarLeading; onMenu?: () => void; onBack?: () => void; menuOpen?: boolean; title?: ReactNode; subtitle?: ReactNode; trailing?: ReactNode; sticky?: boolean; ariaLabels?: { menu?: string; back?: string } }
+export type JumpTopBarProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & { leading?: JumpTopBarLeading; onMenu?: () => void; onBack?: () => void; menuOpen?: boolean; title?: ReactNode; subtitle?: ReactNode; trailing?: ReactNode; sticky?: boolean; titleAlign?: 'start' | 'center'; titleHidden?: boolean; ariaLabels?: { menu?: string; back?: string } }
 export declare function JumpTopBar(props: JumpTopBarProps): ReactNode
 export declare function JumpTabBar(props: HTMLAttributes<HTMLElement> & { children: ReactNode }): ReactNode
 export type JumpTabBarItemProps = { as?: ElementType; href?: string; icon?: ReactNode; badge?: ReactNode | number; selected?: boolean; children: ReactNode; className?: string; style?: CSSProperties } & Record<string, unknown>
 export declare function JumpTabBarItem(props: JumpTabBarItemProps): ReactNode
-export type JumpAppShellTopBar = Omit<JumpTopBarProps, 'onMenu' | 'menuOpen'> & { desktop?: boolean }
+export type JumpAppShellTopBar = Omit<JumpTopBarProps, 'onMenu' | 'menuOpen'> & { desktop?: boolean; largeTitle?: boolean }
 export declare function JumpAppShell(props: HTMLAttributes<HTMLDivElement> & { brand?: ReactNode; navigation?: ReactNode; sidebarFooter?: ReactNode; topBar?: JumpAppShellTopBar | null; tabBar?: ReactNode; hideTabBar?: boolean; breakpoint?: number; sidebarWidth?: number | string; navigationOpen?: boolean; defaultNavigationOpen?: boolean; onNavigationOpenChange?: (open: boolean) => void; ariaLabels?: { navigation?: string; openNavigation?: string; closeNavigation?: string; back?: string }; children?: ReactNode }): ReactNode
 export declare function JumpSectionHeader(props: HTMLAttributes<HTMLElement> & { as?: ElementTag; variant?: 'regular' | 'prominent'; description?: ReactNode; children: ReactNode }): ReactNode
 export declare function JumpSectionFooter(props: HTMLAttributes<HTMLElement> & { as?: ElementTag; children: ReactNode }): ReactNode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mario_hahn/jumpy-ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "MIT",
   "type": "module",
   "scripts": {