@dorsk/tsumikit 0.68.0 → 0.68.1

package/dist/components/molecules/SegmentedControl.svelte

@@ -3,8 +3,10 @@
 		value: string;
 		/** Visible text. Optional in `icon` mode where the icon carries the meaning. */
 		label?: string;
-		/** Optional count badge rendered after the label (filter-pill use). */
-		count?: number;
+		/** Optional count badge rendered after the label (filter-pill use). Numbers
+		 *  get thousands separators (`11178` → `11,178`, fixed en-US so SSR and
+		 *  hydration agree); strings render verbatim (`'99+'`, another locale). */
+		count?: number | string;
 		/** Icon glyph — required for icon-toggle mode, optional alongside a label. */
 		icon?: import('../atoms/Icon.svelte').IconName;
 		/** Greyed out, not selectable, skipped by keyboard navigation. */
@@ -23,6 +25,7 @@
 	// Space/Enter (or click) activate. `value` is bindable.
 	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
+	import { formatSegmentCount } from './segmented-control-count.js';
 	import { nextEnabledSegment } from './segmented-control-keyboard.js';
 
 	let {
@@ -143,7 +146,7 @@
 			{:else}
 				{#if o.icon}<Icon name={o.icon} />{/if}
 				{#if o.label}<span class="seg-label">{o.label}</span>{/if}
-				{#if o.count !== undefined}<span class="seg-count">{o.count}</span>{/if}
+				{#if o.count !== undefined}<span class="seg-count">{formatSegmentCount(o.count)}</span>{/if}
 			{/if}
 		</button>
 	{/each}

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

@@ -2,8 +2,10 @@ export interface SegmentOption {
     value: string;
     /** Visible text. Optional in `icon` mode where the icon carries the meaning. */
     label?: string;
-    /** Optional count badge rendered after the label (filter-pill use). */
-    count?: number;
+    /** Optional count badge rendered after the label (filter-pill use). Numbers
+     *  get thousands separators (`11178` → `11,178`, fixed en-US so SSR and
+     *  hydration agree); strings render verbatim (`'99+'`, another locale). */
+    count?: number | string;
     /** Icon glyph — required for icon-toggle mode, optional alongside a label. */
     icon?: import('../atoms/Icon.svelte').IconName;
     /** Greyed out, not selectable, skipped by keyboard navigation. */

package/dist/components/molecules/segmented-control-count.d.ts

@@ -0,0 +1,2 @@
+/** @param {number | string} count */
+export function formatSegmentCount(count: number | string): string;

package/dist/components/molecules/segmented-control-count.js

@@ -0,0 +1,6 @@
+const countFormat = new Intl.NumberFormat('en-US');
+
+/** @param {number | string} count */
+export function formatSegmentCount(count) {
+	return typeof count === 'number' ? countFormat.format(count) : count;
+}

package/package.json

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