@dorsk/tsumikit 0.1.1 → 0.2.1

package/dist/components/atoms/Textarea.svelte

@@ -11,6 +11,10 @@
 	type Props = HTMLTextareaAttributes & {
 		mono?: boolean;
 		autoresize?: boolean;
+		size?: 'sm' | 'md';
+		/** Error state: danger border + aria-invalid (also styles if a consumer
+		 *  sets aria-invalid directly). */
+		invalid?: boolean;
 		class?: string;
 		value?: HTMLTextareaAttributes['value'];
 		el?: HTMLTextAreaElement | null;
@@ -19,6 +23,8 @@
 	let {
 		mono = false,
 		autoresize = false,
+		size = 'md',
+		invalid = false,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
@@ -31,12 +37,22 @@
 		bind:this={el}
 		class="textarea {klass}"
 		class:mono
+		class:textarea-sm={size === 'sm'}
 		bind:value
 		use:autoresizeAction={typeof value === 'string' ? value : ''}
 		{...rest}
+		aria-invalid={invalid || undefined}
 	></textarea>
 {:else}
-	<textarea bind:this={el} class="textarea {klass}" class:mono bind:value {...rest}></textarea>
+	<textarea
+		bind:this={el}
+		class="textarea {klass}"
+		class:mono
+		class:textarea-sm={size === 'sm'}
+		bind:value
+		{...rest}
+		aria-invalid={invalid || undefined}
+	></textarea>
 {/if}
 
 <style>
@@ -56,6 +72,15 @@
 		outline: none;
 		border-color: var(--accent);
 	}
+	.textarea-sm {
+		padding: var(--sp-2);
+		font-size: var(--fs-sm);
+		min-height: 4rem;
+	}
+	.textarea[aria-invalid='true'],
+	.textarea[aria-invalid='true']:focus {
+		border-color: var(--danger);
+	}
 	.mono {
 		font-family: var(--font-mono);
 	}

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

@@ -2,6 +2,10 @@ import type { HTMLTextareaAttributes } from 'svelte/elements';
 type Props = HTMLTextareaAttributes & {
     mono?: boolean;
     autoresize?: boolean;
+    size?: 'sm' | 'md';
+    /** Error state: danger border + aria-invalid (also styles if a consumer
+     *  sets aria-invalid directly). */
+    invalid?: boolean;
     class?: string;
     value?: HTMLTextareaAttributes['value'];
     el?: HTMLTextAreaElement | null;

package/dist/components/layouts/AppShell.svelte

@@ -115,13 +115,16 @@
 <div class="shell" class:dragging style="--shell-sidebar-w: {widthCss}">
 	<header class="shell-header">
 		{#if sidebar}
-			<IconButton
-				class="shell-menu-btn"
-				icon="menu"
-				label="Toggle navigation"
-				aria-expanded={open}
-				onclick={() => (open = !open)}
-			/>
+			<!-- Wrapper owned here so the responsive hide is a scoped rule on our own
+			     element, not a :global reach into the IconButton's button. -->
+			<div class="shell-menu-btn">
+				<IconButton
+					icon="menu"
+					label="Toggle navigation"
+					aria-expanded={open}
+					onclick={() => (open = !open)}
+				/>
+			</div>
 		{/if}
 		{@render header?.()}
 	</header>
@@ -191,6 +194,10 @@
 		backdrop-filter: blur(8px);
 		border-bottom: 1px solid var(--border);
 	}
+	.shell-menu-btn {
+		display: inline-flex;
+		align-items: center;
+	}
 	.shell-main {
 		grid-area: main;
 		min-width: 0; /* let content shrink instead of overflowing the grid */
@@ -272,7 +279,7 @@
 			border-right: 1px solid var(--border);
 		}
 		.shell-scrim,
-		:global(.shell-menu-btn) {
+		.shell-menu-btn {
 			display: none !important;
 		}
 		.shell-sidebar-resize {

package/dist/components/layouts/AutoGrid.svelte

@@ -4,13 +4,16 @@
 	// adapts to whatever space it's given (including inside a narrow column). This
 	// is the "columns just adapt to available space" layout from the AppShell
 	// demo, as a named component. `min` is the minimum column width, `gap` the
-	// gutter.
+	// gutter. `maxCols` optionally caps how many columns the grid will ever show:
+	// it raises the effective per-column minimum to the width N columns would
+	// need, so auto-fit can never pack more than N across.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		min = '14rem',
 		gap = 'var(--sp-4)',
+		maxCols,
 		class: klass = '',
 		children,
 		...rest
@@ -18,13 +21,26 @@
 		as?: 'div' | 'section' | 'ul' | 'ol';
 		min?: string;
 		gap?: string;
+		maxCols?: number;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	let style = $derived(
+		maxCols != null
+			? `--ag-min: ${min}; --ag-gap: ${gap}; --ag-cols: ${maxCols}; gap: ${gap}`
+			: `--ag-min: ${min}; gap: ${gap}`
+	);
 </script>
 
-<svelte:element this={as} class="autogrid-c {klass}" style="--ag-min: {min}; gap: {gap}" {...rest}>
+<svelte:element
+	this={as}
+	class="autogrid-c {klass}"
+	class:capped={maxCols != null}
+	{style}
+	{...rest}
+>
 	{@render children?.()}
 </svelte:element>
 
@@ -33,4 +49,18 @@
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ag-min)), 1fr));
 	}
+
+	/* Cap at N columns: the per-column floor becomes the larger of `min` and the
+	   width each column gets when N share the row (minus the N-1 gaps), so
+	   auto-fit stops adding tracks once N fit. `min(100%, …)` keeps it from
+	   overflowing when the container is narrower than a single `min` track. */
+	.autogrid-c.capped {
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(
+				min(100%, max(var(--ag-min), (100% - (var(--ag-cols) - 1) * var(--ag-gap)) / var(--ag-cols))),
+				1fr
+			)
+		);
+	}
 </style>

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

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     as?: 'div' | 'section' | 'ul' | 'ol';
     min?: string;
     gap?: string;
+    maxCols?: number;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/Accordion.svelte

@@ -37,7 +37,7 @@
 		<details name={groupName} open={item.open}>
 			<summary>
 				<span class="acc-title">{item.title}</span>
-				<Icon name="chevron-down" />
+				<span class="acc-chevron"><Icon name="chevron-down" /></span>
 			</summary>
 			<div class="acc-panel">{@render item.content()}</div>
 		</details>
@@ -79,11 +79,14 @@
 		outline: 2px solid var(--accent);
 		outline-offset: -2px;
 	}
-	summary :global(.icon) {
+	/* Wrap the chevron in our own element so rotation is a scoped rule (no
+	   :global into the Icon child). The Icon inherits the color via currentColor. */
+	.acc-chevron {
+		display: inline-flex;
 		color: var(--text-muted);
 		transition: transform 0.15s var(--ease);
 	}
-	details[open] summary :global(.icon) {
+	details[open] summary .acc-chevron {
 		transform: rotate(180deg);
 	}
 	.acc-panel {

package/dist/components/molecules/CopyButton.svelte

@@ -6,6 +6,7 @@
 	// the result for screen readers. Dependency-free.
 	import Button from '../atoms/Button.svelte';
 	import Icon from '../atoms/Icon.svelte';
+	import { copyToClipboard } from '../../clipboard';
 
 	let {
 		text,
@@ -31,7 +32,7 @@
 	let timer: ReturnType<typeof setTimeout> | undefined;
 
 	async function copy() {
-		const ok = await writeClipboard(text);
+		const ok = await copyToClipboard(text);
 		copied = ok;
 		status = ok ? copiedLabel : 'Copy failed';
 		clearTimeout(timer);
@@ -40,31 +41,6 @@
 			status = '';
 		}, resetMs);
 	}
-
-	async function writeClipboard(value: string): Promise<boolean> {
-		try {
-			if (navigator.clipboard?.writeText) {
-				await navigator.clipboard.writeText(value);
-				return true;
-			}
-		} catch {
-			/* fall through to legacy path */
-		}
-		// Fallback for insecure contexts / older browsers.
-		try {
-			const ta = document.createElement('textarea');
-			ta.value = value;
-			ta.style.position = 'fixed';
-			ta.style.opacity = '0';
-			document.body.appendChild(ta);
-			ta.select();
-			const ok = document.execCommand('copy');
-			document.body.removeChild(ta);
-			return ok;
-		} catch {
-			return false;
-		}
-	}
 </script>
 
 <Button

package/dist/components/molecules/FileButton.svelte

@@ -34,9 +34,9 @@
 </script>
 
 <label
-	class="btn file-btn {klass}"
-	class:btn-primary={variant === 'primary'}
-	class:btn-ghost={variant === 'ghost'}
+	class="file-btn {klass}"
+	class:primary={variant === 'primary'}
+	class:ghost={variant === 'ghost'}
 	class:disabled
 >
 	<input
@@ -52,8 +52,50 @@
 </label>
 
 <style>
+	/* FileButton is a <label> (so the native file input stays inside it and
+	   keyboard-focusable), not a <button>, so it can't be the Button atom — it
+	   owns the canonical control look here, from the same tokens. */
 	.file-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-2) var(--sp-4);
+		min-height: 2.5rem;
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		background: var(--surface);
+		color: var(--text);
+		font-weight: var(--fw-medium);
+		font-size: var(--fs-sm);
+		line-height: 1;
+		white-space: nowrap;
 		cursor: pointer;
+		user-select: none;
+		transition:
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease),
+			opacity 0.12s var(--ease);
+	}
+	.file-btn:hover:not(.disabled) {
+		border-color: var(--accent);
+	}
+	.file-btn.primary {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: var(--text-on-accent);
+		font-weight: var(--fw-semibold);
+	}
+	.file-btn.primary:hover:not(.disabled) {
+		filter: brightness(1.08);
+	}
+	.file-btn.ghost {
+		background: transparent;
+		border-color: transparent;
+	}
+	.file-btn.ghost:hover:not(.disabled) {
+		background: var(--bg-elevated-2);
+		border-color: transparent;
 	}
 	/* The hidden input keeps focusability (sr-only, not display:none), so mirror
 	   its focus onto the label for a visible ring. */

package/dist/components/molecules/IconButton.svelte

@@ -10,8 +10,14 @@
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
 		size?: number;
 		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
-		// no square `.btn-icon` box; just a muted glyph that brightens on hover.
+		// no square box; just a muted glyph that brightens on hover. Pair with
+		// `hoverDanger` to tint it red on hover (delete affordances).
 		inline?: boolean;
+		hoverDanger?: boolean;
+		// Two-state icon toggle (star/pin/favourite): sets `aria-pressed` and tints
+		// the glyph with the accent when on. Override the tint per-instance with
+		// `style="--btn-on: var(--warn)"`.
+		pressed?: boolean;
 		class?: string;
 	};
 
@@ -22,6 +28,8 @@
 		variant = 'ghost',
 		size = 18,
 		inline = false,
+		hoverDanger = false,
+		pressed,
 		disabled = false,
 		onclick,
 		class: klass = '',
@@ -30,7 +38,19 @@
 </script>
 
 <!-- Composition: the icon-only button is a Button (canonical control styling)
-     carrying the square `.btn-icon` modifier, wrapping an Icon. -->
-<Button {...rest} {variant} {disabled} {title} {onclick} class="{inline ? 'btn-icon-inline' : 'btn-icon'} {klass}" aria-label={label}>
+     in its icon variant, wrapping an Icon. -->
+<Button
+	{...rest}
+	{variant}
+	{disabled}
+	{title}
+	{onclick}
+	icon={!inline}
+	iconInline={inline}
+	{hoverDanger}
+	aria-pressed={pressed}
+	class={klass}
+	aria-label={label}
+>
 	<Icon name={icon} {size} />
 </Button>

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

@@ -6,6 +6,8 @@ type IconButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
     size?: number;
     inline?: boolean;
+    hoverDanger?: boolean;
+    pressed?: boolean;
     class?: string;
 };
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;

package/dist/components/molecules/Modal.svelte

@@ -14,12 +14,16 @@
 		onclose,
 		body,
 		footer,
+		size = 'md',
 		resizeKey
 	}: {
 		title: string;
 		onclose: () => void;
 		body: Snippet;
 		footer?: Snippet;
+		/** Desktop width preset (sm 24rem / md 34rem / lg 48rem). A `resizeKey`
+		 *  drag still overrides it. */
+		size?: 'sm' | 'md' | 'lg';
 		/** When set, the sheet is horizontally resizable on desktop and the chosen
 		 *  width persists under this localStorage key. */
 		resizeKey?: string;
@@ -104,7 +108,7 @@
 	}}
 	onclick={onDialogClick}
 >
-	<div class="sheet">
+	<div class="sheet" class:sheet-sm={size === 'sm'} class:sheet-lg={size === 'lg'}>
 		<div class="sheet-head">
 			<span id={titleId} class="sheet-title truncate">{title}</span>
 			<div class="spacer"></div>
@@ -167,9 +171,10 @@
 	}
 
 	.sheet {
+		--sw: 34rem; /* width preset; overridden by --sheet-w when resized */
 		position: relative;
 		width: 100%;
-		max-width: 34rem;
+		max-width: var(--sw);
 		max-height: calc(100dvh - var(--safe-top) - var(--sp-6));
 		display: flex;
 		flex-direction: column;
@@ -184,8 +189,14 @@
 		.sheet {
 			border-radius: var(--r-lg);
 			padding-bottom: 0;
-			width: var(--sheet-w, 34rem);
-			max-width: min(var(--sheet-w, 34rem), calc(100vw - 2rem));
+			width: var(--sheet-w, var(--sw));
+			max-width: min(var(--sheet-w, var(--sw)), calc(100vw - 2rem));
+		}
+		.sheet-sm {
+			--sw: 24rem;
+		}
+		.sheet-lg {
+			--sw: 48rem;
 		}
 	}
 	@keyframes sheet-up {

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

@@ -4,6 +4,9 @@ type $$ComponentProps = {
     onclose: () => void;
     body: Snippet;
     footer?: Snippet;
+    /** Desktop width preset (sm 24rem / md 34rem / lg 48rem). A `resizeKey`
+     *  drag still overrides it. */
+    size?: 'sm' | 'md' | 'lg';
     /** When set, the sheet is horizontally resizable on desktop and the chosen
      *  width persists under this localStorage key. */
     resizeKey?: string;

package/dist/components/molecules/OptionButton.svelte

@@ -5,17 +5,16 @@
 	// adapter, green/blue/red for permission mode). `row` lays the content out
 	// horizontally (icon + label) instead of the default label-over-hint column.
 	//
-	// Specializes the Button atom (ghost variant) so it inherits the canonical
-	// disabled/focus/transition behaviour; the card surface + selection ring are
-	// overrides. Button's variant classes are scoped via :where() (0 specificity),
-	// so `.btn.opt-btn` (0,2,0) wins cleanly over `.btn-ghost`.
+	// A selection card 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 {
 		selected = false,
 		row = false,
+		type = 'button',
+		disabled = false,
 		class: klass = '',
 		children,
 		...rest
@@ -26,40 +25,44 @@
 	} = $props();
 </script>
 
-<Button
+<button
 	{...rest}
-	variant="ghost"
-	class="opt-btn {row ? 'row' : ''} {selected ? 'sel' : ''} {klass}"
+	{type}
+	{disabled}
+	class="opt {klass}"
+	class:row
+	class:selected
 	aria-pressed={selected}
 >
 	{@render children?.()}
-</Button>
+</button>
 
 <style>
-	/* Rendered inside Button, so target via :global; `.btn.opt-btn` outranks the
-	   atom's :where()-scoped variant classes. */
-	:global(.btn.opt-btn) {
+	.opt {
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
 		padding: var(--sp-2);
-		min-height: 0;
 		background: var(--bg);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
 		color: var(--text);
 		text-align: left;
 		white-space: normal;
+		user-select: none;
+		transition:
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease),
+			color 0.12s var(--ease);
 	}
-	/* Hover only restyles UNselected cards. Excluding `.sel` matters because this
-	   rule is (0,4,0) — the `:not(:disabled)` pseudo-class pushes it above
-	   `.btn.opt-btn.sel` (0,3,0) — so without the guard it would strip a selected
-	   card's accent border + tint on hover, leaving a half-styled card. */
-	:global(.btn.opt-btn:hover:not(:disabled):not(.sel)) {
+	.opt:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.opt:hover:not(:disabled):not(.selected) {
 		border-color: var(--border-strong);
-		background: var(--bg);
 	}
-	:global(.btn.opt-btn.row) {
+	.opt.row {
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
@@ -67,22 +70,17 @@
 		color: var(--text-muted);
 		font-weight: var(--fw-medium);
 	}
-	:global(.btn.opt-btn.sel) {
+	.opt.selected {
 		--oc: var(--opt-accent, var(--accent));
+		/* Retint slotted `.faint` hint text toward the accent — via an inherited
+		   custom property, so no :global reach into slotted content. */
+		--faint-color: color-mix(in srgb, var(--oc) 70%, var(--text-muted));
 		border-color: var(--oc);
 		background: color-mix(in srgb, var(--oc) 14%, var(--bg));
 		color: var(--oc);
 	}
-	/* Reassert the accent on a hovered selected card. Button's `.btn-ghost:hover`
-	   (0,3,0) ties with `.sel` and wins on source order, repainting the card with
-	   the neutral elevated hover bg + transparent border; this rule (0,5,0) beats
-	   it so the selection stays visible, slightly brightened for hover affordance. */
-	:global(.btn.opt-btn.sel:hover:not(:disabled)) {
+	.opt.selected:hover:not(:disabled) {
 		border-color: var(--oc);
 		background: color-mix(in srgb, var(--oc) 20%, var(--bg));
 	}
-	/* The slotted hint text (a global `.faint`) tints toward the accent too. */
-	:global(.btn.opt-btn.sel .faint) {
-		color: color-mix(in srgb, var(--oc) 70%, var(--text-muted));
-	}
 </style>

package/dist/components/molecules/Popover.svelte

@@ -9,6 +9,7 @@
 	// ships beyond Chromium; the popover semantics above are the hard part and
 	// are broadly supported today.)
 	import type { Snippet } from 'svelte';
+	import { place } from '../../floating';
 
 	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 
@@ -18,6 +19,8 @@
 		label,
 		trigger,
 		children,
+		triggerClass = '',
+		bare = false,
 		onopen,
 		onclose
 	}: {
@@ -25,11 +28,16 @@
 		gap?: number;
 		/** Accessible name for the trigger. */
 		label: string;
-		/** Trigger content (rendered inside a ghost button that owns the popover
-		 *  wiring). */
+		/** Trigger content (rendered inside a button that owns the popover wiring). */
 		trigger: Snippet;
 		/** Panel content. */
 		children: Snippet;
+		/** Extra class on the trigger button — style it from your own scoped CSS,
+		 *  no :global needed (you supply the class). */
+		triggerClass?: string;
+		/** Drop the default ghost-icon chrome so the trigger is an unstyled button
+		 *  you fully own (pair with `triggerClass`). */
+		bare?: boolean;
 		onopen?: () => void;
 		onclose?: () => void;
 	} = $props();
@@ -38,34 +46,19 @@
 	let triggerEl = $state<HTMLButtonElement | null>(null);
 	let panelEl = $state<HTMLDivElement | null>(null);
 
-	function place() {
-		if (!triggerEl || !panelEl) return;
-		const t = triggerEl.getBoundingClientRect();
-		const p = panelEl.getBoundingClientRect();
-		const vw = document.documentElement.clientWidth;
-		const vh = document.documentElement.clientHeight;
-
-		let top = placement.startsWith('bottom') ? t.bottom + gap : t.top - p.height - gap;
-		let left = placement.endsWith('end') ? t.right - p.width : t.left;
-
-		// Flip vertically / clamp horizontally to stay on screen.
-		if (top + p.height > vh && t.top - p.height - gap > 0) top = t.top - p.height - gap;
-		if (top < 0) top = gap;
-		left = Math.max(gap, Math.min(left, vw - p.width - gap));
-
-		panelEl.style.top = `${Math.round(top)}px`;
-		panelEl.style.left = `${Math.round(left)}px`;
+	function reposition() {
+		if (triggerEl && panelEl) place(triggerEl, panelEl, placement, gap);
 	}
 
 	function onToggle(e: ToggleEvent) {
 		if (e.newState === 'open') {
-			place();
-			addEventListener('scroll', place, true);
-			addEventListener('resize', place);
+			reposition();
+			addEventListener('scroll', reposition, true);
+			addEventListener('resize', reposition);
 			onopen?.();
 		} else {
-			removeEventListener('scroll', place, true);
-			removeEventListener('resize', place);
+			removeEventListener('scroll', reposition, true);
+			removeEventListener('resize', reposition);
 			onclose?.();
 		}
 	}
@@ -74,7 +67,8 @@
 <button
 	bind:this={triggerEl}
 	type="button"
-	class="btn btn-ghost btn-icon pop-trigger"
+	class="pop-trigger {triggerClass}"
+	class:bare
 	popovertarget={id}
 	aria-label={label}
 >
@@ -94,10 +88,37 @@
 </div>
 
 <style>
+	/* The trigger owns its look (a ghost icon-button) from tokens — it no longer
+	   borrows global .btn classes, so a consumer can restyle it via `triggerClass`
+	   (+ `bare`) from their own scoped CSS instead of fighting globals. */
 	.pop-trigger {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+		min-height: 2.25rem;
+		min-width: 2.25rem;
+		padding: var(--sp-2);
+		border: 1px solid transparent;
+		border-radius: var(--r-md);
+		background: transparent;
+		color: var(--text);
+		transition:
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease);
+	}
+	.pop-trigger:hover {
+		background: var(--bg-elevated-2);
+	}
+	/* `bare`: strip the chrome down to a plain button the consumer styles. */
+	.pop-trigger.bare {
+		min-height: 0;
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+	}
+	.pop-trigger.bare:hover {
+		background: none;
 	}
 	.pop-panel {
 		position: fixed;