@mario_hahn/jumpy-ui 0.8.0 → 0.8.1

package/README.md

@@ -1,11 +1,21 @@
 # @mario_hahn/jumpy-ui
 
+## Field widths
+
+Text fields, dropdowns, date pickers and time pickers fill their parent container.
+Constrain the surrounding layout for compact controls, for example with a grid
+column or a wrapper `maxWidth`. Calendar and time popups retain their own sizing;
+they do not expand to match a wide field.
+
 ## 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.
+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.
 
 `JumpTableCell` and `JumpTableHeaderCell` support `pinned="left"` or `pinned="right"`;
 use `pinnedEdge` for the edge divider. Pinned cells use the same backdrop as the
@@ -75,7 +85,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.8.0
+npm install @mario_hahn/jumpy-ui@^0.8.1
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases

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

@@ -23744,7 +23744,7 @@ var providerStyles = `
 }
 
 [data-jumpy-theme='true'] [data-jumpy-slot='table-wrapper'] {
-  --jumpy-cmp-table-backdrop-color: var(--jumpy-non-interactive-background-default-floating);
+  --jumpy-cmp-table-backdrop-color: var(--jumpy-color-surface-card);
   display: block;
   position: relative;
   width: 100%;
@@ -23756,6 +23756,7 @@ var providerStyles = `
   width: 100%;
   max-width: 100%;
   overflow: auto;
+  background-color: var(--jumpy-cmp-table-backdrop-color);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] {
@@ -23775,18 +23776,6 @@ var providerStyles = `
   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;
@@ -23840,7 +23829,7 @@ var providerStyles = `
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-cell'],
 [data-jumpy-theme='true'] [data-jumpy-component='table-header-cell'] {
-  --jumpy-cmp-table-cell-surface-color: var(--jumpy-interactive-inactive-regular-default-surface, transparent);
+  --jumpy-cmp-table-cell-surface-color: transparent;
   display: table-cell;
   position: relative;
   height: var(--jumpy-spacing-size-2xlarge);
@@ -23852,7 +23841,7 @@ var providerStyles = `
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-header-cell'] {
-  --jumpy-cmp-table-cell-surface-color: color-mix(in srgb, var(--jumpy-color-neutral-ultralight) calc(var(--jumpy-opacity-medium) * 100%), transparent);
+  --jumpy-cmp-table-cell-surface-color: color-mix(in srgb, var(--jumpy-color-surface-field) calc(var(--jumpy-opacity-medium) * 100%), transparent);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-cell'][data-align='start'],
@@ -23887,9 +23876,10 @@ var providerStyles = `
 [data-jumpy-theme='true'] [data-jumpy-component='table-cell']::before,
 [data-jumpy-theme='true'] [data-jumpy-component='table-header-cell']::before {
   position: absolute;
+  z-index: 1;
   inset-inline: 0;
   bottom: 0;
-  background-color: var(--jumpy-color-neutral-ultralight, var(--jumpy-color-border-subtle));
+  background-color: var(--jumpy-color-border-subtle);
   height: var(--jumpy-spacing-outline-small);
   content: '';
 }
@@ -24139,31 +24129,17 @@ var providerStyles = `
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-footer'] {
   position: relative;
-  background-color: var(--jumpy-interactive-inactive-regular-default-surface);
-}
-
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::before,
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::after {
-  position: absolute;
-  right: 0;
-  left: 0;
-  z-index: 1;
-  background-color: var(--jumpy-interactive-inactive-regular-default-border);
-  height: var(--jumpy-spacing-outline-small);
-  content: '';
-}
-
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::before {
-  top: 0;
+  background-color: var(--jumpy-cmp-table-backdrop-color);
 }
 
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::after {
-  display: none;
-  bottom: 0;
+/* Native cell borders paint consistently on either side of pinned boundaries.
+   A section pseudo-element would be covered only by the sticky cells. */
+[data-jumpy-theme='true'] [data-jumpy-component='table-footer'] > [data-jumpy-component='table-row']:first-child > :is([data-jumpy-component='table-cell'], [data-jumpy-component='table-header-cell']) {
+  border-top: var(--jumpy-spacing-outline-small) solid var(--jumpy-color-border-subtle);
 }
 
-[data-jumpy-theme='true'] [data-jumpy-component='table'][data-horizontal-borders='true'] [data-jumpy-component='table-footer']::after {
-  display: block;
+[data-jumpy-theme='true'] [data-jumpy-component='table'][data-horizontal-borders='true'] > [data-jumpy-component='table-footer'] > [data-jumpy-component='table-row']:last-child > :is([data-jumpy-component='table-cell'], [data-jumpy-component='table-header-cell']) {
+  border-bottom: var(--jumpy-spacing-outline-small) solid var(--jumpy-color-border-subtle);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-footer'] [data-jumpy-component='table-cell']::before {

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-HQ4NWZ65.js";
+} from "./chunk-B7QIDGY7.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -2492,7 +2492,7 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
     setOpen(false);
   }
   const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx(PickerTrailingIcon, { type: "date", open: isOpen });
-  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, "data-jumpy-component": "date-picker", style: { position: "relative", width: 312, maxWidth: "100%" }, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, "data-jumpy-component": "date-picker", style: { position: "relative", width: "100%", maxWidth: "100%" }, children: [
     /* @__PURE__ */ jsx(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx(
       JumpInput,
       {
@@ -2614,7 +2614,7 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
     onChange?.(output);
   }
   const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx(PickerTrailingIcon, { type: "time", open: isOpen });
-  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, "data-jumpy-component": "time-picker", style: { position: "relative", width: 340, maxWidth: "100%" }, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, "data-jumpy-component": "time-picker", style: { position: "relative", width: "100%", maxWidth: "100%" }, children: [
     /* @__PURE__ */ jsx(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx(
       JumpInput,
       {

package/dist/theme.js

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

package/package.json

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