@dorsk/tsumikit 0.73.1 → 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),

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/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/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/package.json

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