@dorsk/tsumikit 0.8.1 → 0.9.0

package/dist/components/atoms/Badge.svelte

@@ -42,6 +42,7 @@
 
 <svelte:element
 	this={as}
+	data-tsu="Badge"
 	class="badge {klass}"
 	class:badge-ok={tone === 'ok'}
 	class:badge-warn={tone === 'warn'}

package/dist/components/atoms/Button.svelte

@@ -49,6 +49,7 @@
 </script>
 
 <button
+	data-tsu="Button"
 	{...rest}
 	{type}
 	disabled={disabled || loading}

package/dist/components/atoms/Card.svelte

@@ -48,6 +48,7 @@
 
 <svelte:element
 	this={as}
+	data-tsu="Card"
 	class="card {klass}"
 	class:pad-none={padding === 'none'}
 	class:pad-sm={padding === 'sm'}

package/dist/components/atoms/Checkbox.svelte

@@ -28,7 +28,7 @@
 	});
 </script>
 
-<label class="checkbox {klass}">
+<label class="checkbox {klass}" data-tsu="Checkbox">
 	<input bind:this={el} type="checkbox" bind:checked {...rest} aria-invalid={invalid || undefined} />
 	<span class="box" aria-hidden="true"></span>
 	<span class="label-text">{label}</span>

package/dist/components/atoms/Dot.svelte

@@ -39,12 +39,12 @@
 </script>
 
 {#if label}
-	<span class="dot-row {klass}" {...rest}>
+	<span class="dot-row {klass}" data-tsu="Dot" {...rest}>
 		<span class="dot" class:glow style="--dot-color:{resolved}"></span>
 		<Text variant="caption">{label}</Text>
 	</span>
 {:else}
-	<span class="dot {klass}" class:glow style="--dot-color:{resolved}" {...rest}></span>
+	<span class="dot {klass}" class:glow style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
 {/if}
 
 <style>

package/dist/components/atoms/Heading.svelte

@@ -28,7 +28,7 @@
 	const fs = $derived(size ?? DEFAULT_SIZE[level]);
 </script>
 
-<svelte:element this={`h${level}`} class="heading fs-{fs} tone-{tone} {klass}" {...rest}>
+<svelte:element this={`h${level}`} data-tsu="Heading" class="heading fs-{fs} tone-{tone} {klass}" {...rest}>
 	{@render children?.()}
 </svelte:element>
 

package/dist/components/atoms/Icon.svelte

@@ -124,6 +124,7 @@
 </script>
 
 <svg
+	data-tsu="Icon"
 	class="icon"
 	style={size ? `font-size: ${size}px` : undefined}
 	viewBox="0 0 24 24"

package/dist/components/atoms/Input.svelte

@@ -30,6 +30,7 @@
 
 <input
 	bind:this={el}
+	data-tsu="Input"
 	class="input {klass}"
 	class:mono
 	class:input-sm={size === 'sm'}

package/dist/components/atoms/Link.svelte

@@ -13,9 +13,9 @@
 </script>
 
 {#if href}
-	<a {href} class="link {klass}" {...rest}>{@render children?.()}</a>
+	<a {href} class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</a>
 {:else}
-	<button type="button" class="link {klass}" {...rest}>{@render children?.()}</button>
+	<button type="button" class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</button>
 {/if}
 
 <style>

package/dist/components/atoms/Progress.svelte

@@ -41,6 +41,7 @@
 </script>
 
 <div
+	data-tsu="Progress"
 	class="progress tone-{tone} size-{size} {klass}"
 	class:indeterminate
 	class:gradient

package/dist/components/atoms/Select.svelte

@@ -41,11 +41,11 @@
 </script>
 
 {#if variant === 'ghost'}
-	<select class="select ghost {klass}" bind:value {...rest} aria-invalid={invalid || undefined}>
+	<select class="select ghost {klass}" data-tsu="Select" bind:value {...rest} aria-invalid={invalid || undefined}>
 		{@render children?.()}
 	</select>
 {:else}
-	<div class="select-wrap {klass}" class:no-chevron={!chevron}>
+	<div class="select-wrap {klass}" class:no-chevron={!chevron} data-tsu="Select">
 		<select
 			class="select"
 			class:compact

package/dist/components/atoms/Slider.svelte

@@ -36,7 +36,7 @@
 	);
 </script>
 
-<div class="slider {klass}" style="--pct: {pct}%">
+<div class="slider {klass}" style="--pct: {pct}%" data-tsu="Slider">
 	<input
 		bind:this={el}
 		{id}

package/dist/components/atoms/Switch.svelte

@@ -14,6 +14,7 @@
 </script>
 
 <button
+	data-tsu="Switch"
 	{...rest}
 	type="button"
 	class="switch {klass}"

package/dist/components/atoms/Text.svelte

@@ -39,6 +39,7 @@
 
 <svelte:element
 	this={as}
+	data-tsu="Text"
 	class="text {variant ? `v-${variant}` : ''} tone-{tone} {weight ? `fw-${weight}` : ''} {size
 		? `fs-${size}`
 		: ''} {numeric ? 'numeric' : ''} {truncate ? 'truncate' : ''} {klass}"

package/dist/components/atoms/Textarea.svelte

@@ -99,7 +99,7 @@
 	}
 </script>
 
-<div class="textarea-wrap" class:dragging>
+<div class="textarea-wrap" class:dragging data-tsu="Textarea">
 	{#if autoresize}
 		<textarea
 			bind:this={el}

package/dist/components/layouts/AppShell.svelte

@@ -112,7 +112,7 @@
 
 <svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
 
-<div class="shell" class:dragging style="--shell-sidebar-w: {widthCss}">
+<div class="shell" class:dragging style="--shell-sidebar-w: {widthCss}" data-tsu="AppShell">
 	<header class="shell-header">
 		{#if sidebar}
 			<!-- Wrapper owned here so the responsive hide is a scoped rule on our own

package/dist/components/layouts/AutoGrid.svelte

@@ -71,6 +71,7 @@
 
 <svelte:element
 	this={as}
+	data-tsu="AutoGrid"
 	class="autogrid-c {klass}"
 	class:capped={maxCols != null}
 	{style}

package/dist/components/layouts/Cluster.svelte

@@ -28,6 +28,7 @@
 
 <svelte:element
 	this={as}
+	data-tsu="Cluster"
 	class="cluster-c {klass}"
 	style:gap
 	style:align-items={align}

package/dist/components/layouts/Container.svelte

@@ -30,6 +30,7 @@
 
 <svelte:element
 	this={as}
+	data-tsu="Container"
 	class="container ct {klass}"
 	class:pad
 	class:full={fullWidth}

package/dist/components/layouts/NavItem.svelte

@@ -44,6 +44,7 @@
 
 <svelte:element
 	this={href ? 'a' : 'button'}
+	data-tsu="NavItem"
 	{href}
 	type={href ? undefined : 'button'}
 	class="nav-item"

package/dist/components/layouts/NavSection.svelte

@@ -20,7 +20,7 @@
 	} = $props();
 </script>
 
-<div class="nav-section" {...rest}>
+<div class="nav-section" data-tsu="NavSection" {...rest}>
 	{#if label}
 		<div class="nav-section-label">{label}</div>
 	{/if}

package/dist/components/layouts/Stack.svelte

@@ -26,6 +26,7 @@
 
 <svelte:element
 	this={as}
+	data-tsu="Stack"
 	class="stack-c {klass}"
 	style:gap
 	style:align-items={align}

package/dist/components/molecules/Accordion.svelte

@@ -32,7 +32,7 @@
 	const groupName = $derived(multiple ? undefined : gid);
 </script>
 
-<div class="accordion {klass}">
+<div class="accordion {klass}" data-tsu="Accordion">
 	{#each items as item (item.id)}
 		<details name={groupName} open={item.open}>
 			<summary>

package/dist/components/molecules/CodeBlock.svelte

@@ -41,7 +41,7 @@
 	const hasHeader = $derived(!!(filename || lang || copy));
 </script>
 
-<figure class="codeblock {klass}">
+<figure class="codeblock {klass}" data-tsu="CodeBlock">
 	{#if hasHeader}
 		<figcaption class="cb-head">
 			<span class="cb-name">{filename ?? lang ?? ''}</span>

package/dist/components/molecules/CopyButton.svelte

@@ -44,6 +44,7 @@
 </script>
 
 <Button
+	data-tsu="CopyButton"
 	{variant}
 	class={klass}
 	onclick={copy}

package/dist/components/molecules/Dropzone.svelte

@@ -104,6 +104,7 @@
 {#if overlay}
 	<div
 		class="dz-host"
+		data-tsu="Dropzone"
 		class:over
 		class:disabled
 		role="presentation"
@@ -123,6 +124,7 @@
 {:else}
 	<div
 		class="dz"
+		data-tsu="Dropzone"
 		class:over
 		class:disabled
 		role="button"

package/dist/components/molecules/EmptyState.svelte

@@ -45,7 +45,7 @@
 	} = $props();
 </script>
 
-<div class="empty empty-{tone} {compact ? 'empty-compact' : ''} {klass}" {...rest}>
+<div class="empty empty-{tone} {compact ? 'empty-compact' : ''} {klass}" data-tsu="EmptyState" {...rest}>
 	{#if icon || iconChildren}
 		<span class="empty-chip" aria-hidden="true">
 			<Icon name={icon}>{@render iconChildren?.()}</Icon>

package/dist/components/molecules/Field.svelte

@@ -22,7 +22,7 @@
 	} = $props();
 </script>
 
-<div class="field {klass}">
+<div class="field {klass}" data-tsu="Field">
 	{#if label}
 		{#if forId}
 			<label class="label" for={forId}>{label}</label>

package/dist/components/molecules/FileButton.svelte

@@ -49,6 +49,7 @@
 
 <label
 	class="file-btn {klass}"
+	data-tsu="FileButton"
 	class:primary={variant === 'primary'}
 	class:ghost={variant === 'ghost'}
 	class:sm={size === 'sm'}

package/dist/components/molecules/FontScalePicker.svelte

@@ -11,6 +11,7 @@
 </script>
 
 <SelectButton
+	data-tsu="FontScalePicker"
 	class={klass}
 	glyph="A"
 	label="Text size"

package/dist/components/molecules/IconButton.svelte

@@ -56,6 +56,7 @@
 <!-- Composition: the icon-only button is a Button (canonical control styling)
      in its icon variant, wrapping an Icon (or a text emoji glyph). -->
 <Button
+	data-tsu="IconButton"
 	{...rest}
 	{variant}
 	{tone}

package/dist/components/molecules/Menu.svelte

@@ -67,7 +67,7 @@
 </script>
 
 <Popover {label} {placement} {trigger} onopen={() => queueMicrotask(() => focusAt(0))}>
-	<div bind:this={listEl} role="menu" aria-label={label} class="menu" tabindex="-1" {onkeydown}>
+	<div bind:this={listEl} role="menu" aria-label={label} class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
 			<button
 				type="button"

package/dist/components/molecules/Metric.svelte

@@ -42,6 +42,7 @@
 </script>
 
 <Card
+	data-tsu="Metric"
 	class="metric metric-{tone} {tintValue ? 'metric-tint' : ''} {klass}"
 	{...rest}
 >

package/dist/components/molecules/Modal.svelte

@@ -98,6 +98,7 @@
 
 <dialog
 	bind:this={dialogEl}
+	data-tsu="Modal"
 	class="modal"
 	class:resizing
 	aria-labelledby={titleId}

package/dist/components/molecules/OptionButton.svelte

@@ -26,6 +26,7 @@
 </script>
 
 <button
+	data-tsu="OptionButton"
 	{...rest}
 	{type}
 	{disabled}

package/dist/components/molecules/Popover.svelte

@@ -66,6 +66,7 @@
 
 <button
 	bind:this={triggerEl}
+	data-tsu="Popover"
 	type="button"
 	class="pop-trigger {triggerClass}"
 	class:bare

package/dist/components/molecules/RadioGroup.svelte

@@ -27,7 +27,7 @@
 	} = $props();
 </script>
 
-<div role="radiogroup" aria-label={label} class="radio-group {klass}">
+<div role="radiogroup" aria-label={label} class="radio-group {klass}" data-tsu="RadioGroup">
 	{#each options as o (o.value)}
 		<label class="radio" class:disabled={o.disabled}>
 			<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />

package/dist/components/molecules/SegmentedControl.svelte

@@ -94,6 +94,7 @@
 	aria-label={label}
 	tabindex="-1"
 	class="seg seg-{variant} seg-{size} {klass}"
+	data-tsu="SegmentedControl"
 	{onkeydown}
 >
 	{#each options as o (o.value)}

package/dist/components/molecules/SelectButton.svelte

@@ -17,7 +17,8 @@
 		options,
 		groups,
 		onchange,
-		class: klass = ''
+		class: klass = '',
+		...rest
 	}: {
 		// Visible content of the button (a letter like "A" or an emoji icon).
 		glyph: string;
@@ -31,12 +32,13 @@
 		groups?: { label: string; options: Option[] }[];
 		onchange: (value: string) => void;
 		class?: string;
+		[key: string]: unknown;
 	} = $props();
 </script>
 
 <!-- The wrapper (owned here, so styled scoped) is the positioning context that
      clips the transparent overlaid <select>; the icon Button shows through. -->
-<span class="select-button {klass}">
+<span class="select-button {klass}" data-tsu="SelectButton" {...rest}>
 	<Button variant="ghost" icon {title} aria-label={label}>
 		<span aria-hidden="true">{glyph}</span>
 		<Select

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

@@ -14,6 +14,7 @@ type $$ComponentProps = {
     }[];
     onchange: (value: string) => void;
     class?: string;
+    [key: string]: unknown;
 };
 declare const SelectButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type SelectButton = ReturnType<typeof SelectButton>;

package/dist/components/molecules/Tabs.svelte

@@ -69,7 +69,7 @@
 	}
 </script>
 
-<div class="tabs">
+<div class="tabs" data-tsu="Tabs">
 	<div bind:this={listEl} role="tablist" aria-label={label} tabindex="-1" class="tablist" {onkeydown}>
 		{#each tabs as t (t.id)}
 			<button

package/dist/components/molecules/ThemePicker.svelte

@@ -21,6 +21,7 @@
 </script>
 
 <SelectButton
+	data-tsu="ThemePicker"
 	class={klass}
 	glyph={theme.icon}
 	label="Theme"

package/dist/components/molecules/Timestamp.svelte

@@ -115,11 +115,11 @@
 
 {#if !date}
 	<!-- Unparseable input: degrade to an inert dash rather than empty text. -->
-	<time class="{cls} ts-invalid" style:font-size={sizeVar}>—</time>
+	<time class="{cls} ts-invalid" data-tsu="Timestamp" style:font-size={sizeVar}>—</time>
 {:else if showPopover}
 	<Popover label="Timestamp details" placement="bottom-start" bare>
 		{#snippet trigger()}
-			<time class="{cls} ts-trigger" style:font-size={sizeVar} datetime={machine}>{label}</time>
+			<time class="{cls} ts-trigger" data-tsu="Timestamp" style:font-size={sizeVar} datetime={machine}>{label}</time>
 		{/snippet}
 		<div class="ts-panel">
 			{#if selectable}
@@ -146,7 +146,7 @@
 		</div>
 	</Popover>
 {:else}
-	<time class={cls} style:font-size={sizeVar} datetime={machine}>{label}</time>
+	<time class={cls} data-tsu="Timestamp" style:font-size={sizeVar} datetime={machine}>{label}</time>
 {/if}
 
 <style>

package/dist/components/molecules/Toaster.svelte

@@ -7,7 +7,7 @@
 	import Icon from '../atoms/Icon.svelte';
 </script>
 
-<div class="toaster" role="status" aria-live="polite" aria-relevant="additions">
+<div class="toaster" role="status" aria-live="polite" aria-relevant="additions" data-tsu="Toaster">
 	{#each toasts.items as t (t.id)}
 		<button
 			type="button"

package/dist/components/molecules/Toggle.svelte

@@ -28,6 +28,7 @@
 </script>
 
 <button
+	data-tsu="Toggle"
 	{...rest}
 	{type}
 	{disabled}

package/dist/components/molecules/Tooltip.svelte

@@ -77,7 +77,7 @@
 	}
 </script>
 
-<span class="tip-wrap" bind:this={wrapEl} use:tooltip>
+<span class="tip-wrap" data-tsu="Tooltip" bind:this={wrapEl} use:tooltip>
 	{@render trigger()}
 </span>
 

package/dist/components/molecules/Truncate.svelte

@@ -39,11 +39,11 @@
 			     full-text tooltip (wired by Tooltip onto the first focusable child)
 			     isn't mouse-only; the span is otherwise non-interactive. -->
 			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-			<span class="trunc" tabindex="0">{shown}</span>
+			<span class="trunc" data-tsu="Truncate" tabindex="0">{shown}</span>
 		{/snippet}
 	</Tooltip>
 {:else}
-	<span class="trunc">{shown}</span>
+	<span class="trunc" data-tsu="Truncate">{shown}</span>
 {/if}
 
 <style>

package/dist/components/organisms/DataTable.svelte

@@ -80,7 +80,7 @@
 	});
 </script>
 
-<div class="dt-scroll">
+<div class="dt-scroll" data-tsu="DataTable">
 	<table class="dt" class:sticky={stickyHeader}>
 		<thead>
 			<tr>