@dorsk/tsumikit 0.2.6 → 0.2.7

package/dist/components/layouts/AutoGrid.svelte

@@ -7,30 +7,65 @@
 	// 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.
+	//
+	// `max` caps each column's width: instead of growing to fill the row (the
+	// default `1fr`), columns top out at `max` and the grid left-packs them
+	// (auto-fill + justify-content:start) so a 3-item and a 4-item section both
+	// show uniform fixed-width columns rather than stretching to fill. `align`
+	// controls cross-axis alignment of items within their row; it defaults to
+	// `start` so cards don't stretch to the tallest sibling.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		min = '14rem',
+		max,
 		gap = 'var(--sp-4)',
 		maxCols,
+		align = 'start',
+		justify,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'div' | 'section' | 'ul' | 'ol';
 		min?: string;
+		/** Maximum column width. When set, columns stop growing at this width and
+		 * the grid left-packs uniform tracks instead of stretching to fill. */
+		max?: string;
 		gap?: string;
 		maxCols?: number;
+		/** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
+		align?: 'start' | 'center' | 'end' | 'stretch';
+		/** Inline (main-axis) distribution of tracks (justify-content). Defaults to
+		 * `start` when `max` is set, otherwise the grid's natural `stretch`. */
+		justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
 
+	// Columns grow to fill (`1fr`) by default; when `max` is given they cap there.
+	let track = $derived(max != null ? max : '1fr');
+	// auto-fill keeps capped tracks from stretching to fill the row; auto-fit
+	// (the default) collapses empty tracks so columns expand to use the space.
+	let mode = $derived(max != null ? 'auto-fill' : 'auto-fit');
+	// Left-pack capped grids by default so columns don't drift to fill the row.
+	let justifyValue = $derived(justify ?? (max != null ? 'start' : null));
+
 	let style = $derived(
-		maxCols != null
-			? `--ag-min: ${min}; --ag-gap: ${gap}; --ag-cols: ${maxCols}; gap: ${gap}`
-			: `--ag-min: ${min}; gap: ${gap}`
+		[
+			`--ag-min: ${min}`,
+			`--ag-track: ${track}`,
+			`--ag-mode: ${mode}`,
+			maxCols != null ? `--ag-gap: ${gap}` : null,
+			maxCols != null ? `--ag-cols: ${maxCols}` : null,
+			`gap: ${gap}`,
+			`align-items: ${align}`,
+			justifyValue ? `justify-content: ${justifyValue}` : null
+		]
+			.filter(Boolean)
+			.join('; ')
 	);
 </script>
 
@@ -47,7 +82,7 @@
 <style>
 	.autogrid-c {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ag-min)), 1fr));
+		grid-template-columns: repeat(var(--ag-mode), minmax(min(100%, var(--ag-min)), var(--ag-track)));
 	}
 
 	/* Cap at N columns: the per-column floor becomes the larger of `min` and the
@@ -56,10 +91,10 @@
 	   overflowing when the container is narrower than a single `min` track. */
 	.autogrid-c.capped {
 		grid-template-columns: repeat(
-			auto-fit,
+			var(--ag-mode),
 			minmax(
 				min(100%, max(var(--ag-min), (100% - (var(--ag-cols) - 1) * var(--ag-gap)) / var(--ag-cols))),
-				1fr
+				var(--ag-track)
 			)
 		);
 	}

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

@@ -2,8 +2,16 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     as?: 'div' | 'section' | 'ul' | 'ol';
     min?: string;
+    /** Maximum column width. When set, columns stop growing at this width and
+     * the grid left-packs uniform tracks instead of stretching to fill. */
+    max?: string;
     gap?: string;
     maxCols?: number;
+    /** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Inline (main-axis) distribution of tracks (justify-content). Defaults to
+     * `start` when `max` is set, otherwise the grid's natural `stretch`. */
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/layouts/Container.svelte

@@ -1,21 +1,27 @@
 <script lang="ts">
 	// Centered, max-width content column with token gutters that respect safe-area
 	// insets. `size` overrides the default --content-max; `pad` toggles vertical
-	// padding. Polymorphic via `as` so it can be a <main>, <section>, etc.
+	// padding. `fullWidth` releases the max-width constraint and lets the content
+	// bleed to the full viewport width even when nested inside a centered ancestor
+	// (the `margin-inline: calc(50% - 50vw)` trick), for edge-to-edge sections.
+	// Polymorphic via `as` so it can be a <main>, <section>, etc.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		size,
 		pad = false,
+		fullWidth = false,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'div' | 'main' | 'section' | 'article';
-		/** Max width (any CSS length). Defaults to --content-max. */
+		/** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
 		size?: string;
 		pad?: boolean;
+		/** Break out to the full viewport width, ignoring `size`/--content-max. */
+		fullWidth?: boolean;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
@@ -26,7 +32,8 @@
 	this={as}
 	class="container ct {klass}"
 	class:pad
-	style={size ? `max-width: ${size}` : undefined}
+	class:full={fullWidth}
+	style={!fullWidth && size ? `max-width: ${size}` : undefined}
 	{...rest}
 >
 	{@render children?.()}
@@ -37,4 +44,13 @@
 		padding-top: var(--sp-6);
 		padding-bottom: var(--sp-12);
 	}
+
+	/* Break out of any centered ancestor to span the full viewport width.
+	   `margin-inline: calc(50% - 50vw)` pulls each edge out to the viewport,
+	   keeping the element in normal flow (no transform/overflow side-effects). */
+	.ct.full {
+		max-width: none;
+		width: 100vw;
+		margin-inline: calc(50% - 50vw);
+	}
 </style>

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

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     as?: 'div' | 'main' | 'section' | 'article';
-    /** Max width (any CSS length). Defaults to --content-max. */
+    /** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
     size?: string;
     pad?: boolean;
+    /** Break out to the full viewport width, ignoring `size`/--content-max. */
+    fullWidth?: boolean;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/package.json

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