@dorsk/tsumikit 0.29.0 → 0.30.0

package/dist/components/atoms/Button.svelte

@@ -3,17 +3,24 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	type ButtonProps = HTMLButtonAttributes & {
-		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		// `link`: no box at all — an inline text action coloured like a link
+		// (or like `tone` when set), underlined on hover/focus.
+		variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'link';
 		// Semantic state tint layered on top of the variant: tints text/border and
 		// adds a subtle fill on hover. For stateful controls — an "on"/active toggle
 		// (`accent`), positive actions (`success`), or cost/severity states.
 		tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 		size?: 'sm' | 'md' | 'lg';
 		control?: boolean;
+		// Fully rounded ends (`--r-pill`) on any size/variant.
+		pill?: 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;
+		// `shrink={false}` pins the button to its intrinsic width in a flex row
+		// (flex: none, top-aligned) so a growing sibling can't squash it.
+		shrink?: 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"`.
@@ -56,8 +63,10 @@
 		tone = 'none',
 		size = 'md',
 		control = false,
+		pill = false,
 		block = false,
 		grow = false,
+		shrink = true,
 		as = 'button',
 		href,
 		icon = false,
@@ -113,6 +122,9 @@
 	class:btn-primary={variant === 'primary'}
 	class:btn-ghost={variant === 'ghost'}
 	class:btn-danger={variant === 'danger' || (tone === 'danger' && variant === 'default')}
+	class:btn-link={variant === 'link'}
+	class:btn-pill={pill}
+	class:no-shrink={!shrink}
 	class:btn-sm={size === 'sm'}
 	class:btn-lg={size === 'lg'}
 	class:btn-control={control}
@@ -354,6 +366,33 @@
 		filter: brightness(1.08);
 	}
 
+	.no-shrink {
+		flex: none;
+		align-self: flex-start;
+	}
+	.btn-pill {
+		border-radius: var(--r-pill);
+	}
+	/* Link variant: no box, inherits the surrounding text size. Placed after the
+	   size rules so their min-height doesn't reapply; a tone wins over --link. */
+	.btn-link {
+		min-height: auto;
+		height: auto;
+		padding: 0 var(--sp-1);
+		border: none;
+		background: none;
+		box-shadow: none;
+		border-radius: 0;
+		font-size: inherit;
+		line-height: 1;
+		color: var(--btn-tone, var(--link));
+	}
+	.btn-link:hover:not(:disabled),
+	.btn-link:focus-visible {
+		background: none;
+		border: none;
+		text-decoration: underline;
+	}
 	/* Icon-only buttons (IconButton). Square box = consistent --box-md tap target. */
 	.btn-icon {
 		min-height: var(--box-md);

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

@@ -1,12 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type ButtonProps = HTMLButtonAttributes & {
-    variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'link';
     tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     control?: boolean;
+    pill?: boolean;
     block?: boolean;
     grow?: boolean;
+    shrink?: boolean;
     as?: 'button' | 'a';
     href?: string;
     target?: string;

package/dist/components/molecules/FileButton.svelte

@@ -16,6 +16,7 @@
 		disabled = false,
 		variant = 'default',
 		size = 'md',
+		control = false,
 		box,
 		hitArea = 'auto',
 		class: klass = ''
@@ -38,6 +39,9 @@
 		/** Match the Button atom's sizes so a FileButton lines up with buttons in
 		 *  the same row. */
 		size?: 'sm' | 'md' | 'lg';
+		/** Uniform `--control-height`, like Button's `control`, so it lines up in a
+		 *  composer/toolbar row. */
+		control?: boolean;
 		/** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		/** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
@@ -62,6 +66,7 @@
 	class:ghost={variant === 'ghost'}
 	class:sm={size === 'sm'}
 	class:lg={size === 'lg'}
+	class:control
 	class:icon-only={onlyIcon}
 	class:box={box !== undefined}
 	class:hit-compact={hitArea === 'compact'}
@@ -125,6 +130,11 @@
 		padding: var(--sp-3) var(--sp-5);
 		font-size: var(--fs-base);
 	}
+	.file-btn.control {
+		height: var(--control-height);
+		min-height: var(--control-height);
+		padding: 0 var(--sp-3);
+	}
 	/* icon-only: square it up and drop the label gap. */
 	.file-btn.icon-only {
 		gap: 0;

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

@@ -18,6 +18,9 @@ type $$ComponentProps = {
     /** Match the Button atom's sizes so a FileButton lines up with buttons in
      *  the same row. */
     size?: 'sm' | 'md' | 'lg';
+    /** Uniform `--control-height`, like Button's `control`, so it lines up in a
+     *  composer/toolbar row. */
+    control?: boolean;
     /** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
     /** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */

package/dist/components/molecules/IconButton.svelte

@@ -16,6 +16,11 @@
 		children?: Snippet;
 		label: string;
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		// Fully rounded (`--r-pill`) box. Forwarded to Button.
+		pill?: boolean;
+		// `shrink={false}` pins the box to its intrinsic size in a flex row.
+		// Forwarded to Button.
+		shrink?: boolean;
 		// Semantic state tint (forwarded to Button). Pairs well with `chip`.
 		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
 		// Outlined `--box-lg` square icon-chip (header/toolbar actions).
@@ -55,6 +60,8 @@
 		variant = 'ghost',
 		tone = 'none',
 		chip = false,
+		pill = false,
+		shrink = true,
 		box,
 		size = 18,
 		glyphSize,
@@ -82,6 +89,8 @@
 	{variant}
 	{tone}
 	{chip}
+	{pill}
+	{shrink}
 	{box}
 	{hitArea}
 	{disabled}

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

@@ -12,6 +12,8 @@ type IconButtonProps = HTMLButtonAttributes & {
     children?: Snippet;
     label: string;
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    pill?: boolean;
+    shrink?: boolean;
     tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
     chip?: boolean;
     box?: 'xs' | 'sm' | 'md' | 'lg';

package/dist/components/molecules/Toggle.svelte

@@ -14,6 +14,9 @@
 		pressed = false,
 		pill = false,
 		struck = false,
+		size = 'sm',
+		grow = false,
+		shrink = true,
 		type = 'button',
 		disabled = false,
 		class: klass = '',
@@ -23,6 +26,11 @@
 		pressed?: boolean;
 		pill?: boolean;
 		struck?: boolean;
+		size?: 'sm' | 'md';
+		// Share a flex row with siblings (flex: 1 1 0).
+		grow?: boolean;
+		// `shrink={false}` keeps the chip at its intrinsic width (flex: none).
+		shrink?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -35,6 +43,9 @@
 	class="toggle {klass}"
 	class:pill
 	class:struck
+	class:md={size === 'md'}
+	class:grow
+	class:no-shrink={!shrink}
 	class:on={pressed}
 	aria-pressed={pressed}
 >
@@ -69,6 +80,17 @@
 	.toggle.pill {
 		border-radius: var(--r-pill);
 	}
+	.toggle.md {
+		padding: 0.3rem var(--sp-2);
+		font-size: var(--fs-sm);
+	}
+	.toggle.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.toggle.no-shrink {
+		flex: none;
+	}
 	.toggle:hover:not(:disabled) {
 		border-color: var(--border-strong);
 	}

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

@@ -4,6 +4,9 @@ type $$ComponentProps = HTMLButtonAttributes & {
     pressed?: boolean;
     pill?: boolean;
     struck?: boolean;
+    size?: 'sm' | 'md';
+    grow?: boolean;
+    shrink?: boolean;
     children?: Snippet;
 };
 declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.29.0",
+  "version": "0.30.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",