@dorsk/tsumikit 0.41.0 → 0.42.0

package/README.md

@@ -211,7 +211,9 @@ their own `breakpoint`, so `selected` can be driven from the URL), Container, St
 (vertical), Cluster (wrapping row; `stackAt="xs|sm|md|lg"` makes it its own
 query container and stacks children full-width below 18/30/40/48rem — phone
 action rows without a viewport query), AutoGrid (intrinsically responsive
-columns — no media/container query needed).
+columns — no media/container query needed; a child marked
+`data-span="2|3|4|full"` claims that many tracks, so a primary action can sit
+at 2 of 4 columns and take the whole row once the columns halve).
 
 ### Container
 
@@ -296,7 +298,9 @@ and drive `showModal()`/`close()` from state (closing writes `open = false`).
 `tone="danger" | "warn" | "info"` adds a title glyph and a 3px top border;
 `busy` makes the body inert, shows a spinner by the title and disables Escape,
 backdrop and the close button. The `footer` snippet is a right-aligned flex row
-(`justify-content: flex-end; gap: var(--sp-2)`).
+(`justify-content: flex-end; gap: var(--sp-2)`); `footerFill` stretches its
+children instead, for a footer that is one layout wrapper rather than a short
+row of buttons.
 
 `ConfirmModal` wraps it as a yes/no dialog: `title`, `message` (or `children`),
 `confirmLabel`/`cancelLabel`, `tone="primary" | "danger" | "warn"`, `busy`,

package/dist/components/atoms/Slider.svelte

@@ -148,6 +148,9 @@
 		appearance: none;
 		-webkit-appearance: none;
 		flex: 1;
+		/* Firefox sizes a range input's min-content at ~12em, so without this it
+		   refuses to shrink and paints over whatever shares its row. */
+		min-width: 0;
 		position: relative;
 		z-index: 1;
 		height: 1.25rem;

package/dist/components/layouts/AutoGrid.svelte

@@ -104,6 +104,24 @@
 		grid-template-columns: repeat(var(--ag-mode), minmax(min(100%, var(--ag-min)), var(--ag-track)));
 	}
 
+	/* A child may claim several tracks (`data-span="2"`, `data-span="full"`) —
+	   the grid counterpart to Cluster's `data-grow`. Handy for an action row
+	   whose primary sits at 2/4 of a wide grid and takes the whole row once the
+	   columns halve. A numeric span wider than the current column count would
+	   add an implicit track, so pick one no larger than `maxCols`. */
+	.autogrid-c > :global([data-span='2']) {
+		grid-column: span 2;
+	}
+	.autogrid-c > :global([data-span='3']) {
+		grid-column: span 3;
+	}
+	.autogrid-c > :global([data-span='4']) {
+		grid-column: span 4;
+	}
+	.autogrid-c > :global([data-span='full']) {
+		grid-column: 1 / -1;
+	}
+
 	/* 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

package/dist/components/molecules/Modal.svelte

@@ -27,6 +27,7 @@
 		onclose,
 		body,
 		footer,
+		footerFill = false,
 		size = 'md',
 		tone = 'neutral',
 		busy = false,
@@ -44,6 +45,10 @@
 		onclose?: () => void;
 		body: Snippet;
 		footer?: Snippet;
+		/** Let the footer's content own the full width instead of hugging the
+		 *  right edge — for a footer that is one layout wrapper (an AutoGrid of
+		 *  actions, say) rather than a short row of buttons. */
+		footerFill?: boolean;
 		/** Title glyph + 3px top border in the semantic colour. */
 		tone?: Tone;
 		/** Work in flight: body is inert, a spinner sits by the title and Escape,
@@ -185,7 +190,7 @@
 			{@render body()}
 		</div>
 		{#if footer}
-			<div class="sheet-foot">{@render footer()}</div>
+			<div class="sheet-foot" class:foot-fill={footerFill}>{@render footer()}</div>
 		{/if}
 		{#if resizeKey}
 			<div
@@ -319,6 +324,12 @@
 		padding: var(--sp-4);
 		border-top: 1px solid var(--border);
 	}
+	/* Opt-in: a flex item is shrink-to-fit, so a layout wrapper handed to the
+	   footer would size to its content and hug the right edge instead of
+	   spanning the sheet. */
+	.sheet-foot.foot-fill > :global(*) {
+		flex: 1;
+	}
 
 	.sheet-resize {
 		display: none;

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

@@ -9,6 +9,10 @@ type $$ComponentProps = {
     onclose?: () => void;
     body: Snippet;
     footer?: Snippet;
+    /** Let the footer's content own the full width instead of hugging the
+     *  right edge — for a footer that is one layout wrapper (an AutoGrid of
+     *  actions, say) rather than a short row of buttons. */
+    footerFill?: boolean;
     /** Title glyph + 3px top border in the semantic colour. */
     tone?: Tone;
     /** Work in flight: body is inert, a spinner sits by the title and Escape,

package/package.json

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