@dorsk/tsumikit 0.73.0 → 0.73.1

package/README.md

@@ -1033,6 +1033,10 @@ half the gap sideways, which stays inside the group's padding, so neighbours
 never overlap. `Input size="sm"` cannot host a pseudo-element and grows to 40px
 instead, as should any control that clips its own overflow:
 `min-height: var(--touch-target-compact)`.
+`Checkbox`, `Button variant="link"` and the `DataTable` sort button take the same
+slab; inside a DataTable it is clipped at the table's top edge. A `SegmentedControl`
+wider than its container switches to the `scroll` layout until it fits again
+(`wrap` wraps instead), and `block` segments ellipsise their labels.
 
 `--control-height-*` and `--box-*` are **required tokens**: a consumer that
 forks `variables.css` must keep them (Button `control`, Select `sm`, every `box`)

package/dist/components/atoms/Button.svelte

@@ -561,7 +561,8 @@
 	   overflow counts towards the scrollable overflow of every scroll ancestor, and
 	   in a row that half lies under the next sibling anyway. Growing further towards
 	   the start would let each slab cover the previous sibling's centre. Text
-	   buttons at size sm take the same shape sized by --touch-slab. */
+	   buttons at size sm and link buttons take the same shape sized by
+	   --touch-slab. */
 	@media (pointer: coarse) {
 		.btn-icon:not(.hit-compact),
 		.btn-icon-inline:not(.hit-compact),
@@ -593,6 +594,16 @@
 			inset-inline-start: var(--touch-slab);
 			inset-inline-end: 0;
 		}
+		.btn-link:not(.hit-compact) {
+			position: relative;
+		}
+		.btn-link:not(.hit-compact)::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
 	}
 
 	/* Two-state (toggle) buttons — e.g. an IconButton with `pressed`. Reacts to

package/dist/components/atoms/Checkbox.svelte

@@ -141,6 +141,18 @@
 	.checkbox:has(input:disabled) {
 		cursor: not-allowed;
 	}
+	@media (pointer: coarse) {
+		.checkbox {
+			position: relative;
+		}
+		.checkbox::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
+	}
 	.sr-only {
 		position: absolute;
 		width: 1px;

package/dist/components/layouts/TabBar.svelte

@@ -207,7 +207,9 @@
 	.tabbar :global(.tabbar-badge) {
 		position: absolute;
 		top: -0.4rem;
-		left: calc(100% - 0.5rem);
+		left: calc(100% - 2px);
+		max-width: none;
+		padding-inline: 0.3rem;
 	}
 	@media (prefers-reduced-motion: reduce) {
 		.tabbar-item {

package/dist/components/molecules/SegmentedControl.svelte

@@ -24,6 +24,7 @@
 	// browser-free keyboard model matches Tabs: ←/→ and Home/End move selection,
 	// Space/Enter (or click) activate. `value` is bindable.
 	import type { Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 	import Icon from '../atoms/Icon.svelte';
 	import { formatSegmentCount } from './segmented-control-count.js';
 	import { nextEnabledSegment } from './segmented-control-keyboard.js';
@@ -95,6 +96,26 @@
 	);
 	const segId = (val: string) => `${baseId}-${val}`;
 
+	// A pill wider than its container falls back to the `scroll` layout; the
+	// class is dropped again once the row fits so the touch slab stays unclipped.
+	let overflowing = $state(false);
+	const watchOverflow: Attachment<HTMLElement> = (node) => {
+		if (wrap || typeof ResizeObserver === 'undefined') {
+			overflowing = false;
+			return;
+		}
+		const check = () => {
+			overflowing = node.scrollWidth - node.clientWidth > 1;
+		};
+		const ro = new ResizeObserver(check);
+		ro.observe(node);
+		check();
+		return () => {
+			ro.disconnect();
+			overflowing = false;
+		};
+	};
+
 	function select(val: string, focus = false) {
 		if (options.find((o) => o.value === val)?.disabled) return;
 		value = val;
@@ -127,8 +148,10 @@
 	class:collapse-container={collapseLabels === 'container'}
 	class:seg-scroll={scroll}
 	class:seg-block={block}
+	class:seg-overflow={overflowing}
 	data-tsu="SegmentedControl"
 	{onkeydown}
+	{@attach watchOverflow}
 >
 	{#each options as o (o.value)}
 		{@const selected = value === o.value}
@@ -165,6 +188,8 @@
 		background: var(--bg-elevated-2);
 		border: 1px solid var(--border);
 		border-radius: var(--r-pill);
+		max-width: 100%;
+		min-width: 0;
 	}
 	.seg-icon {
 		border-radius: var(--r-md);
@@ -193,6 +218,19 @@
 	.seg-scroll .seg-item {
 		flex: none;
 	}
+	.seg-overflow {
+		flex-wrap: nowrap;
+		overflow-x: auto;
+		overflow-y: hidden;
+		scrollbar-width: none;
+		-webkit-overflow-scrolling: touch;
+	}
+	.seg-overflow::-webkit-scrollbar {
+		display: none;
+	}
+	.seg-overflow .seg-item {
+		flex: none;
+	}
 	.seg-block {
 		display: flex;
 		width: 100%;
@@ -200,6 +238,12 @@
 	.seg-block .seg-item {
 		flex: 1 1 0;
 		justify-content: center;
+		min-width: 0;
+	}
+	.seg-block .seg-label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.seg-item {

package/dist/components/molecules/SwipeRow.svelte

@@ -18,6 +18,10 @@
 	 * a drag that is more vertical than horizontal is left to the scroller.
 	 * The same actions are reachable as visually hidden buttons for keyboard
 	 * and screen-reader users.
+	 *
+	 * On touch the browser implicitly captures the pointer on the element under
+	 * the finger; taking capture on the row makes that child fire a bubbling
+	 * `lostpointercapture`, which must not be read as a cancel.
 	 */
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -162,8 +166,8 @@
 		e.preventDefault();
 	}
 
-	function onlostpointercapture() {
-		if (pointerId === null) return;
+	function onlostpointercapture(e: PointerEvent) {
+		if (pointerId === null || e.pointerId !== pointerId || e.target !== e.currentTarget) return;
 		pointerId = null;
 		locked = null;
 		dragging = false;

package/dist/components/molecules/SwipeRow.svelte.d.ts

@@ -13,6 +13,10 @@ export interface SwipeAction {
      * a drag that is more vertical than horizontal is left to the scroller.
      * The same actions are reachable as visually hidden buttons for keyboard
      * and screen-reader users.
+     *
+     * On touch the browser implicitly captures the pointer on the element under
+     * the finger; taking capture on the row makes that child fire a bubbling
+     * `lostpointercapture`, which must not be read as a cancel.
      */
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';

package/dist/components/organisms/DataTable.svelte

@@ -503,6 +503,18 @@
 		.dt-actions {
 			opacity: 1;
 		}
+		/* 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;
+		}
 	}
 	@container (max-width: 30rem) {
 		[data-hide-below='sm'] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.73.0",
+  "version": "0.73.1",
   "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",