@dorsk/tsumikit 0.16.0 → 0.17.0

package/dist/components/atoms/Button.svelte

@@ -11,6 +11,16 @@
 		size?: 'sm' | 'md' | 'lg';
 		control?: boolean;
 		block?: boolean;
+		// Fill the available width of a flex/Cluster row (flex: 1). `block` stretches
+		// to 100% (grid/stack); `grow` shares a flex row with siblings.
+		grow?: boolean;
+		// Render as a link (`<a href>`) while keeping button chrome — for navigations
+		// and open-in-new-tab actions that shouldn't be a bare <a>. Setting `href`
+		// implies `as="a"`.
+		as?: 'button' | 'a';
+		href?: string;
+		target?: string;
+		rel?: string;
 		// Square 2.25rem icon-only tap target (IconButton). `iconInline` is the
 		// borderless, compact variant (chip-remove ✕, inline edit ✎); pair with
 		// `hoverDanger` to tint it red on hover (delete affordances).
@@ -33,6 +43,9 @@
 		size = 'md',
 		control = false,
 		block = false,
+		grow = false,
+		as = 'button',
+		href,
 		icon = false,
 		chip = false,
 		iconInline = false,
@@ -46,16 +59,27 @@
 		children,
 		...rest
 	}: ButtonProps = $props();
+
+	// A link-flavoured Button is a real <a>; native `disabled`/`type` don't apply,
+	// so a disabled link is expressed via aria-disabled + inert pointer handling.
+	const tag = $derived(href !== undefined || as === 'a' ? 'a' : 'button');
+	const inactive = $derived(disabled || loading);
+	const elementAttrs = $derived(
+		tag === 'a'
+			? { href, 'aria-disabled': inactive || undefined }
+			: { type, disabled: inactive }
+	);
 </script>
 
-<button
+<svelte:element
+	this={tag}
 	data-tsu="Button"
 	{...rest}
-	{type}
-	disabled={disabled || loading}
+	{...elementAttrs}
 	aria-busy={loading || undefined}
 	{title}
 	class="btn {klass}"
+	class:btn-grow={grow}
 	class:btn-primary={variant === 'primary'}
 	class:btn-ghost={variant === 'ghost'}
 	class:btn-danger={variant === 'danger'}
@@ -77,7 +101,7 @@
 >
 	{#if loading}<span class="btn-spinner" aria-hidden="true"></span>{/if}
 	{@render children?.()}
-</button>
+</svelte:element>
 
 <style>
 	/* The canonical control: owns its variants/sizes/modifiers from theme tokens.
@@ -151,6 +175,19 @@
 	.btn-block {
 		width: 100%;
 	}
+	.btn-grow {
+		flex: 1 1 0;
+	}
+	/* Link-flavoured Button: keep button chrome, drop the anchor's default link
+	   look, and make a disabled link truly inert. */
+	a.btn {
+		text-decoration: none;
+	}
+	a.btn[aria-disabled='true'] {
+		opacity: 0.45;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
 
 	/* Semantic state tones — tint text + border, subtle fill on hover. Layered on
 	   the neutral/ghost variant; each defines --btn-tone so one ruleset paints. */

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

@@ -6,6 +6,11 @@ type ButtonProps = HTMLButtonAttributes & {
     size?: 'sm' | 'md' | 'lg';
     control?: boolean;
     block?: boolean;
+    grow?: boolean;
+    as?: 'button' | 'a';
+    href?: string;
+    target?: string;
+    rel?: string;
     icon?: boolean;
     chip?: boolean;
     iconInline?: boolean;

package/dist/components/atoms/Input.svelte

@@ -9,6 +9,9 @@
 	type Props = Omit<HTMLInputAttributes, 'size'> & {
 		mono?: boolean;
 		size?: 'sm' | 'md';
+		/** Fill the available width of a flex/Cluster row (flex: 1) instead of
+		 *  needing a raw `style="flex:1"` at the call-site. */
+		grow?: boolean;
 		/** Error state: danger border + aria-invalid (also styles if a consumer
 		 *  sets aria-invalid directly). */
 		invalid?: boolean;
@@ -20,6 +23,7 @@
 	let {
 		mono = false,
 		size = 'md',
+		grow = false,
 		invalid = false,
 		class: klass = '',
 		value = $bindable(),
@@ -34,6 +38,7 @@
 	class="input {klass}"
 	class:mono
 	class:input-sm={size === 'sm'}
+	class:input-grow={grow}
 	bind:value
 	{...rest}
 	aria-invalid={invalid || undefined}
@@ -57,6 +62,11 @@
 		padding: var(--sp-2);
 		font-size: var(--fs-sm);
 	}
+	.input-grow {
+		flex: 1 1 0;
+		width: auto;
+		min-width: 0;
+	}
 	.input[aria-invalid='true'] {
 		border-color: var(--danger);
 	}

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

@@ -2,6 +2,9 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 type Props = Omit<HTMLInputAttributes, 'size'> & {
     mono?: boolean;
     size?: 'sm' | 'md';
+    /** Fill the available width of a flex/Cluster row (flex: 1) instead of
+     *  needing a raw `style="flex:1"` at the call-site. */
+    grow?: boolean;
     /** Error state: danger border + aria-invalid (also styles if a consumer
      *  sets aria-invalid directly). */
     invalid?: boolean;

package/dist/components/atoms/Select.svelte

@@ -15,12 +15,18 @@
 	import type { HTMLSelectAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
 
-	type Props = HTMLSelectAttributes & {
+	// `size` shadows the native option-count attribute (unused in token layouts) to
+	// expose the sm|md height scale instead.
+	type Props = Omit<HTMLSelectAttributes, 'size'> & {
 		variant?: 'default' | 'ghost';
 		/** Error state: danger border + aria-invalid. */
 		invalid?: boolean;
-		/** Compact inline form: smaller padding + font for dense toolbars/headers. */
+		/** Compact inline form: smaller padding + font for dense toolbars/headers.
+		 *  Deprecated alias for `size="sm"` (kept for backward compatibility). */
 		compact?: boolean;
+		/** Size scale matching Button/SegmentedControl: `sm` also adopts the shared
+		 *  `--control-height-compact` toolbar height so it lines up with siblings. */
+		size?: 'sm' | 'md';
 		/** Draw the custom chevron (default). Set false for a bare inline select. */
 		chevron?: boolean;
 		class?: string;
@@ -32,12 +38,15 @@
 		variant = 'default',
 		invalid = false,
 		compact = false,
+		size = 'md',
 		chevron = true,
 		class: klass = '',
 		value = $bindable(),
 		children,
 		...rest
 	}: Props = $props();
+
+	const small = $derived(compact || size === 'sm');
 </script>
 
 {#if variant === 'ghost'}
@@ -48,7 +57,8 @@
 	<div class="select-wrap {klass}" class:no-chevron={!chevron} data-tsu="Select">
 		<select
 			class="select"
-			class:compact
+			class:compact={small}
+			class:select-sm={size === 'sm'}
 			bind:value
 			{...rest}
 			aria-invalid={invalid || undefined}
@@ -96,6 +106,11 @@
 	.select-wrap:not(.no-chevron) .select.compact {
 		padding-right: calc(var(--sp-2) + 1rem);
 	}
+	/* Toolbar contract: size="sm" shares the compact control height so it lines up
+	   with Button size="sm", Popover size="sm" and SegmentedControl size="sm". */
+	.select.select-sm {
+		height: var(--control-height-compact);
+	}
 	.select:focus {
 		outline: none;
 		border-color: var(--accent);

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

@@ -1,11 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
-type Props = HTMLSelectAttributes & {
+type Props = Omit<HTMLSelectAttributes, 'size'> & {
     variant?: 'default' | 'ghost';
     /** Error state: danger border + aria-invalid. */
     invalid?: boolean;
-    /** Compact inline form: smaller padding + font for dense toolbars/headers. */
+    /** Compact inline form: smaller padding + font for dense toolbars/headers.
+     *  Deprecated alias for `size="sm"` (kept for backward compatibility). */
     compact?: boolean;
+    /** Size scale matching Button/SegmentedControl: `sm` also adopts the shared
+     *  `--control-height-compact` toolbar height so it lines up with siblings. */
+    size?: 'sm' | 'md';
     /** Draw the custom chevron (default). Set false for a bare inline select. */
     chevron?: boolean;
     class?: string;

package/dist/components/layouts/Cluster.svelte

@@ -5,12 +5,25 @@
 	// `wrap={false}` to keep one line. Polymorphic via `as`.
 	import type { Snippet } from 'svelte';
 
+	// `size` cascades a uniform control tier to descendant controls that honour the
+	// shared `--control-height` contract (Button/IconButton/Popover `control`,
+	// SegmentedControl/Select `control`), so a whole toolbar lines up from one prop
+	// instead of per-child sizing. `grow` makes direct children share the row width
+	// equally (flex: 1) — the toolbar equivalent of `style="flex:1"` on each child.
+	const CONTROL_TIER = {
+		sm: 'var(--control-height-compact)',
+		md: 'var(--control-height-default)',
+		lg: 'var(--control-height-large)'
+	} as const;
+
 	let {
 		as = 'div',
 		gap = 'var(--sp-2)',
 		align = 'center',
 		justify,
 		wrap = true,
+		size,
+		grow = false,
 		class: klass = '',
 		children,
 		...rest
@@ -20,6 +33,8 @@
 		align?: string;
 		justify?: string;
 		wrap?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		grow?: boolean;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
@@ -30,10 +45,12 @@
 	this={as}
 	data-tsu="Cluster"
 	class="cluster-c {klass}"
+	class:cluster-grow={grow}
 	style:gap
 	style:align-items={align}
 	style:justify-content={justify}
 	style:flex-wrap={wrap ? 'wrap' : 'nowrap'}
+	style:--control-height={size ? CONTROL_TIER[size] : undefined}
 	{...rest}
 >
 	{@render children?.()}
@@ -43,4 +60,8 @@
 	.cluster-c {
 		display: flex;
 	}
+	.cluster-grow > :global(*) {
+		flex: 1 1 0;
+		min-width: 0;
+	}
 </style>

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

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     align?: string;
     justify?: string;
     wrap?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    grow?: boolean;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/layouts/ResizablePanel.svelte

@@ -16,7 +16,9 @@
 		widthKey,
 		collapsed = $bindable(false),
 		persistCollapsed = true,
-		resizeStep = 16
+		resizeStep = 16,
+		handlePlacement = 'bottom',
+		stickyHandle = true
 	}: {
 		/** Content shown while the panel is expanded. */
 		panel: Snippet;
@@ -38,12 +40,19 @@
 		persistCollapsed?: boolean;
 		/** Pixels added or removed by each resize-separator arrow key press. */
 		resizeStep?: number;
+		/** Anchor the collapse handle at the top or bottom of the panel edge. */
+		handlePlacement?: 'top' | 'bottom';
+		/** Keep the collapse handle in view when the panel scrolls past the
+		 *  viewport, repositioning on scroll/resize via requestAnimationFrame. */
+		stickyHandle?: boolean;
 	} = $props();
 
 	let root: HTMLDivElement;
+	let handleEl = $state<HTMLButtonElement | null>(null);
 	let panelWidth = $state<number>();
 	let resizing = $state(false);
 	let restored = false;
+	let stickyShift = $state(0);
 
 	const boundedMin = $derived(Math.max(1, Math.min(minWidth, maxWidth)));
 	const boundedMax = $derived(Math.max(boundedMin, maxWidth));
@@ -96,6 +105,55 @@
 		(nextWidth) => setWidth(nextWidth, false)
 	);
 
+	// Keep the collapse handle within the viewport (and its panel) while a long
+	// panel scrolls past the fold. Scroll fires often, so coalesce recomputes
+	// into one per animation frame.
+	let stickyFrame: number | undefined;
+
+	function computeSticky() {
+		if (!stickyHandle || !root || !handleEl) {
+			stickyShift = 0;
+			return;
+		}
+		const bounds = root.getBoundingClientRect();
+		const viewport = window.innerHeight || document.documentElement.clientHeight;
+		const handleHeight = handleEl.offsetHeight;
+		const margin = 8;
+		const naturalTop =
+			handlePlacement === 'top'
+				? bounds.top + margin
+				: bounds.bottom - margin - handleHeight;
+		const panelLo = bounds.top + margin;
+		const panelHi = bounds.bottom - margin - handleHeight;
+		const inViewport = Math.min(Math.max(naturalTop, margin), viewport - margin - handleHeight);
+		const clamped = Math.min(Math.max(inViewport, panelLo), Math.max(panelLo, panelHi));
+		stickyShift = Math.round(clamped - naturalTop);
+	}
+
+	function scheduleSticky() {
+		if (!browser || stickyFrame !== undefined) return;
+		stickyFrame = requestAnimationFrame(() => {
+			stickyFrame = undefined;
+			computeSticky();
+		});
+	}
+
+	$effect(() => {
+		if (!browser || !stickyHandle) {
+			stickyShift = 0;
+			return;
+		}
+		computeSticky();
+		addEventListener('scroll', scheduleSticky, true);
+		addEventListener('resize', scheduleSticky);
+		return () => {
+			removeEventListener('scroll', scheduleSticky, true);
+			removeEventListener('resize', scheduleSticky);
+			if (stickyFrame !== undefined) cancelAnimationFrame(stickyFrame);
+			stickyFrame = undefined;
+		};
+	});
+
 	onDestroy(() => pointerWidths.discard());
 
 	function toggle() {
@@ -196,14 +254,18 @@
 		{/if}
 
 		<button
+			bind:this={handleEl}
 			type="button"
 			class="collapse-control"
+			class:top={handlePlacement === 'top'}
+			class:bottom={handlePlacement === 'bottom'}
 			aria-label={toggleLabel}
 			aria-expanded={!collapsed}
 			title={toggleLabel}
+			style="transform: translateY({stickyShift}px)"
 			onclick={toggle}
 		>
-			<Icon name={toggleIcon} size={20} />
+			<Icon name={toggleIcon} size={14} />
 		</button>
 	</aside>
 
@@ -260,32 +322,45 @@
 		min-height: 0;
 		overflow: auto;
 	}
+	/* Subtle chevron handle anchored to the panel's inner edge — never a filled
+	   button, never overlapping the neighbouring main content. It stays visible
+	   when collapsed (the panel is 0px wide) because it lives on the layout edge,
+	   and its `transform` is nudged by the sticky logic to track the viewport. */
 	.collapse-control {
 		position: absolute;
-		right: calc(-1 * var(--control-height));
-		bottom: var(--sp-3);
+		left: var(--sp-1);
 		z-index: 3;
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--control-height);
-		height: var(--control-height);
+		width: 18px;
+		height: 30px;
 		padding: 0;
-		color: var(--text-muted);
+		color: var(--text-faint);
 		font: inherit;
-		background: var(--bg-elevated-2);
-		border: 1px solid var(--border);
+		background: transparent;
+		border: 1px solid transparent;
 		border-radius: var(--r-sm);
-		box-shadow: var(--shadow-sm);
 		cursor: pointer;
+		transition:
+			color 0.12s var(--ease),
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease);
+	}
+	.collapse-control.top {
+		top: var(--sp-2);
+	}
+	.collapse-control.bottom {
+		bottom: var(--sp-2);
 	}
 	.right .collapse-control {
-		right: auto;
-		left: calc(-1 * var(--control-height));
+		left: auto;
+		right: var(--sp-1);
 	}
 	.collapse-control:hover {
 		color: var(--text);
-		background: var(--surface);
+		background: var(--bg-elevated-2);
+		border-color: var(--border);
 	}
 	.collapse-control:focus-visible,
 	.resize-handle:focus-visible {

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

@@ -20,6 +20,11 @@ type $$ComponentProps = {
     persistCollapsed?: boolean;
     /** Pixels added or removed by each resize-separator arrow key press. */
     resizeStep?: number;
+    /** Anchor the collapse handle at the top or bottom of the panel edge. */
+    handlePlacement?: 'top' | 'bottom';
+    /** Keep the collapse handle in view when the panel scrolls past the
+     *  viewport, repositioning on scroll/resize via requestAnimationFrame. */
+    stickyHandle?: boolean;
 };
 declare const ResizablePanel: import("svelte").Component<$$ComponentProps, {}, "collapsed">;
 type ResizablePanel = ReturnType<typeof ResizablePanel>;

package/dist/components/molecules/IconButton.svelte

@@ -30,6 +30,10 @@
 		// the glyph with the accent when on. Override the tint per-instance with
 		// `style="--btn-on: var(--warn)"`.
 		pressed?: boolean;
+		// Render as a link (`<a href>`) while keeping icon-button chrome — e.g. an
+		// open-on-GitHub action. Forwarded to Button; `href` implies `as="a"`.
+		as?: 'button' | 'a';
+		href?: string;
 		class?: string;
 	};
 

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

@@ -18,6 +18,8 @@ type IconButtonProps = HTMLButtonAttributes & {
     inline?: boolean;
     hoverDanger?: boolean;
     pressed?: boolean;
+    as?: 'button' | 'a';
+    href?: string;
     class?: string;
 };
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;

package/dist/components/molecules/OptionButton.svelte

@@ -13,6 +13,8 @@
 	let {
 		selected = false,
 		row = false,
+		align = 'center',
+		block = false,
 		type = 'button',
 		disabled = false,
 		class: klass = '',
@@ -21,6 +23,11 @@
 	}: HTMLButtonAttributes & {
 		selected?: boolean;
 		row?: boolean;
+		/** Horizontal content alignment. `start` gives a left-aligned list-row
+		 *  variant (pair with `block` for a full-width menu item). */
+		align?: 'center' | 'start';
+		/** Stretch to fill the container width (full-width list/menu row). */
+		block?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -32,6 +39,8 @@
 	{disabled}
 	class="opt {klass}"
 	class:row
+	class:align-start={align === 'start'}
+	class:block
 	class:selected
 	aria-pressed={selected}
 >
@@ -71,6 +80,16 @@
 		color: var(--text-muted);
 		font-weight: var(--fw-medium);
 	}
+	.opt.block {
+		width: 100%;
+	}
+	/* Left-aligned list-row variant: content packs to the start on both axes. */
+	.opt.align-start {
+		align-items: flex-start;
+	}
+	.opt.row.align-start {
+		justify-content: flex-start;
+	}
 	.opt.selected {
 		--oc: var(--opt-accent, var(--accent));
 		/* Retint slotted `.faint` hint text toward the accent — via an inherited

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

@@ -3,6 +3,11 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLButtonAttributes & {
     selected?: boolean;
     row?: boolean;
+    /** Horizontal content alignment. `start` gives a left-aligned list-row
+     *  variant (pair with `block` for a full-width menu item). */
+    align?: 'center' | 'start';
+    /** Stretch to fill the container width (full-width list/menu row). */
+    block?: boolean;
     children?: Snippet;
 };
 declare const OptionButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/SegmentedControl.svelte

@@ -31,6 +31,7 @@
 		// accessible name only); `pill` keeps the labelled filter-pill layout.
 		variant = 'pill',
 		size = 'md',
+		control = false,
 		label = 'Options',
 		// `mobile` hides segment labels below the mobile breakpoint, collapsing
 		// labelled segments to centered icon-only squares (aria-label preserved).
@@ -43,6 +44,9 @@
 		value?: string;
 		variant?: 'pill' | 'icon';
 		size?: 'sm' | 'md';
+		/** Adopt the shared `--control-height` toolbar contract (like Popover/Button
+		 *  `control`) so the whole segmented control height-matches its siblings. */
+		control?: boolean;
 		label?: string;
 		collapseLabels?: 'never' | 'mobile';
 		class?: string;
@@ -84,6 +88,7 @@
 	aria-label={label}
 	tabindex="-1"
 	class="seg seg-{variant} seg-{size} {klass}"
+	class:seg-control={control}
 	class:seg-collapse-mobile={collapseLabels === 'mobile'}
 	data-tsu="SegmentedControl"
 	{onkeydown}
@@ -160,6 +165,14 @@
 	.seg-sm .seg-item {
 		height: 100%;
 	}
+	/* Shared toolbar/composer height contract — matches Button/Popover `control`. */
+	.seg-control {
+		height: var(--control-height);
+		min-height: var(--control-height);
+	}
+	.seg-control .seg-item {
+		height: 100%;
+	}
 	.seg-icon .seg-item {
 		gap: 0;
 		padding: 0.35rem;

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

@@ -15,6 +15,9 @@ type $$ComponentProps = {
     value?: string;
     variant?: 'pill' | 'icon';
     size?: 'sm' | 'md';
+    /** Adopt the shared `--control-height` toolbar contract (like Popover/Button
+     *  `control`) so the whole segmented control height-matches its siblings. */
+    control?: boolean;
     label?: string;
     collapseLabels?: 'never' | 'mobile';
     class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",