@dorsk/tsumikit 0.18.5 → 0.18.7

package/dist/components/layouts/AppShell.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	// Application frame: sticky header, optional sidebar, main content, optional
 	// footer — all supplied as snippets. Responsive by default:
-	//   • desktop (≥ 48rem): the sidebar is a persistent grid column.
+	//   • desktop (≥ 64rem): the sidebar is a persistent grid column.
+	//   • tablet (48–64rem): the column narrows to an icon rail
+	//     (--shell-rail-w, default 4.5rem); the `sidebar` container query lets
+	//     nav content collapse to icons.
 	//   • mobile: the sidebar becomes an off-canvas drawer that slides in over a
 	//     scrim; AppShell renders the hamburger toggle for you (shown only on
 	//     mobile), locks body scroll while open, closes on Escape / scrim click,
@@ -172,7 +175,7 @@
 	.shell {
 		min-height: 100dvh;
 		display: grid;
-		grid-template-columns: 1fr;
+		grid-template-columns: minmax(0, 1fr);
 		grid-template-rows: auto 1fr auto;
 		grid-template-areas:
 			'header'
@@ -264,7 +267,7 @@
 	/* Desktop: persistent sidebar column; hide drawer chrome. */
 	@media (min-width: 48rem) {
 		.shell {
-			grid-template-columns: var(--shell-sidebar-w) 1fr;
+			grid-template-columns: var(--shell-sidebar-w) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'sidebar main'
@@ -312,4 +315,18 @@
 			background: var(--accent);
 		}
 	}
+
+	/* Tablet: the persistent column narrows to an icon rail so the content and
+	   header keep room; the `sidebar` container query collapses nav content. */
+	@media (min-width: 48rem) and (max-width: 63.999rem) {
+		.shell {
+			grid-template-columns: var(--shell-rail-w, 4.5rem) minmax(0, 1fr);
+		}
+		.shell-sidebar {
+			width: auto;
+		}
+		.shell-sidebar-resize {
+			display: none;
+		}
+	}
 </style>

package/dist/components/layouts/AutoGrid.svelte

@@ -11,7 +11,12 @@
 	// `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`
+	// show uniform fixed-width columns rather than stretching to fill. Beware:
+	// auto-fill counts tracks by a definite `max`, so column count only grows
+	// when another `max`-wide track fits — a narrow container can end up with
+	// one capped column and dead space. `fill` keeps empty tracks (auto-fill)
+	// without capping width: tracks are counted by `min`, so density rises
+	// monotonically with space and sparse rows don't stretch 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';
@@ -20,6 +25,7 @@
 		as = 'div',
 		min = '14rem',
 		max,
+		fill = false,
 		gap = 'var(--sp-4)',
 		maxCols,
 		align = 'start',
@@ -33,6 +39,10 @@
 		/** 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;
+		/** Keep empty tracks (auto-fill) without capping column width: columns are
+		 * counted by `min`, so count grows monotonically with available space and
+		 * sparse rows don't stretch to fill. Ignored when `max` is set. */
+		fill?: boolean;
 		gap?: string;
 		maxCols?: number;
 		/** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
@@ -49,7 +59,7 @@
 	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');
+	let mode = $derived(max != null || fill ? '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));
 

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

@@ -5,6 +5,10 @@ type $$ComponentProps = {
     /** 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;
+    /** Keep empty tracks (auto-fill) without capping column width: columns are
+     * counted by `min`, so count grows monotonically with available space and
+     * sparse rows don't stretch to fill. Ignored when `max` is set. */
+    fill?: boolean;
     gap?: string;
     maxCols?: number;
     /** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */

package/package.json

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