@dorsk/tsumikit 0.1.0 → 0.2.0

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/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,36 +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);
 	}
-	:global(.btn.opt-btn:hover:not(:disabled)) {
+	.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;
@@ -63,14 +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);
 	}
-	/* 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));
+	.opt.selected:hover:not(:disabled) {
+		border-color: var(--oc);
+		background: color-mix(in srgb, var(--oc) 20%, var(--bg));
 	}
 </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;

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

@@ -5,11 +5,16 @@ type $$ComponentProps = {
     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;
 };

package/dist/components/molecules/SelectButton.svelte

@@ -27,26 +27,30 @@
 	} = $props();
 </script>
 
-<Button variant="ghost" class="select-button btn-icon {klass}" {title} aria-label={label}>
-	<span aria-hidden="true">{glyph}</span>
-	<Select
-		variant="ghost"
-		aria-label={label}
-		{value}
-		onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
-	>
-		{#each options as o (o.value)}
-			<option value={o.value}>{o.label}</option>
-		{/each}
-	</Select>
-</Button>
+<!-- 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}">
+	<Button variant="ghost" icon {title} aria-label={label}>
+		<span aria-hidden="true">{glyph}</span>
+		<Select
+			variant="ghost"
+			aria-label={label}
+			{value}
+			onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
+		>
+			{#each options as o (o.value)}
+				<option value={o.value}>{o.label}</option>
+			{/each}
+		</Select>
+	</Button>
+</span>
 
 <style>
-	/* The button must clip + position the overlaid select. It's rendered by
-	   Button (child component), so target it via :global. */
-	:global(.select-button) {
+	.select-button {
 		position: relative;
+		display: inline-flex;
 		overflow: hidden;
+		border-radius: var(--r-md);
 		font-weight: var(--fw-bold);
 	}
 </style>