@mario_hahn/jumpy-ui 0.10.0 → 0.12.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.12.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases
@@ -324,6 +324,15 @@ 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.
+- `topBar.actions` (0.12.0+): `[{ label, icon, onClick | href, variant }]`. Mobile shows
+  icon-only buttons (`label` becomes the accessible name); with three or more, the first
+  stays visible and the rest go into a "More actions" menu. Desktop shows labelled
+  buttons beside the large title, otherwise in the top bar. Prefer it over `trailing`
+  for ordinary actions; keep `trailing` for custom content such as an avatar.
 - `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-3PHOJLCH.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;
@@ -11852,6 +11853,27 @@ var providerStyles = `
   flex: 0 0 auto;
 }
 
+/* Centered title (iOS navigation bar): equal side columns keep the title centered however many buttons sit left or right.
+   Explicit columns so a hidden menu button does not shift the title. */
+[data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] > [data-jumpy-slot='top-bar-leading'] {
+  grid-column: 1;
+  justify-self: start;
+}
+
+[data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] > [data-jumpy-slot='top-bar-title'] {
+  grid-column: 2;
+}
+
+[data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] > [data-jumpy-slot='top-bar-trailing'] {
+  grid-column: 3;
+  justify-self: end;
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='tab-bar'] [data-jumpy-slot='tab-bar-surface'] {
   background-color: var(--jumpy-color-surface-card);
 }
@@ -11869,6 +11891,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 +11922,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-3PHOJLCH.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -1642,7 +1642,7 @@ function JumpPopover({ open, defaultOpen = false, onOpenChange, trigger, childre
     visible ? /* @__PURE__ */ jsx2("div", { role: "dialog", "data-jumpy-component": "popover", style: { position: "absolute", top: `calc(100% + ${spacingValue(theme, JumpySpacing.smallXS)}px)`, left: 0, zIndex: 30, minWidth: 220, borderRadius: radiusValue(theme, JumpyRadius.large), border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}`, backgroundColor: theme.color.surfaceCard, color: theme.color.textPrimary, boxShadow: theme.shadow.positiveMedium, padding: spacingValue(theme, JumpySpacing.large) }, children }) : null
   ] });
 }
-function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, footer, children, className = "", placement = "bottom-start", closeOnSelect = true, ...props }) {
+function JumpMenu({ trigger, triggerProps = {}, open, defaultOpen = false, onOpenChange, header, footer, children, className = "", placement = "bottom-start", closeOnSelect = true, ...props }) {
   const theme = useJumpyTheme();
   const [internalOpen, setInternalOpen] = useState2(defaultOpen);
   const isOpen = open ?? internalOpen;
@@ -1748,7 +1748,7 @@ function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, fo
     refs.domReference.current?.focus?.();
   }
   return /* @__PURE__ */ jsxs2("span", { "data-jumpy-component": "menu-root", className: cn(className), onPointerDown: markInteractionInside, onFocus: markInteractionInside, style: { display: "inline-flex", ...props.style || {} }, children: [
-    /* @__PURE__ */ jsx2("span", { ref: refs.setReference, "aria-haspopup": "menu", "aria-expanded": isOpen, tabIndex: 0, onClick: () => setOpen(!isOpen), onKeyDown: handleTriggerKeyDown, children: trigger }),
+    /* @__PURE__ */ jsx2("span", { ...triggerProps, ref: refs.setReference, "aria-haspopup": "menu", "aria-expanded": isOpen, tabIndex: 0, onClick: () => setOpen(!isOpen), onKeyDown: handleTriggerKeyDown, children: trigger }),
     isOpen ? /* @__PURE__ */ jsx2(JumpyPortal, { children: /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -2412,11 +2412,12 @@ function JumpyNavigationIcon({ type }) {
   const paths = {
     menu: "M4 6h16M4 12h16M4 18h16",
     close: "M6 6l12 12M18 6 6 18",
-    back: "M15 18l-6-6 6-6"
+    back: "M15 18l-6-6 6-6",
+    more: "M5 12h.01M12 12h.01M19 12h.01"
   };
-  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] }) });
+  return /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: type === "more" ? 3 : 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 +2438,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 +2456,18 @@ 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" ? {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          minWidth: 0,
+          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 +2514,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 +2549,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,
@@ -2548,6 +2558,28 @@ function JumpTabBarItem({ as, icon, badge, selected = false, children, className
     }
   );
 }
+function JumpyAppShellActions({ actions, variant, ariaLabels }) {
+  const theme = useJumpyTheme();
+  if (!actions.length) return null;
+  const gap = spacingValue(theme, JumpySpacing.smallXS);
+  if (variant === "full") {
+    return /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "app-shell-actions", "data-variant": "full", style: { alignItems: "center", gap, flexWrap: "wrap", justifyContent: "flex-end" }, children: actions.map((action, index) => /* @__PURE__ */ jsx2(JumpButton, { as: action.href ? "a" : void 0, href: action.href, variant: action.variant || "secondary", leadingIcon: action.icon, disabled: action.disabled, onClick: action.onClick, children: action.label }, action.id ?? index)) });
+  }
+  const visible = actions.length > 2 ? actions.slice(0, 1) : actions;
+  const overflow = actions.length > 2 ? actions.slice(1) : [];
+  return /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "app-shell-actions", "data-variant": "compact", style: { alignItems: "center", gap }, children: [
+    visible.map((action, index) => /* @__PURE__ */ jsx2(JumpIconButton, { as: action.href ? "a" : void 0, href: action.href, variant: action.variant === "primary" ? "primary" : "borderless", "aria-label": action.label, disabled: action.disabled, onClick: action.onClick, children: action.icon }, action.id ?? index)),
+    overflow.length ? /* @__PURE__ */ jsx2(
+      JumpMenu,
+      {
+        placement: "bottom-end",
+        triggerProps: { role: "button", "aria-label": ariaLabels.moreActions || "More actions", "data-jumpy-slot": "app-shell-actions-more" },
+        trigger: /* @__PURE__ */ jsx2(JumpIconButton, { as: "span", variant: "borderless", tabIndex: -1, "aria-hidden": "true", children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "more" }) }),
+        children: overflow.map((action, index) => /* @__PURE__ */ jsx2(JumpMenuItem, { as: action.href ? "a" : void 0, href: action.href, leading: action.icon, disabled: action.disabled, onClick: action.onClick, children: action.label }, action.id ?? index))
+      }
+    ) : null
+  ] });
+}
 function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTabBar = false, breakpoint = 1024, sidebarWidth = 256, navigationOpen, defaultNavigationOpen = false, onNavigationOpenChange, ariaLabels = {}, children, className = "", ...props }) {
   const theme = useJumpyTheme();
   const shellId = useId();
@@ -2555,8 +2587,15 @@ 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: topBarDesktop = false, leading, largeTitle = false, actions = [], ...topBarProps } = topBar || {};
+  const showLargeTitle = largeTitle && Boolean(topBarProps.title);
+  const topBarOnDesktop = topBarDesktop || actions.length > 0 && !showLargeTitle;
+  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 +2614,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;
@@ -2592,9 +2653,13 @@ function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTa
   const shellStyles = `
 ${shell} { grid-template-columns: minmax(0, 1fr); }
 ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
+${shell} [data-jumpy-slot='app-shell-actions'][data-variant='compact'] { display: inline-flex; }
+${shell} [data-jumpy-slot='app-shell-actions'][data-variant='full'] { display: none; }
 @media (min-width: ${breakpoint}px) {
   ${shell} { grid-template-columns: ${width} minmax(0, 1fr); }
   ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: flex; }
+  ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='compact'] { display: none; }
+  ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='full'] { display: inline-flex; }
   ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='tab-bar'] { display: none; }
   ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'][data-mobile-only='true'] { display: none; }
   ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'] > [data-leading='menu'] { display: none; }
@@ -2608,6 +2673,15 @@ ${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,
+      trailing: actions.length || topBarProps.trailing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(JumpyAppShellActions, { actions, variant: "compact", ariaLabels }),
+        showLargeTitle ? null : /* @__PURE__ */ jsx2(JumpyAppShellActions, { actions, variant: "full", ariaLabels }),
+        topBarProps.trailing
+      ] }) : void 0,
       ariaLabels: { menu: ariaLabels.openNavigation, back: ariaLabels.back, ...topBarProps.ariaLabels || {} }
     }
   );
@@ -2641,29 +2715,42 @@ ${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__ */ jsx2("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__ */ jsxs2("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.large), flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0 }, 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
+              ] }),
+              /* @__PURE__ */ jsx2(JumpyAppShellActions, { actions, variant: "full", ariaLabels })
+            ] }) }) : 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 +2773,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-3PHOJLCH.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,

package/index.d.ts

@@ -71,7 +71,7 @@ export declare function JumpSkeletonLoader(props: HTMLAttributes<HTMLElement> &
 export declare const JumpSearchField: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & { label?: string } & import('react').RefAttributes<HTMLInputElement>>
 export declare function JumpTooltip(props: HTMLAttributes<HTMLSpanElement> & { content: ReactNode; children: ReactNode }): ReactNode
 export declare function JumpPopover(props: HTMLAttributes<HTMLSpanElement> & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; trigger: ReactNode; children: ReactNode }): ReactNode
-export declare function JumpMenu(props: HTMLAttributes<HTMLDivElement> & { trigger: ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; closeOnSelect?: boolean; header?: ReactNode; footer?: ReactNode; placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; children: ReactNode }): ReactNode
+export declare function JumpMenu(props: HTMLAttributes<HTMLDivElement> & { trigger: ReactNode; triggerProps?: HTMLAttributes<HTMLSpanElement> & Record<string, unknown>; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; closeOnSelect?: boolean; header?: ReactNode; footer?: ReactNode; placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; children: ReactNode }): ReactNode
 export declare function JumpMenuItem(props: HTMLAttributes<HTMLElement> & { as?: ElementTag; children: ReactNode; selected?: boolean; disabled?: boolean; readOnly?: boolean; focusedView?: boolean; leading?: ReactNode; trailing?: ReactNode; metadata?: ReactNode; description?: ReactNode; slots?: JumpListItemSlots; nestedMenu?: ReactNode }): ReactNode
 export type JumpToggleButtonValue = string | number
 export declare function JumpToggleButton(props: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & { as?: ElementTag; selected?: boolean; value?: JumpToggleButtonValue; onChange?: (selected: boolean) => void; leading?: ReactNode | ((state: { selected: boolean }) => ReactNode); children?: ReactNode }): ReactNode
@@ -111,13 +111,14 @@ 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 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 type JumpAppShellAction = { id?: string; label: string; icon: ReactNode; onClick?: (event: import('react').MouseEvent<HTMLElement>) => void; href?: string; variant?: 'primary' | 'secondary' | 'tertiary' | 'borderless'; disabled?: boolean }
+export type JumpAppShellTopBar = Omit<JumpTopBarProps, 'onMenu' | 'menuOpen'> & { desktop?: boolean; largeTitle?: boolean; actions?: JumpAppShellAction[] }
+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; moreActions?: 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
 export declare function JumpTag(props: HTMLAttributes<HTMLSpanElement> & { size?: 'small' | 'medium'; status?: 'regular' | 'positive' | 'warning' | 'alarm'; disabled?: boolean; children: ReactNode }): ReactNode

package/package.json

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