@dorsk/tsumikit 0.2.0 → 0.2.1

package/dist/components/atoms/Text.svelte

@@ -118,7 +118,14 @@
 	.fs-2xl {
 		font-size: var(--fs-2xl);
 	}
+	/* `text-overflow: ellipsis` is a no-op on an inline box, so a truncated bare
+	   <Text> (default as="span") would overrun its container instead of clipping.
+	   inline-block gives it a block formatting context so the ellipsis applies,
+	   while max-width keeps it from overflowing the parent; on block elements
+	   (as="p"/"div") these are harmless. */
 	.truncate {
+		display: inline-block;
+		max-width: 100%;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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",
@@ -50,6 +50,7 @@
     "lint": "biome check .",
     "format": "biome check --write .",
     "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-kit sync && svelte-package --watch",
     "prepublishOnly": "npm run package"
   },
   "peerDependencies": {