@mario_hahn/jumpy-ui 0.14.2 → 0.15.0

package/README.md

@@ -162,7 +162,15 @@ behind the decorative cell surfaces. The default resolves to the opaque semantic
 card surface in each preset. Normal cell decorations are transparent; selected
 and hovered cells use their semantic interaction surfaces. The scroll container
 and pinned cells share the same backdrop. Keep any custom backdrop override opaque.
-Use `showHorizontalBorders` for explicit row separators in all columns.
+Use `showHorizontalBorders` for explicit row separators in all columns. Separators lie
+between rows: the last body row has none, unless a `JumpTableFooter` follows (the footer
+draws its own top border).
+
+`surface="card"` (default) paints the backdrop box described above, right inside a
+`JumpCard`. On a plain page use `<JumpTable surface="none">`: no card box, square corners
+or inset rows. Sticky headers and pinned cells still need an opaque backdrop, so it falls
+back to the page canvas (`--jumpy-color-surface-canvas`); if the page uses another
+background, set `--jumpy-cmp-table-backdrop-color` to it.
 
 `JumpTableCell` and `JumpTableHeaderCell` support `pinned="left"` or `pinned="right"`;
 use `pinnedEdge` for the edge divider. Pinned cells use the same backdrop as the

package/dist/{chunk-SXBPGNRO.js → chunk-K4DXYTVW.js}

@@ -18,7 +18,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-2XOYK2JS.js";
+} from "./chunk-YAOAIT3N.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -1696,10 +1696,10 @@ function JumpSnackbarProvider({ children, position = "bottom-center", maxSnackba
     /* @__PURE__ */ jsx("div", { ...props, "data-jumpy-component": "snackbar-provider", className: cn(className), style: { position: "fixed", zIndex: 1100, left: position.endsWith("start") ? horizontalOffset : position.endsWith("end") ? "auto" : "50%", right: position.endsWith("end") ? horizontalOffset : "auto", top: top ? verticalOffset : "auto", bottom: top ? "auto" : verticalOffset, transform: position.endsWith("center") ? "translateX(-50%)" : void 0, display: "flex", flexDirection: "column", alignItems: align, gap: spacingValue(theme, JumpySpacing.smallXS), width: "min(487px, calc(100vw - 32px))", maxWidth: "50vw", pointerEvents: "none", ...props.style || {} }, children: snackbars.map((snackbar) => snackbar.isData ? /* @__PURE__ */ jsx(JumpBanner, { floating: true, status: snackbar.content.status || "info", title: snackbar.content.title, actions: snackbar.content.slots?.actions, style: { width: "100%", pointerEvents: "auto", boxShadow: theme.shadow.positiveLarge }, children: snackbar.content.description }, snackbar.id) : /* @__PURE__ */ jsx("div", { "data-jumpy-component": "snackbar", style: { width: "100%", pointerEvents: "auto", borderRadius: radiusValue(theme, JumpyRadius.small), boxShadow: theme.shadow.positiveLarge }, children: snackbar.content }, snackbar.id)) })
   ] });
 }
-function JumpTable({ children, showHorizontalBorders = false, disabled = false, stickyHeader = false, density = "regular", containerProps, innerClasses = {}, className = "", ...props }) {
+function JumpTable({ children, showHorizontalBorders = false, disabled = false, stickyHeader = false, density = "regular", surface = "card", containerProps, innerClasses = {}, className = "", ...props }) {
   const { className: containerClassName, style: containerStyle, ...restContainerProps } = containerProps || {};
   const contextValue = { showHorizontalBorders, disabled };
-  return /* @__PURE__ */ jsx(JumpyTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "table-wrapper", className: innerClasses.wrapper?.className, style: innerClasses.wrapper?.style, children: /* @__PURE__ */ jsx("div", { ...restContainerProps, "data-jumpy-slot": "table-container", "data-sticky-header": stickyHeader ? "true" : "false", className: cn(containerClassName), style: containerStyle, children: /* @__PURE__ */ jsx("table", { ...props, "data-jumpy-component": "table", "data-horizontal-borders": showHorizontalBorders ? "true" : "false", "data-density": density === "condensed" ? "condensed" : void 0, "data-disabled": disabled ? "true" : void 0, role: props.role || "grid", className: cn(className), children }) }) }) });
+  return /* @__PURE__ */ jsx(JumpyTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "table-wrapper", "data-surface": surface === "none" ? "none" : void 0, className: innerClasses.wrapper?.className, style: innerClasses.wrapper?.style, children: /* @__PURE__ */ jsx("div", { ...restContainerProps, "data-jumpy-slot": "table-container", "data-sticky-header": stickyHeader ? "true" : "false", className: cn(containerClassName), style: containerStyle, children: /* @__PURE__ */ jsx("table", { ...props, "data-jumpy-component": "table", "data-horizontal-borders": showHorizontalBorders ? "true" : "false", "data-density": density === "condensed" ? "condensed" : void 0, "data-disabled": disabled ? "true" : void 0, role: props.role || "grid", className: cn(className), children }) }) }) });
 }
 function JumpTableHead({ as, children, className = "", ...props }) {
   const Component = as || "thead";
@@ -2401,7 +2401,8 @@ ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='compact'] { display
 ${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} { grid-template-columns: ${width} minmax(0, 1fr); }${topBarOnDesktop ? "" : `
+  ${shell} { --jumpy-app-shell-large-title-padding-top: ${spacingValue(theme, JumpySpacing.large2XL)}px; }`}
   ${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; }
@@ -2476,7 +2477,7 @@ ${shell} [data-jumpy-slot='app-shell-back'][data-variant='inline'] { display: no
         /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "app-shell-body", style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: "100dvh" }, children: [
           topBar !== null ? topBarNode : null,
           /* @__PURE__ */ jsxs("main", { "data-jumpy-slot": "app-shell-content", style: { flex: 1, minWidth: 0 }, children: [
-            showLargeTitle ? /* @__PURE__ */ jsx("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__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.large), flexWrap: "wrap" }, children: [
+            showLargeTitle ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "app-shell-large-title", style: { padding: `var(--jumpy-app-shell-large-title-padding-top, ${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__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.large), flexWrap: "wrap" }, children: [
               /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
                 hasBack ? /* @__PURE__ */ jsx(JumpyAppShellBack, { back, variant: "inline", ariaLabels }) : null,
                 /* @__PURE__ */ jsx("h1", { ref: largeTitleRef, style: { margin: 0, ...textStyleValue(theme, JumpyTextStyle.displaySmallEmphasized), overflowWrap: "anywhere" }, children: topBarProps.title }),
@@ -3803,11 +3804,18 @@ function JumpLinkButton({ href, variant = "borderless", status = "regular", clas
     }
   );
 }
+function nativeColorScheme(theme) {
+  const match = /^#([0-9a-f]{6})/i.exec(String(theme.color?.surfaceField || ""));
+  if (!match) return void 0;
+  const [r, g, b] = [0, 2, 4].map((index) => parseInt(match[1].slice(index, index + 2), 16) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.4 ? "dark" : "light";
+}
 var JumpInput = forwardRef(function JumpInput2({ className = "", ...props }, ref) {
   const theme = useJumpyTheme();
   const fieldContext = useContext(JumpyFieldContext);
   const inputOffset = fieldContext?.hasLabel ? spacingValue(theme, JumpySpacing.large) : spacingValue(theme, JumpySpacing.zero);
   const inputMinHeight = fieldContext ? void 0 : sizeValue(theme, JumpySize.largeXL) - spacingValue(theme, JumpySpacing.small3XS) * 2;
+  const spinShift = props.type === "number" && inputOffset ? Math.max(0, (inputOffset - spacingValue(theme, JumpySpacing.small3XS) / 2) / 2) : 0;
   const inputElement = /* @__PURE__ */ jsx(
     "input",
     {
@@ -3818,7 +3826,9 @@ var JumpInput = forwardRef(function JumpInput2({ className = "", ...props }, ref
       style: {
         ...getFieldInputStyles(theme, props.disabled),
         minHeight: inputMinHeight,
-        marginTop: inputOffset,
+        marginTop: inputOffset - spinShift,
+        ...spinShift ? { paddingTop: spinShift, "--jumpy-input-spin-shift": `${-spinShift}px` } : {},
+        colorScheme: props.type === "number" ? nativeColorScheme(theme) : void 0,
         ...props.style || {}
       }
     }

package/dist/{chunk-NPUCW4NM.js → chunk-NK6N6UY5.js}

@@ -1,12 +1,12 @@
 import {
   JumpField,
   JumpyFieldContext
-} from "./chunk-SXBPGNRO.js";
+} from "./chunk-K4DXYTVW.js";
 import {
   JumpySpacing,
   spacingValue,
   useJumpyTheme
-} from "./chunk-2XOYK2JS.js";
+} from "./chunk-YAOAIT3N.js";
 
 // editor.js
 import { useContext, useRef as useRef2, useState as useState2 } from "react";

package/dist/{chunk-2XOYK2JS.js → chunk-YAOAIT3N.js}

@@ -14496,6 +14496,10 @@ var providerStyles = `
   color: var(--jumpy-cmp-base-input-value-color);
 }
 
+[data-jumpy-theme='true'] [data-jumpy-component='input'][type='number']::-webkit-inner-spin-button {
+  transform: translateY(var(--jumpy-input-spin-shift, 0px));
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='input'][type='search']::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
@@ -14699,6 +14703,15 @@ var providerStyles = `
   width: 100%;
 }
 
+/* surface="none": no card box. Sticky headers and pinned cells still need an opaque backdrop, so it falls back to the page canvas. */
+[data-jumpy-theme='true'] [data-jumpy-slot='table-wrapper'][data-surface='none'] {
+  --jumpy-cmp-table-backdrop-color: var(--jumpy-color-surface-canvas);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-slot='table-wrapper'][data-surface='none'] > [data-jumpy-slot='table-container'] {
+  background-color: transparent;
+}
+
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'] {
   display: block;
   position: relative;
@@ -14844,6 +14857,11 @@ var providerStyles = `
   display: none;
 }
 
+/* Row separators lie between rows: the last body row has none unless a footer follows (it draws its own top border). */
+[data-jumpy-theme='true'] [data-jumpy-component='table'] > [data-jumpy-component='table-body']:last-child > [data-jumpy-component='table-row']:last-child > [data-jumpy-component='table-cell']::before {
+  display: none;
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='table-cell']:first-child::before,
 [data-jumpy-theme='true'] [data-jumpy-component='table-header-cell']:first-child::before {
   inset-inline-start: var(--jumpy-spacing-size-4xsmall);

package/dist/components.js

@@ -74,7 +74,7 @@ import {
   getSortOrder,
   isRowFullySelected,
   useJumpSnackbar
-} from "./chunk-SXBPGNRO.js";
+} from "./chunk-K4DXYTVW.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -105,7 +105,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-2XOYK2JS.js";
+} from "./chunk-YAOAIT3N.js";
 import "./chunk-3DBKYKP2.js";
 import {
   jumpyThemeInventory

package/dist/editor.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   JumpTokenInput
-} from "./chunk-NPUCW4NM.js";
-import "./chunk-SXBPGNRO.js";
-import "./chunk-2XOYK2JS.js";
+} from "./chunk-NK6N6UY5.js";
+import "./chunk-K4DXYTVW.js";
+import "./chunk-YAOAIT3N.js";
 import "./chunk-3DBKYKP2.js";
 import "./chunk-XDTVYUWG.js";
 export {

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   JumpTokenInput
-} from "./chunk-NPUCW4NM.js";
+} from "./chunk-NK6N6UY5.js";
 import {
   BrandMark,
   JumpAppShell,
@@ -77,7 +77,7 @@ import {
   getSortOrder,
   isRowFullySelected,
   useJumpSnackbar
-} from "./chunk-SXBPGNRO.js";
+} from "./chunk-K4DXYTVW.js";
 import {
   JumpyAnimation,
   JumpyAnimationDelay,
@@ -108,7 +108,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-2XOYK2JS.js";
+} from "./chunk-YAOAIT3N.js";
 import "./chunk-3DBKYKP2.js";
 import {
   jumpyThemeInventory

package/dist/theme.js

@@ -30,7 +30,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-2XOYK2JS.js";
+} from "./chunk-YAOAIT3N.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,

package/index.d.ts

@@ -104,7 +104,7 @@ export declare function getRowCheckboxProps(row: JumpSelectableRow, disabled?: b
 export declare function getHeaderCheckboxProps(table: JumpSelectableTable, disabled?: boolean): JumpSelectionCheckboxProps
 export type JumpTableInnerClasses = { wrapper?: { className?: string; style?: import('react').CSSProperties } }
 export type JumpTableCellInnerClasses = Partial<Record<'inner' | 'leading' | 'content' | 'text' | 'description' | 'trailing' | 'label' | 'labelText' | 'sortButton' | 'sortIndicator', { className?: string; style?: import('react').CSSProperties }>>
-export declare function JumpTable(props: HTMLAttributes<HTMLTableElement> & { ref?: Ref<HTMLTableElement>; showHorizontalBorders?: boolean; disabled?: boolean; stickyHeader?: boolean; density?: 'default' | 'regular' | 'condensed'; containerProps?: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }; innerClasses?: JumpTableInnerClasses; children?: ReactNode }): ReactNode
+export declare function JumpTable(props: HTMLAttributes<HTMLTableElement> & { ref?: Ref<HTMLTableElement>; showHorizontalBorders?: boolean; disabled?: boolean; stickyHeader?: boolean; density?: 'default' | 'regular' | 'condensed'; surface?: 'card' | 'none'; containerProps?: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }; innerClasses?: JumpTableInnerClasses; children?: ReactNode }): ReactNode
 export declare function JumpTableHead(props: HTMLAttributes<HTMLTableSectionElement> & { as?: ElementTag; ref?: Ref<HTMLTableSectionElement>; children?: ReactNode }): ReactNode
 export declare function JumpTableBody(props: HTMLAttributes<HTMLTableSectionElement> & { as?: ElementTag; ref?: Ref<HTMLTableSectionElement>; children?: ReactNode }): ReactNode
 export declare function JumpTableFooter(props: HTMLAttributes<HTMLTableSectionElement> & { as?: ElementTag; ref?: Ref<HTMLTableSectionElement>; children?: ReactNode }): ReactNode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mario_hahn/jumpy-ui",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": ["**/*.css"],