@dorsk/tsumikit 0.78.0 → 0.79.0

package/dist/components/molecules/SeekSlider.svelte

@@ -276,7 +276,7 @@
 		height: var(--seek-track);
 		margin-top: calc(var(--seek-track) / -2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 		transform-origin: center;
 		transition: scale var(--dur-fast) var(--ease);
@@ -322,7 +322,7 @@
 		border-radius: var(--r-pill);
 		background: var(--seek-accent);
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transform: translate(-50%, -50%);
 		scale: 0.6;
 		opacity: 0;
@@ -346,7 +346,7 @@
 		.seek:not(.seek--inert):hover .seek-thumb {
 			opacity: 1;
 			scale: 1;
-			box-shadow: var(--shadow-sm), var(--seek-halo);
+			box-shadow: var(--thumb-shadow), var(--seek-halo);
 		}
 		.seek--dragging .seek-thumb {
 			scale: 1.15;
@@ -370,9 +370,9 @@
 		gap: var(--sp-1);
 		padding: var(--sp-1) var(--sp-2);
 		border-radius: var(--r-sm);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		box-shadow: var(--shadow-md);
+		background: var(--raised-fill);
+		border: var(--edge-width) solid var(--surface-edge);
+		box-shadow: var(--raised-shadow);
 		color: var(--text);
 		font-size: var(--fs-xs);
 		font-variant-numeric: tabular-nums;

package/dist/components/molecules/SegmentedControl.svelte

@@ -238,7 +238,7 @@
 	   items fill the inside, which is the height minus border and padding. */
 	.seg {
 		--seg-h: var(--control-md);
-		--seg-inset: calc(var(--sp-0-5) + 1px);
+		--seg-inset: calc(var(--sp-0-5) + var(--edge-width));
 		--seg-item-h: calc(var(--seg-h) - 2 * var(--seg-inset));
 		position: relative;
 		display: inline-flex;
@@ -247,8 +247,8 @@
 		height: var(--seg-h);
 		min-height: var(--seg-h);
 		padding: var(--sp-0-5);
-		background: var(--bg-elevated-2);
-		border: 1px solid var(--border);
+		background: var(--track-fill);
+		border: var(--edge-width) solid var(--track-edge);
 		border-radius: var(--r-pill);
 		max-width: 100%;
 		min-width: 0;
@@ -326,8 +326,8 @@
 		width: 0;
 		height: 0;
 		border-radius: var(--r-pill);
-		background: var(--bg);
-		box-shadow: var(--shadow-sm);
+		background: var(--thumb-fill);
+		box-shadow: var(--thumb-shadow);
 		transform-origin: top left;
 		pointer-events: none;
 		transition:
@@ -430,8 +430,8 @@
 	}
 	.seg-item.selected {
 		color: var(--text);
-		background: var(--bg);
-		box-shadow: var(--shadow-sm);
+		background: var(--thumb-fill);
+		box-shadow: var(--thumb-shadow);
 	}
 	.seg.placed .seg-item.selected {
 		background: transparent;

package/dist/components/molecules/SortableList.svelte

@@ -571,7 +571,7 @@
 	}
 	.sl-row {
 		position: relative;
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.sl-row:last-child {
 		border-bottom: 0;
@@ -609,7 +609,7 @@
 		position: relative;
 		z-index: 1;
 		background: var(--bg-elevated-2);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		transition: none;
 	}
 	.sl-grip,

package/dist/components/molecules/SplitButton.svelte

@@ -168,7 +168,7 @@
 		position: relative;
 		width: var(--split-height);
 		flex: none;
-		margin-inline-start: -1px;
+		margin-inline-start: calc(-1 * var(--edge-width));
 		--pop-trigger-radius: 0 var(--r-md) var(--r-md) 0;
 		--pop-trigger-pad: 0;
 	}

package/dist/components/molecules/Tabs.svelte

@@ -297,7 +297,7 @@
 		flex: 1 1 auto;
 		min-width: 0;
 		gap: var(--sp-1);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 		overflow-x: auto;
 		overflow-y: hidden;
 		scrollbar-width: thin;
@@ -330,7 +330,7 @@
 		font-weight: var(--fw-medium);
 		--icon-size: var(--control-icon-md);
 		border-bottom: 2px solid transparent;
-		margin-bottom: -1px;
+		margin-bottom: calc(-1 * var(--edge-width));
 		max-width: var(--tab-max-width, none);
 		transition:
 			color var(--dur-fast) var(--ease),
@@ -373,7 +373,7 @@
 		align-items: center;
 		gap: var(--sp-1);
 		padding-inline-start: var(--sp-2);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.tabpanel {
 		padding-top: var(--sp-4);

package/dist/components/molecules/ThemePicker.svelte

@@ -257,7 +257,7 @@
 		margin-top: var(--sp-2);
 		padding: var(--sp-1) var(--sp-2);
 		border: 2px solid transparent;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		background: none;
 		color: inherit;

package/dist/components/molecules/Timestamp.svelte

@@ -226,7 +226,7 @@
 	.ts-mode {
 		flex: 1;
 		padding: var(--sp-1) var(--sp-2);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--btn-edge);
 		border-radius: var(--r-sm);
 		background: transparent;
 		color: var(--text-muted);

package/dist/components/molecules/Toggle.svelte

@@ -82,15 +82,16 @@
 		font-weight: var(--fw-medium);
 		line-height: var(--lh-none);
 		--icon-size: var(--control-icon-sm);
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		color: var(--text-muted);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		white-space: nowrap;
 		user-select: none;
 		transition:
 			background var(--dur-fast) var(--ease),
 			border-color var(--dur-fast) var(--ease),
 			color var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease),
 			scale var(--dur-fast) var(--ease-out);
 	}
 	.toggle:disabled {
@@ -125,7 +126,8 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.toggle:hover:not(:disabled) {
-			border-color: var(--border-strong);
+			border-color: var(--surface-edge-strong);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 	}
 	.toggle:active:not(:disabled) {

package/dist/components/molecules/Tooltip.svelte

@@ -206,9 +206,9 @@
 		padding: var(--sp-1) var(--sp-2);
 		background: var(--bg-elevated-2);
 		color: var(--text);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-sm);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		font-size: var(--fs-xs);
 		line-height: var(--lh-snug);
 		white-space: normal;

package/dist/components/molecules/VolumeSlider.svelte

@@ -306,7 +306,7 @@
 		height: var(--vol-track);
 		margin-top: calc(var(--vol-track) / -2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 	}
 	.vol--vertical .vol-track {
@@ -354,7 +354,7 @@
 		border-radius: var(--r-pill);
 		background: var(--vol-accent);
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transform: translate(-50%, -50%);
 		scale: 0.6;
 		opacity: 0;
@@ -375,7 +375,7 @@
 		.vol-slab:not([aria-disabled='true']):hover .vol-thumb {
 			opacity: 1;
 			scale: 1;
-			box-shadow: var(--shadow-sm), var(--vol-halo);
+			box-shadow: var(--thumb-shadow), var(--vol-halo);
 		}
 		.vol--dragging .vol-thumb {
 			scale: 1.15;

package/dist/components/organisms/ConversationFeed.svelte

@@ -181,6 +181,6 @@
 		margin-inline: auto;
 		z-index: 1;
 		border-radius: var(--r-pill);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 	}
 </style>

package/dist/components/organisms/ConversationPanel.svelte

@@ -45,7 +45,7 @@
 		gap: var(--sp-2);
 		min-width: 0;
 		padding: var(--sp-2) var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-body {
 		flex: 1;
@@ -55,12 +55,12 @@
 	}
 	.panel-status {
 		flex: none;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-composer {
 		flex: none;
 		padding: var(--sp-2) var(--sp-3) var(--sp-3);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-status + .panel-composer {
 		border-top: 0;

package/dist/components/organisms/DataTable.svelte

@@ -239,6 +239,7 @@
 					<th
 						scope="col"
 						data-hide-below={col.hideBelow}
+						class:dt-sortable={col.sortable && !headerSnippets[col.key]}
 						style:width={col.width}
 						style:text-align={col.align ?? 'left'}
 						aria-sort={col.sortable
@@ -363,7 +364,7 @@
 		width: 100%;
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-lg);
 		container-type: inline-size;
 	}
@@ -382,7 +383,7 @@
 	th,
 	td {
 		padding: var(--sp-2) var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.dt.sm th,
 	.dt.sm td {
@@ -394,7 +395,7 @@
 		color: var(--text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		white-space: nowrap;
 	}
 	.dt.sticky th {
@@ -430,6 +431,15 @@
 		color: inherit;
 		cursor: pointer;
 	}
+	th.dt-sortable {
+		position: relative;
+	}
+	/* The whole header cell is the sort hit area. */
+	.dt-sort::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
 	.dt-arrow {
 		display: inline-block;
 		opacity: 0.4;
@@ -527,17 +537,9 @@
 		tbody tr:last-child td :global(.checkbox::before) {
 			inset-block-end: 0;
 		}
-		/* Sort slab: inline-end stays at 0 so it never reaches the next header
-		   cell, and the inline-start reach stays inside the cell's own padding. */
-		.dt-sort {
-			position: relative;
-		}
-		.dt-sort::before {
-			content: '';
-			position: absolute;
-			inset-block: var(--touch-slab);
-			inset-inline-start: var(--touch-slab);
-			inset-inline-end: 0;
+		/* The cell overlay grows vertically to the compact target, never sideways. */
+		.dt-sort::after {
+			inset-block: min(0px, calc((100% - var(--touch-target-compact)) / 2));
 		}
 	}
 	@container (max-width: 30rem) {
@@ -587,7 +589,7 @@
 		align-items: baseline;
 		gap: var(--sp-1) var(--sp-3);
 		padding: var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	[data-stacked] tbody tr:last-child {
 		border-bottom: none;
@@ -679,7 +681,7 @@
 	.dt-more {
 		text-align: center;
 		padding: var(--sp-2);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.dt-more-btn {
 		border: 0;

package/dist/styles/tokens.css

@@ -285,6 +285,40 @@
   --shift-xs: 2px;
   --shift-sm: 4px;
   --shift-md: 8px;
+
+  /* Structural look. Components read these instead of hardcoding borders,
+     fills and shadows, so a theme can restyle the kit's surfaces from tokens. */
+  --edge-width: 1px;
+  --surface-fill: var(--bg-elevated);
+  --surface-fill-2: var(--bg-elevated-2);
+  --surface-edge: var(--border);
+  --surface-edge-strong: var(--border-strong);
+  --surface-shadow: 0 0 0 0 transparent;
+  --surface-shadow-hover: var(--surface-shadow);
+  --raised-fill: var(--bg-elevated);
+  --raised-edge: var(--border-strong);
+  --raised-shadow: var(--shadow-md);
+  --overlay-fill: var(--bg-elevated);
+  --overlay-edge: var(--border);
+  --overlay-shadow: var(--shadow-lg);
+  --control-fill: var(--bg);
+  --control-edge: var(--border-strong);
+  --control-edge-hover: var(--text-faint);
+  --control-shadow: 0 0 0 0 transparent;
+  --track-fill: var(--bg-elevated-2);
+  --track-edge: var(--border);
+  --thumb-fill: var(--bg);
+  --thumb-shadow: var(--shadow-sm);
+  --btn-fill: var(--surface);
+  --btn-edge: var(--border-strong);
+  --btn-shadow: 0 0 0 0 transparent;
+  --btn-shadow-hover: var(--btn-shadow);
+  --btn-primary-fill: var(--accent);
+  --btn-primary-edge: var(--accent);
+  --btn-primary-shadow: 0 0 0 0 transparent;
+  --btn-primary-shadow-hover: var(--btn-primary-shadow);
+  --hover-lift: 0px;
+  --focus-glow: 0 0 0 0 transparent;
 }
 
 @supports (animation-timing-function: linear(0, 1)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.78.0",
+  "version": "0.79.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",