@dorsk/tsumikit 0.1.0 → 0.2.0

package/dist/components/molecules/Tabs.svelte

@@ -3,6 +3,8 @@
 		id: string;
 		label: string;
 		icon?: import('../atoms/Icon.svelte').IconName;
+		/** Greyed out, not selectable, skipped by keyboard navigation. */
+		disabled?: boolean;
 	}
 </script>
 
@@ -27,28 +29,40 @@
 		panel: Snippet<[string]>;
 	} = $props();
 
-	// Default to the first tab when no value is supplied.
+	// Default to the first selectable tab when no value is supplied.
 	$effect(() => {
-		if (value === undefined && tabs.length) value = tabs[0].id;
+		if (value === undefined) {
+			const first = tabs.find((t) => !t.disabled);
+			if (first) value = first.id;
+		}
 	});
 
 	let listEl = $state<HTMLDivElement | null>(null);
 	const baseId = `tabs-${Math.random().toString(36).slice(2, 8)}`;
 
 	function select(id: string, focus = false) {
+		if (tabs.find((t) => t.id === id)?.disabled) return;
 		value = id;
 		if (focus) {
 			queueMicrotask(() => listEl?.querySelector<HTMLButtonElement>(`#${baseId}-tab-${id}`)?.focus());
 		}
 	}
+	// Step to the next non-disabled tab in a direction, wrapping around.
+	function step(from: number, dir: 1 | -1): number {
+		for (let n = 1; n <= tabs.length; n++) {
+			const j = (from + dir * n + tabs.length * n) % tabs.length;
+			if (!tabs[j].disabled) return j;
+		}
+		return from;
+	}
 	function onkeydown(e: KeyboardEvent) {
 		const i = tabs.findIndex((t) => t.id === value);
 		if (i < 0) return;
 		let next = i;
-		if (e.key === 'ArrowRight') next = (i + 1) % tabs.length;
-		else if (e.key === 'ArrowLeft') next = (i - 1 + tabs.length) % tabs.length;
-		else if (e.key === 'Home') next = 0;
-		else if (e.key === 'End') next = tabs.length - 1;
+		if (e.key === 'ArrowRight') next = step(i, 1);
+		else if (e.key === 'ArrowLeft') next = step(i, -1);
+		else if (e.key === 'Home') next = tabs.findIndex((t) => !t.disabled);
+		else if (e.key === 'End') next = tabs.length - 1 - [...tabs].reverse().findIndex((t) => !t.disabled);
 		else return;
 		e.preventDefault();
 		select(tabs[next].id, true);
@@ -64,6 +78,7 @@
 				id="{baseId}-tab-{t.id}"
 				aria-selected={value === t.id}
 				aria-controls="{baseId}-panel"
+				disabled={t.disabled}
 				tabindex={value === t.id ? 0 : -1}
 				class="tab"
 				class:selected={value === t.id}
@@ -101,9 +116,13 @@
 			color 0.12s var(--ease),
 			border-color 0.12s var(--ease);
 	}
-	.tab:hover {
+	.tab:hover:not(:disabled) {
 		color: var(--text);
 	}
+	.tab:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
 	.tab.selected {
 		color: var(--accent);
 		border-bottom-color: var(--accent);

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

@@ -2,6 +2,8 @@ export interface TabItem {
     id: string;
     label: string;
     icon?: import('../atoms/Icon.svelte').IconName;
+    /** Greyed out, not selectable, skipped by keyboard navigation. */
+    disabled?: boolean;
 }
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {

package/dist/components/molecules/Toggle.svelte

@@ -5,17 +5,17 @@
 	// message-type filters) without restyling the base. Used across the
 	// conversation toolbar (filters / formatting / behavior / mobile tabs).
 	//
-	// Specializes the Button atom (ghost variant) for shared disabled/focus/
-	// transition behaviour; the chip surface + "on" tint are overrides.
-	// `.btn.toggle` outranks the atom's :where()-scoped variant classes.
+	// A chip shares almost nothing visually with Button, so it owns its own
+	// <button> + scoped styles rather than specializing the Button atom.
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import Button from '../atoms/Button.svelte';
 
 	let {
 		pressed = false,
 		pill = false,
 		struck = false,
+		type = 'button',
+		disabled = false,
 		class: klass = '',
 		children,
 		...rest
@@ -27,19 +27,25 @@
 	} = $props();
 </script>
 
-<Button
+<button
 	{...rest}
-	variant="ghost"
-	class="toggle {pill ? 'pill' : ''} {struck ? 'struck' : ''} {pressed ? 'on' : ''} {klass}"
+	{type}
+	{disabled}
+	class="toggle {klass}"
+	class:pill
+	class:struck
+	class:on={pressed}
 	aria-pressed={pressed}
 >
 	{@render children?.()}
-</Button>
+</button>
 
 <style>
-	:global(.btn.toggle) {
+	.toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		gap: 4px;
-		min-height: 0;
 		padding: 0.15rem var(--sp-2);
 		border-radius: var(--r-sm);
 		font-size: var(--fs-xs);
@@ -48,21 +54,30 @@
 		background: var(--bg-elevated-2);
 		color: var(--text-muted);
 		border: 1px solid var(--border);
+		white-space: nowrap;
+		user-select: none;
+		transition:
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease),
+			color 0.12s var(--ease);
 	}
-	:global(.btn.toggle.pill) {
+	.toggle:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.toggle.pill {
 		border-radius: var(--r-pill);
 	}
-	:global(.btn.toggle:hover:not(:disabled)) {
+	.toggle:hover:not(:disabled) {
 		border-color: var(--border-strong);
-		background: var(--bg-elevated-2);
 	}
-	:global(.btn.toggle.on) {
+	.toggle.on {
 		--tc: var(--toggle-accent, var(--accent));
 		color: var(--tc);
 		border-color: color-mix(in srgb, var(--tc) 55%, transparent);
 		background: color-mix(in srgb, var(--tc) 16%, transparent);
 	}
-	:global(.btn.toggle.struck) {
+	.toggle.struck {
 		text-decoration: line-through;
 	}
 </style>

package/dist/components/molecules/Tooltip.svelte

@@ -2,9 +2,14 @@
 	// Lightweight tooltip. Shows on hover (after a short delay) and on keyboard
 	// focus of the trigger; hides on blur / mouseleave / Escape. The trigger is
 	// any snippet; an action wires `aria-describedby` onto its first focusable
-	// element so screen readers announce the text. CSS-positioned above the
-	// trigger (centered). Dependency-free.
+	// element so screen readers announce the text.
+	//
+	// The bubble renders in the browser top layer (Popover API, `manual` so it
+	// only opens/closes under our control) and is positioned by the shared
+	// `place()` helper — so, like Popover, it escapes ancestor overflow/transform
+	// clipping and flips/clamps to stay in the viewport. Dependency-free.
 	import type { Snippet } from 'svelte';
+	import { place } from '../../floating';
 
 	let {
 		text,
@@ -13,22 +18,35 @@
 		trigger
 	}: {
 		text: string;
-		placement?: 'top' | 'bottom';
+		placement?: 'top' | 'bottom' | 'left' | 'right';
 		delay?: number;
 		trigger: Snippet;
 	} = $props();
 
 	const id = `tip-${Math.random().toString(36).slice(2, 8)}`;
-	let open = $state(false);
+	let wrapEl = $state<HTMLElement | null>(null);
+	let tipEl = $state<HTMLElement | null>(null);
 	let timer: ReturnType<typeof setTimeout> | undefined;
 
+	function reposition() {
+		if (wrapEl && tipEl) place(wrapEl, tipEl, `${placement}-center`, 6);
+	}
+
 	function show() {
 		clearTimeout(timer);
-		timer = setTimeout(() => (open = true), delay);
+		timer = setTimeout(() => {
+			if (!tipEl || tipEl.matches(':popover-open')) return; // re-entry guard
+			tipEl.showPopover(); // top layer — displayed before we measure it
+			reposition();
+			addEventListener('scroll', reposition, true);
+			addEventListener('resize', reposition);
+		}, delay);
 	}
 	function hide() {
 		clearTimeout(timer);
-		open = false;
+		if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+		removeEventListener('scroll', reposition, true);
+		removeEventListener('resize', reposition);
 	}
 
 	const FOCUSABLE = 'a[href],button,input,select,textarea,[tabindex]';
@@ -59,23 +77,22 @@
 	}
 </script>
 
-<span class="tip-wrap" use:tooltip>
+<span class="tip-wrap" bind:this={wrapEl} use:tooltip>
 	{@render trigger()}
-	<span {id} role="tooltip" class="tip tip-{placement}" class:open aria-hidden={!open}>
-		{text}
-	</span>
+</span>
+
+<span bind:this={tipEl} {id} role="tooltip" popover="manual" class="tip">
+	{text}
 </span>
 
 <style>
 	.tip-wrap {
-		position: relative;
 		display: inline-flex;
 	}
 	.tip {
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%) scale(0.96);
-		z-index: var(--z-toast);
+		position: fixed;
+		margin: 0;
+		inset: auto; /* JS sets top/left; the popover lives in the top layer */
 		max-width: 16rem;
 		width: max-content;
 		padding: var(--sp-1) var(--sp-2);
@@ -87,20 +104,16 @@
 		font-size: var(--fs-xs);
 		line-height: 1.4;
 		white-space: normal;
-		pointer-events: none;
-		opacity: 0;
-		transition:
-			opacity 0.12s var(--ease),
-			transform 0.12s var(--ease);
-	}
-	.tip-top {
-		bottom: calc(100% + 6px);
+		pointer-events: none; /* non-interactive: never steals hover/clicks */
 	}
-	.tip-bottom {
-		top: calc(100% + 6px);
+	/* Fade/scale in when shown (skipped under reduced-motion via the global rule). */
+	.tip:popover-open {
+		animation: tip-in 0.12s var(--ease);
 	}
-	.tip.open {
-		opacity: 1;
-		transform: translateX(-50%) scale(1);
+	@keyframes tip-in {
+		from {
+			opacity: 0;
+			transform: scale(0.96);
+		}
 	}
 </style>

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     text: string;
-    placement?: 'top' | 'bottom';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
     delay?: number;
     trigger: Snippet;
 };

package/dist/components/organisms/DataTable.svelte

@@ -7,6 +7,9 @@
 		align?: 'left' | 'center' | 'right';
 		/** Pull a display value from the row (defaults to row[key]). */
 		get?: (row: T) => unknown;
+		/** Header becomes a sort toggle. Sorts by the displayed value unless an
+		 *  `onsort` handler is supplied (then the caller controls ordering). */
+		sortable?: boolean;
 	}
 </script>
 
@@ -24,6 +27,7 @@
 		rows,
 		rowKey,
 		onrowclick,
+		onsort,
 		cellSnippets = {},
 		empty = 'No data.',
 		stickyHeader = false
@@ -33,15 +37,47 @@
 		/** Stable key for each row (for keyed iteration). */
 		rowKey: (row: T) => string | number;
 		onrowclick?: (row: T) => void;
+		/** Supply to take over ordering (server-side / custom sort). When set, the
+		 *  table only reflects the indicator and emits; it does not reorder rows. */
+		onsort?: (key: string, dir: 'asc' | 'desc') => void;
 		cellSnippets?: Record<string, Snippet<[T]>>;
 		empty?: string;
 		stickyHeader?: boolean;
 	} = $props();
 
+	let sortKey = $state<string | null>(null);
+	let sortDir = $state<'asc' | 'desc'>('asc');
+
 	function display(col: Column<T>, row: T): unknown {
 		if (col.get) return col.get(row);
 		return (row as Record<string, unknown>)[col.key];
 	}
+
+	function toggleSort(col: Column<T>) {
+		if (!col.sortable) return;
+		if (sortKey === col.key) sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+		else {
+			sortKey = col.key;
+			sortDir = 'asc';
+		}
+		onsort?.(col.key, sortDir);
+	}
+
+	// Internal sort (skipped when the caller owns ordering via `onsort`).
+	const sortedRows = $derived.by(() => {
+		if (onsort || !sortKey) return rows;
+		const col = columns.find((c) => c.key === sortKey);
+		if (!col) return rows;
+		const dir = sortDir === 'asc' ? 1 : -1;
+		return [...rows].sort((a, b) => {
+			const av = display(col, a);
+			const bv = display(col, b);
+			if (av == null) return bv == null ? 0 : 1;
+			if (bv == null) return -1;
+			if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
+			return String(av).localeCompare(String(bv)) * dir;
+		});
+	});
 </script>
 
 <div class="dt-scroll">
@@ -49,19 +85,39 @@
 		<thead>
 			<tr>
 				{#each columns as col (col.key)}
-					<th scope="col" style:width={col.width} style:text-align={col.align ?? 'left'}>
-						{col.label}
+					<th
+						scope="col"
+						style:width={col.width}
+						style:text-align={col.align ?? 'left'}
+						aria-sort={col.sortable
+							? sortKey === col.key
+								? sortDir === 'asc'
+									? 'ascending'
+									: 'descending'
+								: 'none'
+							: undefined}
+					>
+						{#if col.sortable}
+							<button type="button" class="dt-sort" onclick={() => toggleSort(col)}>
+								<span>{col.label}</span>
+								<span class="dt-arrow" class:active={sortKey === col.key}>
+									{sortKey === col.key ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
+								</span>
+							</button>
+						{:else}
+							{col.label}
+						{/if}
 					</th>
 				{/each}
 			</tr>
 		</thead>
 		<tbody>
-			{#if rows.length === 0}
+			{#if sortedRows.length === 0}
 				<tr>
 					<td class="dt-empty" colspan={columns.length}>{empty}</td>
 				</tr>
 			{:else}
-				{#each rows as row (rowKey(row))}
+				{#each sortedRows as row (rowKey(row))}
 					<tr
 						class:clickable={!!onrowclick}
 						tabindex={onrowclick ? 0 : undefined}
@@ -125,6 +181,31 @@
 		top: 0;
 		z-index: 1;
 	}
+	/* Sort toggle: a bare button that inherits the th's type styling. */
+	.dt-sort {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		border: 0;
+		background: none;
+		padding: 0;
+		font: inherit;
+		letter-spacing: inherit;
+		text-transform: inherit;
+		color: inherit;
+		cursor: pointer;
+	}
+	.dt-sort:hover {
+		color: var(--text);
+	}
+	.dt-arrow {
+		opacity: 0.4;
+		font-size: 0.9em;
+	}
+	.dt-arrow.active {
+		opacity: 1;
+		color: var(--accent);
+	}
 	tbody tr:last-child td {
 		border-bottom: none;
 	}

package/dist/components/organisms/DataTable.svelte.d.ts

@@ -6,6 +6,9 @@ export interface Column<T> {
     align?: 'left' | 'center' | 'right';
     /** Pull a display value from the row (defaults to row[key]). */
     get?: (row: T) => unknown;
+    /** Header becomes a sort toggle. Sorts by the displayed value unless an
+     *  `onsort` handler is supplied (then the caller controls ordering). */
+    sortable?: boolean;
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
@@ -15,6 +18,9 @@ declare function $$render<T>(): {
         /** Stable key for each row (for keyed iteration). */
         rowKey: (row: T) => string | number;
         onrowclick?: (row: T) => void;
+        /** Supply to take over ordering (server-side / custom sort). When set, the
+         *  table only reflects the indicator and emits; it does not reorder rows. */
+        onsort?: (key: string, dir: "asc" | "desc") => void;
         cellSnippets?: Record<string, Snippet<[T]>>;
         empty?: string;
         stickyHeader?: boolean;

package/dist/floating.d.ts

@@ -0,0 +1,10 @@
+export type Side = 'top' | 'bottom' | 'left' | 'right';
+export type Align = 'start' | 'center' | 'end';
+/** `${side}-${align}`, e.g. `bottom-start` (Popover) or `left-center` (Tooltip). */
+export type Placement = `${Side}-${Align}`;
+/**
+ * Position `floating` next to `trigger` and write the result to its inline
+ * `top`/`left` (expects `floating` to be `position: fixed`). Call on open and on
+ * scroll/resize while open.
+ */
+export declare function place(trigger: HTMLElement, floating: HTMLElement, placement?: Placement, gap?: number): void;

package/dist/floating.js

@@ -0,0 +1,56 @@
+// Shared placement for top-layer floating elements (Popover panel, Tooltip).
+// Both render in the browser top layer (via the Popover API), so they escape
+// ancestor `overflow`/`transform`/`contain` clipping; this just positions them
+// against their trigger as `position: fixed` coordinates, flipping to the other
+// side and clamping into the viewport so they never run off-screen.
+const clamp = (v, lo, hi) => Math.max(lo, Math.min(v, hi));
+// Position along the cross axis (start/center/end of the trigger's extent).
+function alignPos(align, start, size, fSize) {
+    if (align === 'start')
+        return start;
+    if (align === 'end')
+        return start + size - fSize;
+    return start + size / 2 - fSize / 2;
+}
+/**
+ * Position `floating` next to `trigger` and write the result to its inline
+ * `top`/`left` (expects `floating` to be `position: fixed`). Call on open and on
+ * scroll/resize while open.
+ */
+export function place(trigger, floating, placement = 'bottom-start', gap = 6) {
+    const t = trigger.getBoundingClientRect();
+    const f = floating.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth;
+    const vh = document.documentElement.clientHeight;
+    const [side, align] = placement.split('-');
+    let top;
+    let left;
+    if (side === 'top' || side === 'bottom') {
+        // Vertical side; align along x. Preferred side, flip if it overflows and the
+        // opposite side has room.
+        top = side === 'bottom' ? t.bottom + gap : t.top - f.height - gap;
+        if (side === 'bottom' && top + f.height > vh && t.top - f.height - gap >= 0) {
+            top = t.top - f.height - gap;
+        }
+        else if (side === 'top' && top < 0 && t.bottom + f.height + gap <= vh) {
+            top = t.bottom + gap;
+        }
+        left = alignPos(align, t.left, t.width, f.width);
+    }
+    else {
+        // Horizontal side; align along y.
+        left = side === 'right' ? t.right + gap : t.left - f.width - gap;
+        if (side === 'right' && left + f.width > vw && t.left - f.width - gap >= 0) {
+            left = t.left - f.width - gap;
+        }
+        else if (side === 'left' && left < 0 && t.right + f.width + gap <= vw) {
+            left = t.right + gap;
+        }
+        top = alignPos(align, t.top, t.height, f.height);
+    }
+    // Clamp both axes so it always stays on screen.
+    top = clamp(top, gap, vh - f.height - gap);
+    left = clamp(left, gap, vw - f.width - gap);
+    floating.style.top = `${Math.round(top)}px`;
+    floating.style.left = `${Math.round(left)}px`;
+}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { autoresize } from './autoresize';
+export { copyToClipboard } from './clipboard';
 export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox.svelte';
-export { default as Chip } from './components/atoms/Chip.svelte';
+export { default as Dot } from './components/atoms/Dot.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
 export type { IconName } from './components/atoms/Icon.svelte';
 export { default as Icon } from './components/atoms/Icon.svelte';

package/dist/index.js

@@ -5,11 +5,12 @@
 //   import '@dorsk/tsumikit/styles/app.css';
 // then use the components below.
 export { autoresize } from './autoresize';
+export { copyToClipboard } from './clipboard';
 export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox.svelte';
-export { default as Chip } from './components/atoms/Chip.svelte';
+export { default as Dot } from './components/atoms/Dot.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
 export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';