@dorsk/tsumikit 0.31.0 → 0.33.0

package/dist/components/atoms/Skeleton.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	// Shimmering placeholder bar(s) standing in for content that is still
+	// loading. Decorative only — the surrounding region should carry aria-busy.
+	let {
+		width = '100%',
+		height = '1em',
+		lines = 1,
+		circle = false,
+		radius = 'var(--r-sm)',
+		class: klass = '',
+		...rest
+	}: {
+		width?: string;
+		height?: string;
+		/** Stacked bars; the last one is shortened to read as a paragraph. */
+		lines?: number;
+		/** Round avatar placeholder — width follows height. */
+		circle?: boolean;
+		radius?: string;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const w = $derived(circle ? height : width);
+	const r = $derived(circle ? '50%' : radius);
+	const count = $derived(Math.max(1, Math.floor(lines)));
+</script>
+
+<span class="skeleton {klass}" data-tsu="Skeleton" aria-hidden="true" style:width={w} {...rest}>
+	{#each { length: count } as _, i (i)}
+		<span
+			class="skeleton-bar"
+			style:height
+			style:border-radius={r}
+			style:width={count > 1 && i === count - 1 ? '60%' : undefined}
+		></span>
+	{/each}
+</span>
+
+<style>
+	.skeleton {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		max-width: 100%;
+	}
+	.skeleton-bar {
+		display: block;
+		width: 100%;
+		background: linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-elevated) 50%, var(--bg-elevated-2) 75%);
+		background-size: 200% 100%;
+		animation: tsu-shimmer 1.4s ease-in-out infinite;
+	}
+	@keyframes tsu-shimmer {
+		from {
+			background-position: 200% 0;
+		}
+		to {
+			background-position: -200% 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton-bar {
+			animation: none;
+			background: var(--bg-elevated-2);
+		}
+	}
+</style>

package/dist/components/atoms/Skeleton.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    width?: string;
+    height?: string;
+    /** Stacked bars; the last one is shortened to read as a paragraph. */
+    lines?: number;
+    /** Round avatar placeholder — width follows height. */
+    circle?: boolean;
+    radius?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/molecules/EmptyState.svelte

@@ -7,10 +7,13 @@
 	//   • a muted, max-width-limited description
 	//   • an optional action area (slot via `action`, or a built-in button when
 	//     `actionLabel`+`onAction` are passed)
-	// Everything is token-driven. `compact` tightens spacing for inline/table use.
+	// Everything is token-driven. `size` picks the layout: `default`, `compact`
+	// (tighter spacing), or `inline` (a single muted line). `loading` swaps the
+	// chip for a spinner and marks the root busy.
 	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
 
 	let {
 		title,
@@ -22,8 +25,10 @@
 		// richer (multiple buttons, links) use the `action` snippet instead.
 		actionLabel,
 		onAction,
-		// Tighter padding/sizing for inline use (empty table body, narrow panels).
+		// Legacy alias for size="compact".
 		compact = false,
+		size = 'default',
+		loading = false,
 		class: klass = '',
 		// Raw SVG markup for a custom glyph — passed straight to `Icon`.
 		iconChildren,
@@ -31,22 +36,38 @@
 		action,
 		...rest
 	}: {
-		title: string;
-		description?: string;
+		title?: string;
+		description?: string | Snippet;
 		icon?: IconName;
 		tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 		actionLabel?: string;
 		onAction?: () => void;
 		compact?: boolean;
+		size?: 'inline' | 'compact' | 'default';
+		loading?: boolean;
 		class?: string;
 		iconChildren?: Snippet;
 		action?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const sz = $derived(compact ? 'compact' : size);
 </script>
 
-<div class="empty empty-{tone} {compact ? 'empty-compact' : ''} {klass}" data-tsu="EmptyState" {...rest}>
-	{#if icon || iconChildren}
+<div
+	class="empty empty-{tone} {klass}"
+	class:empty-compact={sz === 'compact'}
+	class:empty-inline={sz === 'inline'}
+	class:empty-loading={loading}
+	aria-busy={loading ? 'true' : undefined}
+	data-tsu="EmptyState"
+	{...rest}
+>
+	{#if loading}
+		<span class="empty-chip">
+			<Spinner />
+		</span>
+	{:else if (icon || iconChildren) && sz !== 'inline'}
 		<span class="empty-chip" aria-hidden="true">
 			{#if iconChildren}
 				<Icon>{@render iconChildren()}</Icon>
@@ -55,8 +76,12 @@
 			{/if}
 		</span>
 	{/if}
-	<p class="empty-title">{title}</p>
-	{#if description}<p class="empty-desc">{description}</p>{/if}
+	{#if title}<p class="empty-title">{title}</p>{/if}
+	{#if description}
+		<p class="empty-desc">
+			{#if typeof description === 'function'}{@render description()}{:else}{description}{/if}
+		</p>
+	{/if}
 	{#if action}
 		<div class="empty-action">{@render action()}</div>
 	{:else if actionLabel && onAction}
@@ -113,6 +138,30 @@
 		height: 2.25rem;
 		font-size: 1.125rem;
 	}
+	.empty-inline {
+		flex-direction: row;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-6) var(--sp-4);
+	}
+	.empty-inline .empty-chip {
+		width: auto;
+		height: auto;
+		font-size: 1em;
+		background: none;
+		border: none;
+	}
+	.empty-inline .empty-title {
+		color: var(--text-muted);
+		font-weight: var(--fw-normal);
+		font-size: var(--fs-sm);
+	}
+	.empty-inline .empty-desc {
+		max-width: none;
+	}
+	.empty-inline .empty-action {
+		margin-top: 0;
+	}
 	.empty-title {
 		margin: 0;
 		font-size: var(--fs-md);

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

@@ -1,13 +1,15 @@
 import type { Snippet } from 'svelte';
 import { type IconName } from '../atoms/Icon.svelte';
 type $$ComponentProps = {
-    title: string;
-    description?: string;
+    title?: string;
+    description?: string | Snippet;
     icon?: IconName;
     tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
     actionLabel?: string;
     onAction?: () => void;
     compact?: boolean;
+    size?: 'inline' | 'compact' | 'default';
+    loading?: boolean;
     class?: string;
     iconChildren?: Snippet;
     action?: Snippet;

package/dist/components/molecules/Menu.svelte

@@ -14,21 +14,52 @@
 	// click). Selecting an item runs its action and closes the menu. Focus moves
 	// to the first item when the menu opens. Escape / click-outside close it
 	// (inherited from the native popover).
-	import type { Snippet } from 'svelte';
+	import type { ComponentProps, Snippet } from 'svelte';
 	import Popover from './Popover.svelte';
 	import Icon from '../atoms/Icon.svelte';
 
+	type PopoverProps = ComponentProps<typeof Popover>;
+	type TriggerChrome = Pick<
+		PopoverProps,
+		| 'variant'
+		| 'tone'
+		| 'size'
+		| 'box'
+		| 'control'
+		| 'block'
+		| 'triggerClass'
+		| 'bare'
+		| 'hitArea'
+		| 'disabled'
+		| 'gap'
+		| 'onopen'
+		| 'onclose'
+	>;
+
 	let {
 		label,
 		items,
 		trigger,
-		placement = 'bottom-start'
+		placement = 'bottom-start',
+		variant,
+		tone,
+		size,
+		box,
+		control,
+		block,
+		triggerClass,
+		bare,
+		hitArea,
+		disabled,
+		gap,
+		onopen,
+		onclose
 	}: {
 		label: string;
 		items: MenuItem[];
 		trigger: Snippet;
 		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-	} = $props();
+	} & TriggerChrome = $props();
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
@@ -66,7 +97,27 @@
 	}
 </script>
 
-<Popover {label} {placement} {trigger} onopen={() => queueMicrotask(() => focusAt(0))}>
+<Popover
+	{label}
+	{placement}
+	{trigger}
+	{variant}
+	{tone}
+	{size}
+	{box}
+	{control}
+	{block}
+	{triggerClass}
+	{bare}
+	{hitArea}
+	{disabled}
+	{gap}
+	{onclose}
+	onopen={() => {
+		queueMicrotask(() => focusAt(0));
+		onopen?.();
+	}}
+>
 	<div bind:this={listEl} role="menu" aria-label={label} class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
 			<button

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

@@ -5,13 +5,16 @@ export interface MenuItem {
     danger?: boolean;
     disabled?: boolean;
 }
-import type { Snippet } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+import Popover from './Popover.svelte';
+type PopoverProps = ComponentProps<typeof Popover>;
+type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
 type $$ComponentProps = {
     label: string;
     items: MenuItem[];
     trigger: Snippet;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-};
+} & TriggerChrome;
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/components/molecules/SegmentedControl.svelte

@@ -35,7 +35,11 @@
 		label = 'Options',
 		// `mobile` hides segment labels below the mobile breakpoint, collapsing
 		// labelled segments to centered icon-only squares (aria-label preserved).
+		// `container` does the same when the nearest size container is at most
+		// 35rem wide (the breakpoint is fixed: `@container` cannot read a var).
 		collapseLabels = 'never',
+		scroll = false,
+		block = false,
 		class: klass = '',
 		// Custom rendering per option (overrides the built-in label/count/icon).
 		option: optionSnippet
@@ -48,7 +52,11 @@
 		 *  `control`) so the whole segmented control height-matches its siblings. */
 		control?: boolean;
 		label?: string;
-		collapseLabels?: 'never' | 'mobile';
+		collapseLabels?: 'never' | 'mobile' | 'container';
+		/** Single non-wrapping row that scrolls horizontally (scrollbar hidden). */
+		scroll?: boolean;
+		/** Fill the parent width, sharing it equally between segments. */
+		block?: boolean;
 		class?: string;
 		option?: Snippet<[SegmentOption, boolean]>;
 	} = $props();
@@ -90,6 +98,9 @@
 	class="seg seg-{variant} seg-{size} {klass}"
 	class:seg-control={control}
 	class:seg-collapse-mobile={collapseLabels === 'mobile'}
+	class:collapse-container={collapseLabels === 'container'}
+	class:seg-scroll={scroll}
+	class:seg-block={block}
 	data-tsu="SegmentedControl"
 	{onkeydown}
 >
@@ -132,6 +143,28 @@
 	.seg-icon {
 		border-radius: var(--r-md);
 	}
+	.seg-scroll {
+		flex: 1 0 100%;
+		flex-wrap: nowrap;
+		max-width: 100%;
+		overflow-x: auto;
+		scrollbar-width: none;
+		-webkit-overflow-scrolling: touch;
+	}
+	.seg-scroll::-webkit-scrollbar {
+		display: none;
+	}
+	.seg-scroll .seg-item {
+		flex: none;
+	}
+	.seg-block {
+		display: flex;
+		width: 100%;
+	}
+	.seg-block .seg-item {
+		flex: 1 1 0;
+		justify-content: center;
+	}
 
 	.seg-item {
 		display: inline-flex;
@@ -209,6 +242,18 @@
 			padding: 0.25rem;
 		}
 	}
+	@container (max-width: 35rem) {
+		.collapse-container .seg-item.has-label .seg-label {
+			display: none;
+		}
+		.collapse-container .seg-item.has-label {
+			gap: 0;
+			padding: 0.35rem;
+		}
+		.collapse-container.seg-sm .seg-item.has-label {
+			padding: 0.25rem;
+		}
+	}
 
 	.seg-item:hover:not(:disabled):not(.selected) {
 		color: var(--text);

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

@@ -19,7 +19,11 @@ type $$ComponentProps = {
      *  `control`) so the whole segmented control height-matches its siblings. */
     control?: boolean;
     label?: string;
-    collapseLabels?: 'never' | 'mobile';
+    collapseLabels?: 'never' | 'mobile' | 'container';
+    /** Single non-wrapping row that scrolls horizontally (scrollbar hidden). */
+    scroll?: boolean;
+    /** Fill the parent width, sharing it equally between segments. */
+    block?: boolean;
     class?: string;
     option?: Snippet<[SegmentOption, boolean]>;
 };

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, type ProgressSegment, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
+export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
+export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';

package/package.json

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