@mario_hahn/jumpy-ui 0.7.0 → 0.8.0

package/README.md

@@ -1,5 +1,38 @@
 # @mario_hahn/jumpy-ui
 
+## Sticky tables and selection
+
+`JumpTable stickyHeader` fixes both the header and footer inside the scrollable
+container. They use `--jumpy-cmp-table-backdrop-color` for a continuous background
+behind the decorative cell surfaces. The default resolves to the opaque semantic
+floating surface in each preset. Keep any custom backdrop override opaque.
+
+`JumpTableCell` and `JumpTableHeaderCell` support `pinned="left"` or `pinned="right"`;
+use `pinnedEdge` for the edge divider. Pinned cells use the same backdrop as the
+sticky bands. Set the container's maximum height through `containerProps.style`.
+
+Selection preserves normal text weight for table cells and list-item labels.
+For deliberate emphasis, use `innerClasses.text.style.fontWeight` on a table cell
+or `innerClasses.label.style.fontWeight` on a list item. Headers stay emphasized;
+selection surfaces and accessibility attributes are independent of typography.
+
+## Button sizes
+
+```tsx
+import { JumpButton, JumpySize } from '@mario_hahn/jumpy-ui'
+
+<JumpButton>Standard</JumpButton>
+<JumpButton size={JumpySize.medium}>Compact</JumpButton>
+<JumpButton size={JumpySize.largeXL}>Large</JumpButton>
+```
+
+`size` accepts a Jumpy sizing token, not a pixel number. The standard theme resolves
+`medium` to 32px and `largeXL` to 48px. Omitting the prop preserves the existing
+button layout (normally 40px). Explicit sizes adjust vertical padding; compact
+buttons also use smaller typography, icons and horizontal padding. The token sets
+a minimum height: content is never clipped when a very small token or larger
+custom typography is used. Consumer `style` overrides retain precedence.
+
 ## Theme overrides
 
 Use semantic colors for brand-wide changes and action overrides for individual
@@ -42,7 +75,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.7.0
+npm install @mario_hahn/jumpy-ui@^0.8.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases

package/dist/{chunk-KIZKZXWH.js → chunk-HQ4NWZ65.js}

@@ -23765,13 +23765,33 @@ var providerStyles = `
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] thead,
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] tfoot {
   position: sticky;
-  z-index: 10;
+  /* Above pinned body cells (z-index 10), with a full-width opaque surface. */
+  z-index: 20;
+  /* The inset decorative cell surfaces are not an occluding backdrop. */
+  background-color: var(--jumpy-cmp-table-backdrop-color);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] thead {
   top: 0;
 }
 
+/* Table section backgrounds can be clipped to rounded cell boxes by the table
+   painting algorithm. An independent layer also covers those outer corners. */
+[data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] thead::before,
+[data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] tfoot::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-color: var(--jumpy-cmp-table-backdrop-color);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] :is(thead, tfoot) > [data-jumpy-component='table-row'] > :is([data-jumpy-component='table-cell'], [data-jumpy-component='table-header-cell']):is(:first-child, :last-child) {
+  /* Only the decorative surface is rounded; sticky backdrops are rectangular. */
+  border-radius: 0;
+}
+
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] tfoot {
   bottom: 0;
 }

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-KIZKZXWH.js";
+} from "./chunk-HQ4NWZ65.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -680,7 +680,6 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
   const isDisabled = disabled || readOnly;
   const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
   const bodySmall = textStyleValue(theme, JumpyTextStyle.bodySmall);
-  const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
   const iconSize = sizeValue(theme, JumpySize.small2XS);
   const handleExpandedChange = () => {
     const nextCollapsed = !isNestedCollapsed;
@@ -750,7 +749,7 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
         resolvedSelector ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "selector", "aria-hidden": props.role === "option" || props.role === "treeitem" ? "true" : void 0, className: innerClasses.selector?.className, style: { display: "inline-flex", pointerEvents: "none", color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.selector?.style || {} }, children: resolvedSelector }) : null,
         resolvedLeading ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "leading", "aria-hidden": "true", className: innerClasses.leading?.className, style: { display: "inline-flex", width: iconSize, height: iconSize, color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.leading?.style || {} }, children: resolvedLeading }) : null,
         /* @__PURE__ */ jsxs("span", { style: { display: "grid", minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "label", "data-truncate": truncateTexts ? "true" : void 0, "data-text": typeof children === "string" ? children : void 0, className: innerClasses.label?.className, style: { minWidth: 0, maxWidth: "100%", overflowWrap: "anywhere", wordBreak: "break-word", fontWeight: selected ? bodyMediumEmphasized.fontWeight : bodyMedium.fontWeight, ...innerClasses.label?.style || {} }, children }),
+          /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "label", "data-truncate": truncateTexts ? "true" : void 0, "data-text": typeof children === "string" ? children : void 0, className: innerClasses.label?.className, style: { minWidth: 0, maxWidth: "100%", overflowWrap: "anywhere", wordBreak: "break-word", fontWeight: bodyMedium.fontWeight, ...innerClasses.label?.style || {} }, children }),
           resolvedDescription ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "description", className: innerClasses.description?.className, style: { color: selected ? theme.listItem.active.default.subtext : theme.listItem.inactive.default.subtext, fontSize: bodySmall.fontSize, lineHeight: bodySmall.lineHeight, ...innerClasses.description?.style || {} }, children: resolvedDescription }) : null
         ] }),
         resolvedMetadata ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "metadata", className: innerClasses.metadata?.className, style: { color: selected ? theme.listItem.active.default.subtext : theme.listItem.inactive.default.subtext, whiteSpace: "nowrap", fontSize: bodySmall.fontSize, lineHeight: bodySmall.lineHeight, ...innerClasses.metadata?.style || {} }, children: resolvedMetadata }) : null,
@@ -1770,7 +1769,7 @@ function JumpTableCell({ as, children, selected = false, disabled = false, align
         /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "table-cell-inner", "data-align": resolvedAlign, className: innerClasses.inner?.className, style: innerClasses.inner?.style, children: [
           cellLeading ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-leading", className: innerClasses.leading?.className, style: innerClasses.leading?.style, children: cellLeading }) : null,
           /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "table-cell-content", className: innerClasses.content?.className, style: innerClasses.content?.style, children: [
-            /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-text", className: innerClasses.text?.className, style: tableCellTextStyle(theme, selected, innerClasses.text?.style), children }),
+            /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-text", className: innerClasses.text?.className, style: tableCellTextStyle(theme, false, innerClasses.text?.style), children }),
             cellDescription ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-description", className: innerClasses.description?.className, style: tableCellTextStyle(theme, false, innerClasses.description?.style), children: cellDescription }) : null
           ] }),
           cellTrailing ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-trailing", className: innerClasses.trailing?.className, style: innerClasses.trailing?.style, children: cellTrailing }) : null
@@ -3044,11 +3043,14 @@ function JumpLoader({ label = "Jumpy UI wird geladen", fullScreen = false, class
     /* @__PURE__ */ jsx(JumpCard, { className: cn("px-10 py-9", decorativeBackground && "relative z-10"), children: content })
   ] });
 }
-function JumpButton({ as, variant = "primary", status = "regular", className = "", isLoading = false, disabled, elevated = false, slots, leadingIcon, trailingIcon, children, ...props }) {
+function JumpButton({ as, size: size2, variant = "primary", status = "regular", className = "", isLoading = false, disabled, elevated = false, slots, leadingIcon, trailingIcon, children, ...props }) {
   const theme = useJumpyTheme();
   const variantStyles = getButtonVariantStyles(theme, variant, status);
-  const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
-  const iconSize = sizeValue(theme, JumpySize.small2XS);
+  const height = sizeValue(theme, size2 ?? JumpySize.large);
+  if (!Number.isFinite(height) || height < 0) throw new Error(`Invalid JumpButton size token: ${size2}`);
+  const compact = height < sizeValue(theme, JumpySize.large);
+  const textStyle = textStyleValue(theme, compact ? JumpyTextStyle.bodySmallEmphasized : JumpyTextStyle.bodyMediumEmphasized);
+  const iconSize = sizeValue(theme, compact ? JumpySize.small3XS : JumpySize.small2XS);
   const [pressed, setPressed] = useState(false);
   const leading = slots?.leading ?? leadingIcon;
   const trailing = slots?.trailing ?? trailingIcon;
@@ -3057,6 +3059,15 @@ function JumpButton({ as, variant = "primary", status = "regular", className = "
   const isDisabled = disabled || isLoading;
   const spacing = getButtonSpacing(theme, variant, Boolean(leading), Boolean(trailing));
   const hasBorder = variant === "secondary" || variant === "tertiary";
+  if (size2 !== void 0) {
+    const border = hasBorder ? borderWidthValue(theme, JumpyBorderWidth.small) : 0;
+    const contentHeight = Math.max(textStyle.fontSize * textStyle.lineHeight, leading || trailing ? iconSize : 0);
+    spacing.paddingTop = spacing.paddingBottom = Math.max(0, (height - contentHeight - border * 2) / 2);
+    if (compact) {
+      spacing.gap = spacingValue(theme, JumpySpacing.small3XS);
+      spacing.paddingLeft = spacing.paddingRight = spacingValue(theme, variant === "borderless" ? JumpySpacing.zero : JumpySpacing.medium);
+    }
+  }
   const content = /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: spacing.gap, whiteSpace: "nowrap" }, children: [
     leading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", style: { width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: leading }) : null,
     /* @__PURE__ */ jsx("span", { children }),
@@ -3072,6 +3083,7 @@ function JumpButton({ as, variant = "primary", status = "regular", className = "
       "data-status": status,
       "data-elevated": elevated ? "true" : "false",
       "data-loading": isLoading ? "true" : "false",
+      "data-size": size2,
       "data-pressed": pressed ? "true" : "false",
       "aria-busy": isLoading || void 0,
       "aria-disabled": !isButton && isDisabled ? true : props["aria-disabled"],
@@ -3098,7 +3110,7 @@ function JumpButton({ as, variant = "primary", status = "regular", className = "
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        minHeight: sizeValue(theme, JumpySize.large),
+        minHeight: height,
         appearance: "none",
         WebkitAppearance: "none",
         boxSizing: "border-box",
@@ -3107,11 +3119,11 @@ function JumpButton({ as, variant = "primary", status = "regular", className = "
         paddingTop: spacing.paddingTop,
         paddingBottom: spacing.paddingBottom,
         borderRadius: radiusValue(theme, JumpyRadius.small),
-        letterSpacing: bodyMediumEmphasized.letterSpacing,
+        letterSpacing: textStyle.letterSpacing,
         fontFamily: theme.fontFamily.familyBase,
-        fontSize: bodyMediumEmphasized.fontSize,
-        lineHeight: bodyMediumEmphasized.lineHeight,
-        fontWeight: bodyMediumEmphasized.fontWeight,
+        fontSize: textStyle.fontSize,
+        lineHeight: textStyle.lineHeight,
+        fontWeight: textStyle.fontWeight,
         opacity: isDisabled ? opacityValue(theme, JumpyOpacity.medium) : opacityValue(theme, JumpyOpacity.solid),
         borderWidth: hasBorder ? borderWidthValue(theme, JumpyBorderWidth.small) : 0,
         borderStyle: hasBorder ? "solid" : "none",

package/dist/theme.js

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

package/index.d.ts

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode, Ref, TdHTMLAttributes, TextareaHTMLAttributes, ThHTMLAttributes } from 'react'
-export type { JumpyTheme } from './theme.js'
+export type { JumpyTheme, JumpySizeToken } from './theme.js'
 type ElementTag = keyof HTMLElementTagNameMap
 type JumpResponsiveValue<T> = T | { small?: T; medium?: T; large?: T; xLarge?: T }
 type JumpGridSpacing = number | string | [row: number | string, column: number | string]
@@ -128,7 +128,7 @@ export type JumpDialogInnerPart = 'illustration' | 'body' | 'icon' | 'title' | '
 export type JumpDialogInnerClasses = Partial<Record<JumpDialogInnerPart, { className?: string; style?: import('react').CSSProperties }>>
 export declare function JumpDialog(props: HTMLAttributes<HTMLElement> & { as?: ElementTag; visible?: boolean; onVisibleChange?: (visible: boolean) => void; title?: ReactNode; description?: ReactNode; footer?: ReactNode; disableBackdropClick?: boolean; disableContentScroll?: boolean; fullScreen?: boolean; overlayProps?: HTMLAttributes<HTMLDivElement>; slots?: { illustration?: ReactNode; icon?: ReactNode; title?: ReactNode; description?: ReactNode; footer?: ReactNode }; innerClasses?: JumpDialogInnerClasses; children?: ReactNode }): ReactNode
 export declare function JumpLoader(props: { label?: string; fullScreen?: boolean; className?: string; decorativeBackground?: boolean }): ReactNode
-export declare function JumpButton(props: JumpPolymorphicButtonAttributes & { as?: ElementTag; variant?: 'primary' | 'secondary' | 'tertiary' | 'borderless'; status?: 'regular' | 'alarm'; isLoading?: boolean; elevated?: boolean; slots?: JumpButtonSlots; leadingIcon?: ReactNode; trailingIcon?: ReactNode }): ReactNode
+export declare function JumpButton(props: JumpPolymorphicButtonAttributes & { as?: ElementTag; size?: import('./theme.js').JumpySizeToken; variant?: 'primary' | 'secondary' | 'tertiary' | 'borderless'; status?: 'regular' | 'alarm'; isLoading?: boolean; elevated?: boolean; slots?: JumpButtonSlots; leadingIcon?: ReactNode; trailingIcon?: ReactNode }): ReactNode
 export declare function JumpIconButton(props: JumpPolymorphicButtonAttributes & { as?: ElementTag; variant?: 'primary' | 'secondary' | 'tertiary' | 'borderless'; status?: 'regular' | 'alarm'; alternateHover?: boolean; elevated?: boolean }): ReactNode
 export declare function JumpLinkButton(props: AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; variant?: 'primary' | 'secondary' | 'tertiary' | 'borderless'; status?: 'regular' | 'alarm'; leadingIcon?: ReactNode; trailingIcon?: ReactNode }): ReactNode
 export declare const JumpInput: import('react').ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & { status?: JumpInputStatus } & import('react').RefAttributes<HTMLInputElement>>

package/package.json

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

package/theme.d.ts

@@ -19,7 +19,8 @@ export type JumpyTheme = {
 }
 
 export declare const JumpySpacing: Record<string, string>
-export declare const JumpySize: Record<string, string>
+export type JumpySizeToken = 'none' | 'small5XS' | 'small4XS' | 'small3XS' | 'small2XS' | 'smallXS' | 'small' | 'medium' | 'large' | 'largeXL' | 'large2XL' | 'large3XL' | 'large4XL' | 'large5XL' | 'large6XL' | 'large7XL' | 'large8XL'
+export declare const JumpySize: { readonly [Key in JumpySizeToken]: Key }
 export declare const JumpyRadius: Record<string, string>
 export declare const JumpyOpacity: Record<string, string>
 export declare const JumpyBorderWidth: Record<string, string>