@dorsk/tsumikit 0.38.1 → 0.39.0

package/dist/components/layouts/NavItem.svelte

@@ -27,7 +27,9 @@
 		onclick,
 		badge,
 		badgeTone = 'neutral',
+		orientation = 'horizontal',
 		children,
+		class: klass = '',
 		...rest
 	}: {
 		icon?: IconName;
@@ -48,8 +50,13 @@
 		badge?: string | number;
 		/** Tone for the trailing badge when the item is not active. */
 		badgeTone?: BadgeTone;
+		/** `vertical` stacks the icon over the label with the badge overlaid on the
+		 *  icon corner (bottom tab bars). */
+		orientation?: 'horizontal' | 'vertical';
 		children?: Snippet;
 		[key: string]: unknown;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	// Treat 0 / '' as "no badge" so callers can pass a raw count without guarding.
@@ -61,7 +68,8 @@
 	data-tsu="NavItem"
 	{href}
 	type={href ? undefined : 'button'}
-	class="nav-item"
+	class="nav-item {klass}"
+	class:vertical={orientation === 'vertical'}
 	class:active
 	class:bar={activeStyle === 'bar'}
 	title={label}
@@ -148,6 +156,19 @@
 	.nav-trail {
 		flex: none;
 	}
+	.nav-item.vertical {
+		flex-direction: column;
+		justify-content: center;
+		gap: 2px;
+		padding: var(--sp-1) var(--sp-2);
+		font-size: var(--fs-xs);
+		text-align: center;
+	}
+	.nav-item.vertical .nav-trail {
+		position: absolute;
+		top: 0;
+		left: calc(50% + 0.4rem);
+	}
 	/* Dot is the rail-width stand-in for the badge: hidden at full width. */
 	.nav-dot {
 		display: none;

package/dist/components/layouts/NavItem.svelte.d.ts

@@ -20,8 +20,13 @@ type $$ComponentProps = {
     badge?: string | number;
     /** Tone for the trailing badge when the item is not active. */
     badgeTone?: BadgeTone;
+    /** `vertical` stacks the icon over the label with the badge overlaid on the
+     *  icon corner (bottom tab bars). */
+    orientation?: 'horizontal' | 'vertical';
     children?: Snippet;
     [key: string]: unknown;
+    class?: string;
+    style?: string;
 };
 declare const NavItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavItem = ReturnType<typeof NavItem>;

package/dist/components/layouts/NavSection.svelte

@@ -10,6 +10,7 @@
 	let {
 		label,
 		children,
+		class: klass = '',
 		...rest
 	}: {
 		/** Optional section heading; rendered uppercase + mono. Omit for an
@@ -17,10 +18,12 @@
 		label?: string;
 		children?: Snippet;
 		[key: string]: unknown;
+		class?: string;
+		style?: string;
 	} = $props();
 </script>
 
-<div class="nav-section" data-tsu="NavSection" {...rest}>
+<div class="nav-section {klass}" data-tsu="NavSection" {...rest}>
 	{#if label}
 		<div class="nav-section-label">{label}</div>
 	{/if}

package/dist/components/layouts/NavSection.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     label?: string;
     children?: Snippet;
     [key: string]: unknown;
+    class?: string;
+    style?: string;
 };
 declare const NavSection: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavSection = ReturnType<typeof NavSection>;

package/dist/components/layouts/ResizablePanel.svelte

@@ -26,7 +26,10 @@
 		onclose,
 		scrim,
 		fullWidthBelow,
-		clampToViewport = true
+		clampToViewport = true,
+		collapseControl,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		/** Content shown while the panel is expanded. */
 		panel: Snippet;
@@ -55,6 +58,9 @@
 		/** Keep the collapse handle in view when the panel scrolls past the
 		 *  viewport, repositioning on scroll/resize via requestAnimationFrame. */
 		stickyHandle?: boolean;
+		/** Render the edge chevron. Defaults to on inline, off in overlay mode
+		 *  (Escape and the scrim already close a drawer). */
+		collapseControl?: boolean;
 		/** `inline` shares the row with `children`; `overlay` fixes the panel to
 		 *  its viewport edge as a non-modal drawer above the page. */
 		mode?: 'inline' | 'overlay';
@@ -69,6 +75,8 @@
 		fullWidthBelow?: string;
 		/** Overlay mode: cap the width at the viewport and re-clamp on window resize. */
 		clampToViewport?: boolean;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	let root: HTMLDivElement;
@@ -83,6 +91,7 @@
 	let fullBleed = $state(false);
 
 	const overlay = $derived(mode === 'overlay');
+	const showCollapseControl = $derived(collapseControl ?? !overlay);
 	const shown = $derived(overlay ? open : !collapsed);
 	const showScrim = $derived(overlay && open && (scrim ?? true));
 
@@ -268,14 +277,14 @@
 
 <div
 	bind:this={root}
-	class="panel-layout"
+	class="panel-layout {klass}"
 	class:left={side === 'left'}
 	class:right={side === 'right'}
 	class:collapsed={!overlay && collapsed}
 	class:overlay
 	class:full-bleed={fullBleed}
 	class:resizing
-	style="--panel-width: {currentWidth}px"
+	style="--panel-width: {currentWidth}px; {styleProp}"
 	data-tsu="ResizablePanel"
 >
 	{#if showScrim}
@@ -319,6 +328,7 @@
 				></div>
 			{/if}
 
+			{#if showCollapseControl}
 			<button
 				bind:this={handleEl}
 				type="button"
@@ -333,6 +343,7 @@
 			>
 				<Icon name={toggleIcon} size={14} />
 			</button>
+			{/if}
 		</svelte:element>
 	{/if}
 

package/dist/components/layouts/ResizablePanel.svelte.d.ts

@@ -27,6 +27,9 @@ type $$ComponentProps = {
     /** Keep the collapse handle in view when the panel scrolls past the
      *  viewport, repositioning on scroll/resize via requestAnimationFrame. */
     stickyHandle?: boolean;
+    /** Render the edge chevron. Defaults to on inline, off in overlay mode
+     *  (Escape and the scrim already close a drawer). */
+    collapseControl?: boolean;
     /** `inline` shares the row with `children`; `overlay` fixes the panel to
      *  its viewport edge as a non-modal drawer above the page. */
     mode?: 'inline' | 'overlay';
@@ -41,6 +44,8 @@ type $$ComponentProps = {
     fullWidthBelow?: string;
     /** Overlay mode: cap the width at the viewport and re-clamp on window resize. */
     clampToViewport?: boolean;
+    class?: string;
+    style?: string;
 };
 declare const ResizablePanel: import("svelte").Component<$$ComponentProps, {}, "open" | "collapsed">;
 type ResizablePanel = ReturnType<typeof ResizablePanel>;

package/dist/components/layouts/Stack.svelte

@@ -10,6 +10,10 @@
 		gap = 'var(--sp-3)',
 		align,
 		justify,
+		grow = false,
+		shrink = true,
+		fill = false,
+		push,
 		class: klass = '',
 		children,
 		...rest
@@ -18,7 +22,16 @@
 		gap?: string;
 		align?: string;
 		justify?: string;
+		/** `flex: 1 1 0` inside a parent row/column. */
+		grow?: boolean;
+		/** `false` pins the stack (`flex: none`). */
+		shrink?: boolean;
+		/** `height: 100%` to fill a flex parent. */
+		fill?: boolean;
+		/** Auto margin pushing the stack to the start/end of its parent. */
+		push?: 'start' | 'end';
 		class?: string;
+		style?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
@@ -28,6 +41,11 @@
 	this={as}
 	data-tsu="Stack"
 	class="stack-c {klass}"
+	class:grow
+	class:no-shrink={!shrink}
+	class:fill
+	class:push-start={push === 'start'}
+	class:push-end={push === 'end'}
 	style:gap
 	style:align-items={align}
 	style:justify-content={justify}
@@ -42,4 +60,27 @@
 		flex-direction: column;
 		min-width: 0;
 	}
+	.stack-c > :global([data-grow]) {
+		flex: 1 1 0;
+		min-height: 0;
+	}
+	.stack-c > :global([data-shrink='false']) {
+		flex: none;
+	}
+	.grow {
+		flex: 1 1 0;
+		min-height: 0;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.fill {
+		height: 100%;
+	}
+	.push-start {
+		margin-block-end: auto;
+	}
+	.push-end {
+		margin-block-start: auto;
+	}
 </style>

package/dist/components/layouts/Stack.svelte.d.ts

@@ -4,7 +4,16 @@ type $$ComponentProps = {
     gap?: string;
     align?: string;
     justify?: string;
+    /** `flex: 1 1 0` inside a parent row/column. */
+    grow?: boolean;
+    /** `false` pins the stack (`flex: none`). */
+    shrink?: boolean;
+    /** `height: 100%` to fill a flex parent. */
+    fill?: boolean;
+    /** Auto margin pushing the stack to the start/end of its parent. */
+    push?: 'start' | 'end';
     class?: string;
+    style?: string;
     children?: Snippet;
     [key: string]: unknown;
 };

package/dist/components/layouts/Toolbar.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	// Horizontal action bar. Below `collapseBelow` (measured on the bar's own box)
+	// every child marked `data-overflow` is hidden and a `…` button opens a Menu
+	// with `items` (or the `overflow` snippet in a Popover) that stands in for
+	// them. `sticky` pins the bar under `stickyOffset`.
+	import type { Snippet } from 'svelte';
+	import IconButton from '../molecules/IconButton.svelte';
+	import Menu, { type MenuItem } from '../molecules/Menu.svelte';
+	import Popover from '../molecules/Popover.svelte';
+
+	let {
+		children,
+		items,
+		overflow,
+		collapseBelow,
+		sticky = false,
+		stickyOffset = '0px',
+		density = 'default',
+		overflowLabel = 'More',
+		label,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		children: Snippet;
+		/** Menu rows standing in for the collapsed `data-overflow` children. */
+		items?: MenuItem[];
+		/** Free-form panel content instead of `items`. */
+		overflow?: Snippet;
+		/** Width (px/em/rem) under which `data-overflow` children collapse. */
+		collapseBelow?: string;
+		sticky?: boolean;
+		stickyOffset?: string;
+		density?: 'compact' | 'default';
+		overflowLabel?: string;
+		/** Accessible name of the bar (`role="toolbar"`). */
+		label?: string;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	let el = $state<HTMLDivElement | null>(null);
+	let collapsed = $state(false);
+
+	function toPx(length: string, node: HTMLElement): number {
+		const n = Number.parseFloat(length);
+		const fontSize = (x: Element) => Number.parseFloat(getComputedStyle(x).fontSize);
+		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
+		if (length.endsWith('em')) return n * fontSize(node);
+		return n;
+	}
+
+	$effect(() => {
+		if (!collapseBelow || !el) {
+			collapsed = false;
+			return;
+		}
+		const node = el;
+		const limit = toPx(collapseBelow, node);
+		const ro = new ResizeObserver(([entry]) => {
+			collapsed = entry.contentRect.width < limit;
+		});
+		ro.observe(node);
+		return () => ro.disconnect();
+	});
+
+	const hasOverflow = $derived(!!items?.length || !!overflow);
+</script>
+
+<div
+	bind:this={el}
+	data-tsu="Toolbar"
+	role="toolbar"
+	aria-label={label}
+	class="toolbar density-{density} {klass}"
+	class:sticky
+	class:collapsed
+	data-collapsed={collapsed || undefined}
+	style="--toolbar-top: {stickyOffset}; {styleProp}"
+>
+	{@render children()}
+	{#if collapsed && hasOverflow}
+		{#if items?.length}
+			<Menu label={overflowLabel} {items} placement="bottom-end" box="sm">
+				{#snippet trigger()}<IconButton icon="more" label={overflowLabel} box="sm" />{/snippet}
+			</Menu>
+		{:else if overflow}
+			<Popover label={overflowLabel} placement="bottom-end" box="sm">
+				{#snippet trigger()}<IconButton icon="more" label={overflowLabel} box="sm" />{/snippet}
+				<div class="overflow-panel">{@render overflow()}</div>
+			</Popover>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.toolbar {
+		display: flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		gap: var(--sp-2);
+		min-width: 0;
+		container-type: inline-size;
+	}
+	.density-compact {
+		gap: var(--sp-1);
+	}
+	.sticky {
+		position: sticky;
+		top: var(--toolbar-top, 0);
+		z-index: calc(var(--z-header) - 1);
+		background: var(--bg);
+	}
+	.collapsed :global([data-overflow]) {
+		display: none;
+	}
+	.overflow-panel {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-1);
+		padding: var(--sp-1);
+	}
+</style>

package/dist/components/layouts/Toolbar.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import { type MenuItem } from '../molecules/Menu.svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    /** Menu rows standing in for the collapsed `data-overflow` children. */
+    items?: MenuItem[];
+    /** Free-form panel content instead of `items`. */
+    overflow?: Snippet;
+    /** Width (px/em/rem) under which `data-overflow` children collapse. */
+    collapseBelow?: string;
+    sticky?: boolean;
+    stickyOffset?: string;
+    density?: 'compact' | 'default';
+    overflowLabel?: string;
+    /** Accessible name of the bar (`role="toolbar"`). */
+    label?: string;
+    class?: string;
+    style?: string;
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/molecules/AttachmentList.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	// Removable file chips for a composer or upload form.
+	import Badge from '../atoms/Badge.svelte';
+
+	export type Attachment = { name: string; size?: number };
+
+	let {
+		files,
+		onremove,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		files: (File | Attachment)[];
+		onremove?: (index: number) => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	function fmt(size: number | undefined): string {
+		if (size === undefined) return '';
+		if (size < 1024) return `${size} B`;
+		if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+		return `${(size / 1024 / 1024).toFixed(1)} MB`;
+	}
+</script>
+
+{#if files.length}
+	<ul data-tsu="AttachmentList" class="attachments {klass}" style={styleProp}>
+		{#each files as f, i (`${f.name}-${i}`)}
+			<li>
+				<Badge
+					mono
+					truncate
+					maxWidth="16rem"
+					removable={!!onremove}
+					onremove={() => onremove?.(i)}
+					title={f.name}
+				>
+					{f.name}{#if f.size !== undefined}<span class="size">{fmt(f.size)}</span>{/if}
+				</Badge>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	.attachments {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sp-1);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.size {
+		margin-inline-start: var(--sp-1);
+		color: var(--text-faint);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+export type Attachment = {
+    name: string;
+    size?: number;
+};
+type $$ComponentProps = {
+    files: (File | Attachment)[];
+    onremove?: (index: number) => void;
+    class?: string;
+    style?: string;
+};
+declare const AttachmentList: import("svelte").Component<$$ComponentProps, {}, "">;
+type AttachmentList = ReturnType<typeof AttachmentList>;
+export default AttachmentList;

package/dist/components/molecules/Breadcrumb.svelte

@@ -18,7 +18,9 @@
 		items,
 		char,
 		separator,
-		maxItems = 0
+		maxItems = 0,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		items: BreadcrumbItem[];
 		/** Separator character; ignored when the `separator` snippet is set. */
@@ -27,6 +29,8 @@
 		/** Collapse the middle to an ellipsis when the trail is longer than this
 		 *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
 		maxItems?: number;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	type Crumb = BreadcrumbItem | { ellipsis: true };
@@ -38,7 +42,7 @@
 	);
 </script>
 
-<nav aria-label="breadcrumb" data-tsu="Breadcrumb">
+<nav aria-label="breadcrumb" data-tsu="Breadcrumb" class={klass} style={styleProp}>
 	<ol class="crumbs">
 		{#each shown as item, i (i)}
 			<li class="crumb">

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

@@ -11,6 +11,8 @@ type $$ComponentProps = {
     /** Collapse the middle to an ellipsis when the trail is longer than this
      *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
     maxItems?: number;
+    class?: string;
+    style?: string;
 };
 declare const Breadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;

package/dist/components/molecules/Callout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { canonicalTone, type Tone } from '../../tone';
 	// Inline message banner — the one way to say "heads up" inside a page:
 	// tone-tinted Card with a leading glyph, optional title, body, right-aligned
 	// actions and an optional dismiss button. `busy` swaps the glyph for a
@@ -10,12 +11,13 @@
 	import Spinner from '../atoms/Spinner.svelte';
 	import IconButton from './IconButton.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 
 	const DEFAULT_ICON: Record<Tone, IconName> = {
 		neutral: 'info',
 		info: 'info',
 		ok: 'check',
+		success: 'check',
+		accent: 'info',
 		warn: 'warning',
 		danger: 'warning'
 	};
@@ -45,15 +47,16 @@
 		actions?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+	const t = $derived(canonicalTone(tone));
 
 	let glyph = $derived(icon ?? DEFAULT_ICON[tone]);
 </script>
 
 <Card
-	{tone}
+	tone={t}
 	padding="none"
-	role={tone === 'danger' ? 'alert' : 'status'}
-	class="callout callout-{tone} {klass}"
+	role={t === 'danger' ? 'alert' : 'status'}
+	class="callout callout-{t} {klass}"
 	data-tsu="Callout"
 	{...rest}
 >
@@ -99,6 +102,9 @@
 	:global(.callout-info) {
 		--callout-tone: var(--info);
 	}
+	:global(.callout-accent) {
+		--callout-tone: var(--accent);
+	}
 
 	.callout-icon {
 		display: inline-flex;

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

@@ -1,6 +1,6 @@
+import { type Tone } from '../../tone';
 import type { Snippet } from 'svelte';
 import { type IconName } from '../atoms/Icon.svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type $$ComponentProps = {
     tone?: Tone;
     icon?: IconName;

package/dist/components/molecules/CapBar.svelte

@@ -58,6 +58,7 @@
 	const tone = $derived(capTone(value, cap, warnAt));
 	const readoutText = $derived(hint ? `${value}% · ${hint}` : `${value}%`);
 	const tip = $derived(tooltip ?? `cap ${cap}% — drag the bar`);
+	const readoutTitle = $derived(readout === undefined ? readoutText : typeof readout === 'string' ? readout : undefined);
 	const ariaLabel = $derived(typeof label === 'string' ? `${label} cap` : 'cap');
 
 	let trackEl = $state<HTMLDivElement | null>(null);
@@ -142,7 +143,7 @@
 			onkeyup={keyUp}
 		></div>
 	</div>
-	<div class="readout">
+	<div class="readout" title={readoutTitle}>
 		{#if readout === undefined}{readoutText}{:else if typeof readout === 'string'}{readout}{:else}{@render readout()}{/if}
 	</div>
 	{#if caption}
@@ -233,6 +234,9 @@
 		opacity: 0.6;
 	}
 	.readout {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		text-align: right;
 		font-variant-numeric: tabular-nums;
 		color: var(--text-muted);