simple-table-core 3.4.1 → 3.5.2

package/src/styles/base.css

@@ -193,6 +193,8 @@ input {
 .st-header-container.st-header-scroll-padding::after {
   content: "";
   display: block;
+  /* `*` does not target ::after; border-box keeps the bottom border inside the flex line. */
+  box-sizing: border-box;
   width: var(--st-after-width, default-width);
   flex-shrink: 0;
   background-color: var(--st-header-background-color);
@@ -282,14 +284,12 @@ input {
   left: 0;
   display: flex;
   z-index: 10;
-  pointer-events: none;
 }
 
 .st-sticky-section-left,
 .st-sticky-section-main,
 .st-sticky-section-right {
   overflow: hidden;
-  pointer-events: none;
 }
 
 .st-sticky-section-left {
@@ -369,9 +369,9 @@ input {
 }
 .st-row.hovered .st-cell-editing,
 .st-row.hovered
-  .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(
-    .st-cell-column-selected
-  ):not(.st-cell-column-selected-first) {
+  .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(
+    .st-cell-column-selected-first
+  ) {
   background-color: var(--st-hover-row-background-color);
 }
 /* Separate hover background for sub-cells */
@@ -396,9 +396,9 @@ input {
 /* Selected row hover state - should override selected background when hovering */
 .st-row.selected.hovered .st-cell-editing,
 .st-row.selected.hovered
-  .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(
-    .st-cell-column-selected
-  ):not(.st-cell-column-selected-first) {
+  .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(
+    .st-cell-column-selected-first
+  ) {
   background-color: var(--st-hover-row-background-color);
 }
 
@@ -601,8 +601,7 @@ input {
 .st-resizeable .st-body-pinned-right .st-cell-content,
 .st-resizeable .st-sticky-section-right .st-cell-content {
   padding-left: calc(
-    var(--st-cell-padding) + var(--st-spacing-small) +
-      var(--st-resize-handle-container-width)
+    var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-container-width)
   );
   padding-right: var(--st-cell-padding);
 }
@@ -614,8 +613,7 @@ input {
 .st-resizeable .st-sticky-section-main .st-cell-content {
   padding-left: var(--st-cell-padding);
   padding-right: calc(
-    var(--st-cell-padding) + var(--st-spacing-small) +
-      var(--st-resize-handle-container-width)
+    var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-container-width)
   );
 }
 
@@ -858,7 +856,12 @@ input {
   display: flex;
   align-items: center;
   border-top: var(--st-border-width) solid var(--st-border-color);
-  height: 12px;
+  /* Container content area = height - border-top.
+     Visible bar thickness = host / scrollbar height (below).
+     Padding above + below the bar = content area - bar thickness, split
+     evenly by align-items: center. Currently: 13 - 1 = 12px content,
+     8px bar -> 2px padding top + 2px padding bottom. */
+  height: 13px;
   width: 100%;
   background-color: var(--st-scrollbar-bg-color);
 }
@@ -874,12 +877,28 @@ input {
   border-left: var(--st-border-width) solid var(--st-border-color);
 }
 .st-horizontal-scrollbar-left,
-.st-horizontal-scrollbar-right {
-  height: 100%;
+.st-horizontal-scrollbar-right,
+.st-horizontal-scrollbar-middle {
+  height: 8px;
+  /* Suppress vertical scrolling on these elements. The inner sentinel <div>
+     is 0.3px tall purely to give the host a horizontal scrollWidth wider
+     than its clientWidth (so the horizontal scrollbar appears). When the
+     host has no spare vertical content area (e.g. host height ==
+     scrollbar height), that 0.3px sentinel triggers a phantom vertical
+     scrollbar reservation, which eats into clientWidth and desyncs the
+     horizontal thumb's drag math from the actual scrollable range. Forcing
+     overflow-y: hidden removes that possibility entirely. */
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* `scrollbar-color` is inherited from `.simple-table-root`. When set to a
+     non-`auto` value, Chromium switches the element to standard CSS
+     scrollbar mode and ignores the `::-webkit-scrollbar` pseudo rules
+     below. Resetting to `auto` re-enables the WebKit pseudo styling so
+     the scrollbar is rendered at exactly the height we specify. */
+  scrollbar-color: auto;
 }
 .st-horizontal-scrollbar-middle {
   flex-grow: 1;
-  min-height: 11px;
 }
 .st-horizontal-scrollbar-left > div,
 .st-horizontal-scrollbar-right > div,
@@ -887,6 +906,16 @@ input {
   height: 0.3px;
 }
 
+/* Match the host height exactly: bar fills the host with no internal gap,
+   and the host is centered inside the container's content area, producing
+   the symmetric top/bottom padding around the bar. Keep this in sync with
+   the host height above. */
+.st-horizontal-scrollbar-left::-webkit-scrollbar,
+.st-horizontal-scrollbar-right::-webkit-scrollbar,
+.st-horizontal-scrollbar-middle::-webkit-scrollbar {
+  height: 8px;
+}
+
 .st-footer {
   display: flex;
   justify-content: space-between;
@@ -926,8 +955,7 @@ input {
   background-color: transparent;
   border: none;
   border-radius: var(--st-border-radius);
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
 }
 .st-next-prev-btn {
   fill: var(--st-next-prev-btn-color);
@@ -954,8 +982,7 @@ input {
   color: var(--st-page-btn-color);
   border: none;
   border-radius: var(--st-border-radius);
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1004,8 +1031,7 @@ input {
   font-size: 0.875rem;
 }
 .editable-cell-input:focus {
-  border: var(--st-border-width) solid
-    var(--st-editable-cell-focus-border-color);
+  border: var(--st-border-width) solid var(--st-editable-cell-focus-border-color);
 }
 .st-column-editor {
   display: flex;
@@ -1375,8 +1401,7 @@ input {
   border-bottom: var(--st-border-width) solid var(--st-border-color);
   color: var(--st-cell-color);
   font-weight: var(--st-font-weight-bold);
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
 }
 
 .st-group-header:hover {
@@ -1436,6 +1461,41 @@ input {
   pointer-events: none;
 }
 
+/*
+ * Accordion animation window for nested-column and row-grouping collapse/expand.
+ *
+ * Active for one collapse/expand operation: SimpleTableVanilla adds the
+ * `st-accordion-animating` class plus inline `--st-accordion-duration` /
+ * `--st-accordion-easing` custom properties on the table root, then removes
+ * them once the animation ends.
+ *
+ * The transition applies to `width`/`height` only — `transform` is driven by
+ * the FLIP `AnimationCoordinator` with its own inline transition string, and
+ * transitioning `top`/`left` here would race with that. `overflow: hidden` is
+ * needed so cell content is clipped while the cell shrinks/grows from zero
+ * size in the active axis.
+ */
+.st-accordion-animating .st-cell,
+.st-accordion-animating .st-header-cell {
+  transition:
+    width var(--st-accordion-duration, var(--st-transition-duration))
+      var(--st-accordion-easing, var(--st-transition-ease)),
+    height var(--st-accordion-duration, var(--st-transition-duration))
+      var(--st-accordion-easing, var(--st-transition-ease));
+  overflow: hidden;
+}
+
+/*
+ * Nested grid rows position themselves with `transform: translate3d(0, Ypx, 0)`
+ * (not `style.top`), so the FLIP-style cell coordinator doesn't drive them.
+ * SectionRenderer applies an inline transition on transform/height when it
+ * updates an existing nested-grid-row in place (because an unrelated row
+ * above expanded/collapsed, or a sibling's child data resolved and changed
+ * total layout height) — that lets the inline-style update interpolate
+ * instead of snapping. Initial creation deliberately writes the transform
+ * without a transition so the row appears at its destination immediately.
+ */
+
 /* Cell update animation */
 @keyframes cell-flash {
   0% {
@@ -1548,8 +1608,7 @@ input {
   padding: var(--st-spacing-small) var(--st-spacing-medium);
   cursor: pointer;
   white-space: nowrap;
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
   color: var(--st-cell-color);
   font-size: 0.9em;
 }
@@ -1650,8 +1709,7 @@ input {
   width: 24px;
   border-radius: 50%;
   cursor: pointer;
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
   font-size: 0.9em;
 }
 
@@ -1685,8 +1743,7 @@ input {
   padding: 12px 8px;
   border-radius: var(--st-border-radius);
   cursor: pointer;
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
 }
 
 .st-datepicker-month:hover,
@@ -1713,8 +1770,7 @@ input {
   border-radius: var(--st-border-radius);
   padding: 6px 12px;
   cursor: pointer;
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
   color: var(--st-cell-color);
 }
 
@@ -1750,8 +1806,7 @@ input {
   color: var(--st-cell-color);
   font-family: inherit;
   outline: none;
-  transition: border-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: border-color var(--st-transition-duration) var(--st-transition-ease);
 }
 
 .st-filter-input:focus {
@@ -1775,8 +1830,7 @@ input {
   font-family: inherit;
   cursor: pointer;
   outline: none;
-  transition: border-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: border-color var(--st-transition-duration) var(--st-transition-ease);
 }
 
 .st-filter-select:focus {
@@ -1802,8 +1856,7 @@ input {
   font-family: inherit;
   appearance: none;
   -webkit-appearance: none;
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
 }
 /* Keyboard only — avoids a stuck ring after mouse click (especially on bordered Clear) */
 .st-filter-button:focus {
@@ -1867,8 +1920,7 @@ input {
   appearance: none;
   -webkit-appearance: none;
   text-align: left;
-  transition: border-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: border-color var(--st-transition-duration) var(--st-transition-ease);
 }
 
 .st-custom-select-trigger:focus {
@@ -1916,8 +1968,7 @@ input {
   flex-shrink: 0;
   padding: var(--st-spacing-small);
   cursor: pointer;
-  transition: background-color var(--st-transition-duration)
-    var(--st-transition-ease);
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2062,18 +2113,18 @@ input {
 /* Maintain column borders on hover */
 .st-column-borders
   .st-row.hovered
-  .st-cell:not(.st-last-column):not(.st-cell-selected):not(
-    .st-cell-selected-first
-  ):not(.st-cell-column-selected):not(.st-cell-column-selected-first) {
+  .st-cell:not(.st-last-column):not(.st-cell-selected):not(.st-cell-selected-first):not(
+    .st-cell-column-selected
+  ):not(.st-cell-column-selected-first) {
   box-shadow: var(--st-border-width) 0 0 0 var(--st-border-color);
 }
 
 /* Maintain column borders on selected row hover */
 .st-column-borders
   .st-row.selected.hovered
-  .st-cell:not(.st-last-column):not(.st-cell-selected):not(
-    .st-cell-selected-first
-  ):not(.st-cell-column-selected):not(.st-cell-column-selected-first) {
+  .st-cell:not(.st-last-column):not(.st-cell-selected):not(.st-cell-selected-first):not(
+    .st-cell-column-selected
+  ):not(.st-cell-column-selected-first) {
   box-shadow: var(--st-border-width) 0 0 0 var(--st-border-color);
 }
 

package/src/styles/themes/modern-light.css

@@ -1,7 +1,7 @@
 /* Modern Light Theme - Clean, minimal design inspired by contemporary table UIs
  * 
  * Design Philosophy:
- * - Subtle borders (#f3f4f6) for a clean, uncluttered look
+ * - Light gray borders (#e5e7eb) for structure without heavy chrome
  * - White backgrounds with minimal color variation
  * - Hover states instead of alternating row colors
  * - Generous padding (12px) for better readability
@@ -26,8 +26,8 @@
   --st-scrollbar-thumb-color: #d1d5db;
   --st-scrollbar-width: thin;
 
-  /* Base/Structural colors - Very subtle borders */
-  --st-border-color: #f3f4f6;
+  /* Base/Structural colors - Visible but still light (gray-200) */
+  --st-border-color: #e5e7eb;
   --st-footer-background-color: var(--st-white);
   --st-last-group-row-separator-border-color: #e5e7eb;
 
@@ -132,30 +132,30 @@
 
 /* Modern Light theme specific overrides for even cleaner look */
 .theme-modern-light .st-wrapper {
-  border: 1px solid #f3f4f6;
+  border: 1px solid var(--st-border-color);
 }
 
 /* Subtle header border */
 .theme-modern-light .st-header-pinned-left,
 .theme-modern-light .st-header-main,
 .theme-modern-light .st-header-pinned-right {
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--st-border-color);
 }
 
 /* Remove heavy borders on pinned sections */
 .theme-modern-light .st-header-pinned-left,
 .theme-modern-light .st-body-pinned-left {
-  border-right: 1px solid #f3f4f6;
+  border-right: 1px solid var(--st-border-color);
 }
 
 .theme-modern-light .st-header-pinned-right,
 .theme-modern-light .st-body-pinned-right {
-  border-left: 1px solid #f3f4f6;
+  border-left: 1px solid var(--st-border-color);
 }
 
-/* Cleaner row separators */
+/* Row separators — match grid lines for readable horizontal breaks */
 .theme-modern-light .st-row-separator {
-  background-color: #f9fafb;
+  background-color: var(--st-border-color);
 }
 
 /* Lighter header cell styling */
@@ -178,7 +178,7 @@
 
 /* Modern footer styling */
 .theme-modern-light .st-footer {
-  border-top: 1px solid #f3f4f6;
+  border-top: 1px solid var(--st-border-color);
   background-color: var(--st-white);
   padding: 12px 16px;
   gap: 12px;
@@ -242,13 +242,13 @@
 
 /* Modern scrollbar */
 .theme-modern-light .st-horizontal-scrollbar-container {
-  border-top: 1px solid #f3f4f6;
+  border-top: 1px solid var(--st-border-color);
   background-color: #fafafa;
 }
 
 /* Cleaner group headers */
 .theme-modern-light .st-group-header {
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--st-border-color);
   font-weight: 500;
 }
 

package/src/styles/themes/theme-custom.css

@@ -16,8 +16,8 @@
   --st-scrollbar-thumb-color: #d1d5db;
   --st-scrollbar-width: thin;
 
-  /* Base/Structural colors - Very subtle borders */
-  --st-border-color: #f3f4f6;
+  /* Base/Structural colors - aligned with modern-light (gray-200) */
+  --st-border-color: #e5e7eb;
   --st-footer-background-color: var(--st-white);
   --st-last-group-row-separator-border-color: #e5e7eb;