@redseed/redseed-ui-tailwindcss 7.32.0 → 7.33.1

package/components/td.css

@@ -19,16 +19,18 @@
     @apply whitespace-normal overflow-auto overscroll-auto;
 }
 
-/* Pinned body cell — sticks to the left during horizontal scroll.
-   Background must be opaque so scrolled content doesn't show through;
-   matches the row hover bg when the row is clickable. */
+/* Pinned body cell — sticks to the left during horizontal scroll on sm+ viewports.
+   Below sm the column scrolls normally: a pinned column eats too much of a
+   phone-width table to be useful, so pinning is a liability there.
+   When sticky, the background must be opaque so scrolled content doesn't show
+   through; matches the row hover bg when the row is clickable. */
 .rsui-td--pinned {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background-color: var(--color-background-primary);
+    @apply sm:sticky sm:left-0 sm:z-1 sm:bg-background-primary;
 }
 
+/* Separator is always rendered (display can't transition) but transparent
+   below sm; at sm+ it fades in. Only visible while the viewport is resized
+   across the breakpoint. Disabled under reduced motion. */
 .rsui-td--pinned::after {
     content: '';
     position: absolute;
@@ -38,9 +40,23 @@
     width: 1px;
     background-color: var(--color-border-primary);
     pointer-events: none;
+    opacity: 0;
+    transition: opacity 200ms ease;
+}
+
+@media (width >= 40rem) {
+    .rsui-td--pinned::after {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rsui-td--pinned::after {
+        transition: none;
+    }
 }
 
 .rsui-tr--clickable:hover .rsui-td--pinned,
 .rsui-tr--clickable:focus-visible .rsui-td--pinned {
-    background-color: var(--color-background-disabled);
+    @apply sm:bg-background-disabled;
 }

package/components/th.css

@@ -98,16 +98,17 @@
     @apply rotate-180;
 }
 
-/* Pinned header cell — stays put during horizontal scroll.
+/* Pinned header cell — stays put during horizontal scroll on sm+ viewports.
+   Below sm the column scrolls normally (see td.css for why pinning is a
+   liability on phone-width tables).
    Opaque header bg so scrolled-under cells don't show through.
    Subtle right-edge separator marks the scroll boundary. */
 .rsui-th--pinned {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background-color: var(--color-background-disabled);
+    @apply sm:sticky sm:left-0 sm:z-1 sm:bg-background-disabled;
 }
 
+/* Mirrors the body-cell separator: transparent below sm, fades in at sm+.
+   See td.css for the full rationale. */
 .rsui-th--pinned::after {
     content: '';
     position: absolute;
@@ -117,4 +118,18 @@
     width: 1px;
     background-color: var(--color-border-primary);
     pointer-events: none;
+    opacity: 0;
+    transition: opacity 200ms ease;
+}
+
+@media (width >= 40rem) {
+    .rsui-th--pinned::after {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rsui-th--pinned::after {
+        transition: none;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.32.0",
+    "version": "7.33.1",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",
@@ -12,7 +12,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@tailwindcss/vite": "4.2.2",
-        "tailwindcss": "4.2.2"
+        "@tailwindcss/vite": "4.3.0",
+        "tailwindcss": "4.3.0"
     }
 }