@dorsk/tsumikit 0.73.0 → 0.73.2

package/README.md

@@ -286,7 +286,8 @@ its icon leading and shows its check trailing, or uses the leading check slot wh
 no icon; selecting closes the menu unless `closeOnSelect={false}` or the item sets `keepOpen`;
 rest props land on the trigger, `count`/`countMax` paint its corner badge and `panelStyle`
 sizes the panel; an item with a `control` snippet renders as a non-button row hosting a native
-`<select>` or nested Popover trigger, keeping the icon column, row height and ↑/↓ navigation),
+`<select>` or nested Popover trigger, keeping the icon column, row height and ↑/↓ navigation;
+labels may repeat, and an optional `id` keeps a row's identity when the list reorders),
 Tabs (omit `panel` for a strip-only tablist of document tabs: `closable` + `onclose(id)`
 close through the ✕, Delete and middle-click, per-tab `leading` snippet, `title`,
 trailing `actions` snippet; `--tab-max-width` truncates long labels),
@@ -1033,6 +1034,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/atoms/Progress.svelte

@@ -96,7 +96,7 @@
 	aria-valuenow={indeterminate ? undefined : value}
 >
 	<div class="bar" style={indeterminate ? undefined : `width: ${pct}%`}></div>
-	{#each markers as m (m.at)}
+	{#each markers as m, i (`${i}:${m.at}`)}
 		<span
 			class="marker tone-{m.tone ? canonicalTone(m.tone) : 'text'}"
 			style="left: {markerPct(m.at)}%"

package/dist/components/atoms/Select.svelte

@@ -112,7 +112,7 @@
 
 {#snippet optionList()}
 	{#if options}
-		{#each sections as section, i (section.group ?? `-${i}`)}
+		{#each sections as section, i (`${i}:${section.group ?? ''}`)}
 			{#if section.group === undefined}
 				{#each section.options as o (o.value)}
 					<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>

package/dist/components/atoms/Slider.svelte

@@ -89,7 +89,7 @@
 	/>
 	{#if tickValues.length > 0}
 		<span class="ticks" aria-hidden="true">
-			{#each tickValues as t (t)}
+			{#each tickValues as t, i (`${i}:${t}`)}
 				<i class="tick" class:reached={t <= Number(value)} style="--f: {frac(t)}"></i>
 			{/each}
 		</span>
@@ -100,7 +100,7 @@
 	{/if}
 	{#if marks.length > 0}
 		<span class="marks" aria-hidden="true">
-			{#each marks as m (m.value)}
+			{#each marks as m, i (`${i}:${m.value}`)}
 				<button type="button" class="mark" class:on={Number(value) === m.value} style="--f: {frac(m.value)}" tabindex="-1" onclick={() => (value = m.value)}>{m.label}</button>
 			{/each}
 		</span>

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/EmojiPicker.svelte

@@ -173,7 +173,7 @@
 						onclick={(e) => onGridClick(e, close)}
 						onkeydown={(e) => onGridKeydown(e, close)}
 					>
-						{#each shown as x, i (x.emoji)}
+						{#each shown as x, i (`${i}:${x.emoji}`)}
 							<div
 								role="option"
 								class="cell"

package/dist/components/molecules/FilterInput.svelte

@@ -429,7 +429,7 @@
 	{#if open && menu}
 		<div bind:this={menuEl} id={listboxId} class="fi__menu" role="listbox" aria-label={kindLabel[menu.kind]}>
 			<div class="fi__menu-head">{kindLabel[menu.kind]}</div>
-			{#each menu.items as item, i (item.insert + i)}
+			{#each menu.items as item, i (`${i}:${item.insert}`)}
 				<button
 					type="button"
 					id="{uid}-opt-{i}"

package/dist/components/molecules/Menu.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" module>
 	export interface MenuItem {
 		label: string;
+		/** Stable row identity; labels may repeat. */
+		id?: string;
 		/** Required for button rows; a `control` row's hosted control acts on its own. */
 		onselect?: () => void;
 		icon?: import('../atoms/Icon.svelte').IconName;
@@ -202,7 +204,7 @@
 >
 	{#snippet children({ close }: { close: () => void })}
 	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
-		{#each items as item (item.label)}
+		{#each items as item, i (item.id ?? `${i}:${item.label}`)}
 			{#if item.control}
 			<div {...item.attrs as HTMLAttributes<HTMLDivElement>} role="none" class="menu-item menu-row" class:danger={item.danger} inert={item.disabled}>
 				{#if item.icon}<Icon name={item.icon} />{/if}

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

@@ -1,5 +1,7 @@
 export interface MenuItem {
     label: string;
+    /** Stable row identity; labels may repeat. */
+    id?: string;
     /** Required for button rows; a `control` row's hosted control acts on its own. */
     onselect?: () => void;
     icon?: import('../atoms/Icon.svelte').IconName;

package/dist/components/molecules/RadialMenu.svelte

@@ -390,7 +390,7 @@
 	{/if}
 	<div id={menuId} role="menu" aria-label={label} class="radial-menu">
 		{#if open}
-			{#each petals as item, i (item.label)}
+			{#each petals as item, i (item.id ?? `${i}:${item.label}`)}
 				{@const p = points[i]}
 				{#if p}
 					{@const glyphs = menuItemGlyphs(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/SelectButton.svelte

@@ -92,7 +92,7 @@
 		onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
 	>
 		{#if groups}
-			{#each groups as g (g.label)}
+			{#each groups as g, i (`${i}:${g.label}`)}
 				<optgroup label={g.label}>
 					{#each g.options as o (o.value)}
 						<option value={o.value}>{o.label}</option>

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.2",
   "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",