@mario_hahn/jumpy-ui 0.11.0 → 0.13.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.11.0
+npm install @mario_hahn/jumpy-ui@^0.13.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases
@@ -328,6 +328,16 @@ import { JumpAppShell, JumpSideMenu, JumpSideMenuItem, JumpTabBar, JumpTabBarIte
   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.
+- `topBar.back` (0.13.0+): `{ label, href, as: Link }` for detail pages ("up" to the
+  parent). Mobile: "‹ label" replaces the menu button; desktop: link above the large
+  title or in the top bar. Returns through history when the previous entry is that
+  parent, otherwise follows `href` (deep links stay in the app). Keep the browser's own
+  back (button, Safari edge swipe) working: every page change needs a history entry.
 - `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-V3XYXQPA.js → chunk-2I6OOQNV.js}

@@ -11853,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);
 }
@@ -11883,6 +11904,25 @@ var providerStyles = `
   backdrop-filter: none;
 }
 
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back'] {
+  display: inline-flex;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Only the label truncates; the chevron keeps its size. */
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back'] > svg {
+  flex: none;
+}
+
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back']:hover {
+  color: var(--jumpy-interactive-active-regular-hover-text);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back']:focus-visible {
+  outline: var(--jumpy-spacing-outline-medium) solid var(--jumpy-interactive-inactive-regular-focus-focus-ring);
+  outline-offset: var(--jumpy-spacing-outline-small);
+}
+
 [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;

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-V3XYXQPA.js";
+} from "./chunk-2I6OOQNV.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",
       {
@@ -2408,13 +2408,14 @@ function JumpSheet({ visible = false, onVisibleChange, position = "right", title
     footer ? /* @__PURE__ */ jsx2("div", { style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}` }, children: footer }) : null
   ] }) });
 }
-function JumpyNavigationIcon({ type }) {
+function JumpyNavigationIcon({ type, size: size2 = 24 }) {
   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: size2, height: size2, 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, titleAlign = "start", titleHidden = false, ariaLabels = {}, className = "", ...props }) {
   const theme = useJumpyTheme();
@@ -2454,20 +2455,13 @@ function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle
         ...props.style || {}
       },
       children: [
-        leadingNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-leading", "data-leading": leadingType, style: { marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: leadingNode }) : null,
+        leadingNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-leading", "data-leading": leadingType, style: { minWidth: 0, maxWidth: "100%", marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: leadingNode }) : 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,
@@ -2564,6 +2558,93 @@ function JumpTabBarItem({ as, icon, badge, selected = false, children, className
     }
   );
 }
+var jumpyLocations = { current: null, previous: null };
+function jumpyNormalizeUrl(url) {
+  const resolved = new URL(url, window.location.href);
+  const path = resolved.pathname.length > 1 ? resolved.pathname.replace(/\/+$/, "") : resolved.pathname;
+  return `${resolved.origin}${path}${resolved.search === "?" ? "" : resolved.search}`;
+}
+function jumpyPreviousEntryIs(href) {
+  const target = jumpyNormalizeUrl(href);
+  const navigation = window.navigation;
+  if (navigation && typeof navigation.entries === "function" && navigation.currentEntry) {
+    if (!navigation.canGoBack) return false;
+    const previous = navigation.entries()[navigation.currentEntry.index - 1];
+    return Boolean(previous?.url) && jumpyNormalizeUrl(previous.url) === target;
+  }
+  return Boolean(jumpyLocations.previous) && jumpyNormalizeUrl(jumpyLocations.previous) === target && window.history.length > 1;
+}
+function JumpyAppShellBack({ back, variant, ariaLabels }) {
+  const theme = useJumpyTheme();
+  const Component = back.as || (back.href ? "a" : "button");
+  const textStyle = textStyleValue(theme, variant === "inline" ? JumpyTextStyle.bodySmallEmphasized : JumpyTextStyle.bodyMedium);
+  const accessibleName = ariaLabels.backTo ? ariaLabels.backTo(back.label) : `Back to ${back.label}`;
+  function handleClick(event) {
+    back.onClick?.(event);
+    if (event.defaultPrevented || !back.href || back.history === false) return;
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    if (!jumpyPreviousEntryIs(back.href)) return;
+    event.preventDefault();
+    window.history.back();
+  }
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      href: back.href,
+      type: Component === "button" ? "button" : void 0,
+      "aria-label": accessibleName,
+      "data-jumpy-slot": "app-shell-back",
+      "data-variant": variant,
+      onClick: handleClick,
+      style: {
+        boxSizing: "border-box",
+        alignItems: "center",
+        gap: spacingValue(theme, JumpySpacing.small4XS),
+        maxWidth: "100%",
+        minWidth: 0,
+        minHeight: variant === "inline" ? void 0 : sizeValue(theme, JumpySize.largeXL),
+        margin: variant === "inline" ? `0 0 ${spacingValue(theme, JumpySpacing.small3XS)}px ${-spacingValue(theme, JumpySpacing.small3XS)}px` : 0,
+        padding: variant === "inline" ? 0 : `0 ${spacingValue(theme, JumpySpacing.smallXS)}px 0 0`,
+        border: 0,
+        borderRadius: radiusValue(theme, JumpyRadius.small),
+        background: "transparent",
+        color: "var(--jumpy-interactive-active-regular-default-text)",
+        textDecoration: "none",
+        cursor: "pointer",
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: textStyle.fontSize,
+        lineHeight: textStyle.lineHeight,
+        fontWeight: textStyle.fontWeight
+      },
+      children: [
+        /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "back", size: variant === "inline" ? 18 : 24 }),
+        /* @__PURE__ */ jsx2("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: back.label })
+      ]
+    }
+  );
+}
+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();
@@ -2575,11 +2656,19 @@ function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTa
   const showDrawer = isOpen || drawerMounted;
   const closing = drawerMounted && !isOpen;
   const wasShown = useRef2(showDrawer);
-  const { desktop: topBarOnDesktop = false, leading, largeTitle = false, ...topBarProps } = topBar || {};
+  const { desktop: topBarDesktop = false, leading, largeTitle = false, actions = [], back, ...topBarProps } = topBar || {};
   const showLargeTitle = largeTitle && Boolean(topBarProps.title);
+  const hasBack = Boolean(back?.label);
+  const topBarOnDesktop = topBarDesktop || !showLargeTitle && (actions.length > 0 || hasBack);
   const largeTitleRef = useRef2(null);
   const [largeTitleCovered, setLargeTitleCovered] = useState2(false);
-  const resolvedLeading = leading ?? (navigation ? "menu" : void 0);
+  const resolvedLeading = hasBack ? /* @__PURE__ */ jsx2(JumpyAppShellBack, { back, variant: "bar", ariaLabels }) : leading ?? (navigation ? "menu" : void 0);
+  useEffect2(() => {
+    const href = window.location.href;
+    if (jumpyLocations.current === href) return;
+    jumpyLocations.previous = jumpyLocations.current;
+    jumpyLocations.current = href;
+  });
   const shell = `[data-jumpy-app-shell="${shellId}"]`;
   const width = typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
   function setOpen(next) {
@@ -2636,9 +2725,15 @@ 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; }
+${shell} [data-jumpy-slot='app-shell-back'][data-variant='inline'] { 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-back'][data-variant='inline'] { display: flex; width: fit-content; }
   ${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; }
@@ -2653,9 +2748,14 @@ ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
       onMenu: () => setOpen(true),
       title: topBarProps.title ?? brand,
       subtitle: showLargeTitle ? void 0 : topBarProps.subtitle,
-      titleAlign: showLargeTitle ? "center" : topBarProps.titleAlign,
+      titleAlign: showLargeTitle || hasBack ? "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 || {} }
     }
   );
@@ -2703,10 +2803,14 @@ ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
         /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-body", style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: "100dvh" }, children: [
           topBar !== null ? topBarNode : null,
           /* @__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,
+            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: [
+                hasBack ? /* @__PURE__ */ jsx2(JumpyAppShellBack, { back, variant: "inline", ariaLabels }) : null,
+                /* @__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

package/dist/theme.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-V3XYXQPA.js";
+} from "./chunk-2I6OOQNV.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
@@ -116,8 +116,10 @@ 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; 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 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 JumpAppShellBack = { label: string; href?: string; as?: ElementType; onClick?: (event: import('react').MouseEvent<HTMLElement>) => void; history?: boolean }
+export type JumpAppShellTopBar = Omit<JumpTopBarProps, 'onMenu' | 'menuOpen'> & { desktop?: boolean; largeTitle?: boolean; actions?: JumpAppShellAction[]; back?: JumpAppShellBack }
+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; backTo?: (label: string) => 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.11.0",
+  "version": "0.13.0",
   "license": "MIT",
   "type": "module",
   "scripts": {