@svelte-lean/table 0.15.0 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @svelte-lean/table
 
+## 0.15.1
+
+### Patch Changes
+
+- Pinned columns: the edge shade is one continuous gradient, and it shows only while content lies past that edge. It was a blurred `box-shadow` on every edge cell (`6px 0 8px -6px`), and a blur fades at each cell's top and bottom, so down a column of rows it read as a dashed line. The edge cell keeps its line; the shade is now a `::after` as tall as the cell, `--slean-table-pin-shadow-size` (8px) wide, a `linear-gradient` from `--slean-table-pin-shadow` to transparent (mirrored in RTL). The default ink is lighter: black at 6% (22% dark), from 10% (45%). Where scroll-state container queries are supported (the scroll region is now `container-type: scroll-state`), the start edge shades only while the region can scroll toward the start and the end edge only while it can scroll toward the end, so a table that fits draws no shade; elsewhere it always shows, as before. Behavior change: an edge cell's computed `box-shadow` is `none`; a theme that set `box-shadow` on `[data-pin-edge]` cells keeps its own. Tested in `apps/playground/tests/table/nested.spec.ts` (the shade is a gradient as tall as the cell, absent while the table fits, present once it is scrolled).
+
 ## 0.15.0
 
 No changes in this release.

package/dist/style.css

@@ -79,7 +79,8 @@
 			var(--slean-table-bg)
 		);
 		--slean-table-row-selected: var(--slean-table-selected);
-		--slean-table-pin-shadow: light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.45));
+		--slean-table-pin-shadow: light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.22));
+		--slean-table-pin-shadow-size: 8px;
 		--slean-table-row-lifted-shadow: var(
 			--slean-elevation-3,
 			0 4px 12px light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.5)),
@@ -266,6 +267,7 @@
 		overflow: auto;
 		position: relative;
 		border-block: 1px solid var(--slean-table-border);
+		container-type: scroll-state;
 	}
 	/* Nothing above or below the scroll region (no toolbar, no pager): the root's border is the
 	   line, and the region clips its content to the root's rounded corners. */
@@ -639,19 +641,47 @@
 	:where(thead .slean-table-mover, thead .slean-table-selection, thead .slean-table-expander) {
 		z-index: 4;
 	}
+	/* Pinned edges: a line and a shade as tall as the cell (a blurred shadow faded at each row's
+	   ends, a dashed line); with scroll-state queries, only while content lies past the edge. */
 	:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge]) {
 		border-inline-end: 1px solid var(--slean-table-border);
-		box-shadow: 6px 0 8px -6px var(--slean-table-pin-shadow);
 	}
 	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge]) {
 		border-inline-start: 1px solid var(--slean-table-border);
-		box-shadow: -6px 0 8px -6px var(--slean-table-pin-shadow);
 	}
-	:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge]:dir(rtl)) {
-		box-shadow: -6px 0 8px -6px var(--slean-table-pin-shadow);
+	:where(.slean-table-scroll > table > * > tr > [data-pin-edge])::after {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 100%;
+		inline-size: var(--slean-table-pin-shadow-size);
+		background: linear-gradient(to right, var(--slean-table-pin-shadow), transparent);
+		pointer-events: none;
+	}
+	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge])::after {
+		inset-inline: auto 100%;
+		scale: -1 1;
+	}
+	:where(.slean-table-scroll > table > * > tr > [data-pin-edge]:dir(rtl))::after {
+		scale: -1 1;
+	}
+	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge]:dir(rtl))::after {
+		scale: none;
 	}
-	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge]:dir(rtl)) {
-		box-shadow: 6px 0 8px -6px var(--slean-table-pin-shadow);
+	@supports (container-type: scroll-state) {
+		:where(.slean-table-scroll > table > * > tr > [data-pin-edge])::after {
+			opacity: 0;
+		}
+		@container scroll-state(scrollable: inline-start) {
+			:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge])::after {
+				opacity: 1;
+			}
+		}
+		@container scroll-state(scrollable: inline-end) {
+			:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge])::after {
+				opacity: 1;
+			}
+		}
 	}
 	:where(.slean-table-scroll > table > tbody > tr > td[data-range='true']) {
 		background: var(--slean-table-selected);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",