@dorsk/tsumikit 0.21.0 → 0.22.0

package/README.md

@@ -83,11 +83,26 @@ Dropzone, CodeBlock, Callout, EmptyState, Toaster, ThemePicker, FontScalePicker.
 **Organisms:** DataTable (generic `<T>`, typed columns + cell snippets).
 
 **Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
-sidebar on desktop, overlay drawer on mobile, optionally resizable), NavItem
+sidebar on desktop, overlay drawer on mobile, optionally resizable;
+`layout="sidebar-full"` runs the sidebar the full height with the header over
+the content column only, `stickySidebar` pins it to the viewport, and
+`sidebarPadding="none" | "sm" | "md"` sets the aside gutter — the header and its
+children are `min-width: 0` so a wide title/actions row can't widen the grid on
+mobile), NavItem
 (collapses to an icon rail when the sidebar is narrow), Container, Stack
 (vertical), Cluster (wrapping row), AutoGrid (intrinsically responsive columns —
 no media/container query needed).
 
+### Container
+
+`size` caps the column (`--content-max` by default; `size="none"` fills the parent),
+`gutter` overrides the `--sp-4` inline padding (safe-area insets still win),
+`align="start"` drops the centering. `fullWidth` is a *viewport* breakout for
+edge-to-edge sections — inside AppShell's main column use `size="none"` instead;
+`inset="<left> <right>"` keeps a `fullWidth` container clear of docked panels.
+Children can bleed to the column edge with
+`margin-inline: calc(-1 * var(--container-gutter))`.
+
 ### Stacked distribution + legend
 
 `SegmentedProgress mode="stacked"` turns the bar into one shared track whose slice

package/dist/components/layouts/AppShell.svelte

@@ -24,7 +24,10 @@
 		resizableSidebar = false,
 		minSidebar = 64,
 		maxSidebar = 360,
-		sidebarWidthKey
+		sidebarWidthKey,
+		layout = 'header-top',
+		stickySidebar = false,
+		sidebarPadding = 'md'
 	}: {
 		header?: Snippet;
 		sidebar?: Snippet;
@@ -41,6 +44,14 @@
 		maxSidebar?: number;
 		/** localStorage key to persist the resized width. */
 		sidebarWidthKey?: string;
+		/** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
+		 *  and the header only covers the content column (brand sits top-left). */
+		layout?: 'header-top' | 'sidebar-full';
+		/** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
+		 *  footer stays visible on long pages. */
+		stickySidebar?: boolean;
+		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
+		sidebarPadding?: 'none' | 'sm' | 'md';
 	} = $props();
 
 	let open = $state(false);
@@ -115,7 +126,14 @@
 
 <svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
 
-<div class="shell" class:dragging style="--shell-sidebar-w: {widthCss}" data-tsu="AppShell">
+<div
+	class="shell"
+	class:dragging
+	class:sidebar-full={layout === 'sidebar-full'}
+	class:sticky-sidebar={stickySidebar}
+	style="--shell-sidebar-w: {widthCss}"
+	data-tsu="AppShell"
+>
 	<header class="shell-header">
 		{#if sidebar}
 			<!-- Wrapper owned here so the responsive hide is a scoped rule on our own
@@ -143,6 +161,7 @@
 		<aside
 			class="shell-sidebar"
 			class:open
+			data-padding={sidebarPadding}
 			aria-label={navLabel}
 			inert={isMobile && !open ? true : undefined}
 		>
@@ -190,6 +209,7 @@
 		display: flex;
 		align-items: center;
 		gap: var(--sp-3);
+		min-width: 0;
 		height: var(--header-h);
 		padding-inline: max(var(--sp-4), var(--safe-left)) max(var(--sp-4), var(--safe-right));
 		padding-top: var(--safe-top);
@@ -197,6 +217,9 @@
 		backdrop-filter: blur(8px);
 		border-bottom: 1px solid var(--border);
 	}
+	.shell-header > :global(*) {
+		min-width: 0;
+	}
 	.shell-menu-btn {
 		display: inline-flex;
 		align-items: center;
@@ -229,15 +252,22 @@
 		-webkit-overflow-scrolling: touch;
 		background: var(--bg-elevated);
 		border-right: 1px solid var(--border);
-		padding: var(--sp-3);
-		padding-top: max(var(--sp-3), var(--safe-top));
-		padding-bottom: max(var(--sp-3), var(--safe-bottom));
+		--shell-sidebar-pad: var(--sp-3);
+		padding: var(--shell-sidebar-pad);
+		padding-top: max(var(--shell-sidebar-pad), var(--safe-top));
+		padding-bottom: max(var(--shell-sidebar-pad), var(--safe-bottom));
 		/* A query container named `sidebar` so nav items collapse to an icon rail
 		   based on the sidebar's own width (see NavItem). */
 		container: sidebar / inline-size;
 		transform: translateX(-100%);
 		transition: transform 0.2s var(--ease);
 	}
+	.shell-sidebar[data-padding='sm'] {
+		--shell-sidebar-pad: var(--sp-2);
+	}
+	.shell-sidebar[data-padding='none'] {
+		--shell-sidebar-pad: 0px;
+	}
 	.shell-sidebar.open {
 		transform: translateX(0);
 		box-shadow: var(--shadow-lg);
@@ -273,6 +303,12 @@
 				'sidebar main'
 				'footer footer';
 		}
+		.shell.sidebar-full {
+			grid-template-areas:
+				'sidebar header'
+				'sidebar main'
+				'sidebar footer';
+		}
 		.shell-sidebar {
 			position: relative; /* anchor the absolute resize handle */
 			grid-area: sidebar;
@@ -281,6 +317,12 @@
 			box-shadow: none;
 			border-right: 1px solid var(--border);
 		}
+		.shell.sticky-sidebar .shell-sidebar {
+			position: sticky;
+			top: 0;
+			height: 100dvh;
+			align-self: start;
+		}
 		.shell-scrim,
 		.shell-menu-btn {
 			display: none !important;

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

@@ -15,6 +15,14 @@ type $$ComponentProps = {
     maxSidebar?: number;
     /** localStorage key to persist the resized width. */
     sidebarWidthKey?: string;
+    /** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
+     *  and the header only covers the content column (brand sits top-left). */
+    layout?: 'header-top' | 'sidebar-full';
+    /** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
+     *  footer stays visible on long pages. */
+    stickySidebar?: boolean;
+    /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
+    sidebarPadding?: 'none' | 'sm' | 'md';
 };
 declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppShell = ReturnType<typeof AppShell>;

package/dist/components/layouts/Container.svelte

@@ -1,31 +1,51 @@
 <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. `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.
+	// Max-width content column with token gutters that respect safe-area insets.
+	// Self-contained: does not depend on the global `.container` utility. Exposes
+	// `--container-gutter` so children can bleed to the column edge with
+	// `margin-inline: calc(-1 * var(--container-gutter))`.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		size,
+		gutter,
+		align = 'center',
 		pad = false,
 		fullWidth = false,
+		inset,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'div' | 'main' | 'section' | 'article';
-		/** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
-		size?: string;
+		/** Max width (any CSS length), or `'none'` to fill the parent. Defaults to --content-max. Ignored when `fullWidth`. */
+		size?: string | 'none';
+		/** Inline gutter (any CSS length). Defaults to --sp-4; safe-area insets still win when larger. */
+		gutter?: string;
+		/** `'center'` (margin-inline auto) or `'start'` (flush with the parent's start edge). */
+		align?: 'center' | 'start';
 		pad?: boolean;
-		/** Break out to the full viewport width, ignoring `size`/--content-max. */
+		/** Break out to the full *viewport* width, ignoring `size`/--content-max and any
+		 *  centered ancestor. Inside a sidebar layout prefer `size="none"` (fills the column). */
 		fullWidth?: boolean;
+		/** Space reserved at the viewport edges when `fullWidth` (`'left right'` or one value
+		 *  for both), e.g. `"var(--dock-left-w) var(--dock-right-w)"` for docked panels. */
+		inset?: string;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const style = $derived.by(() => {
+		const vars: string[] = [];
+		if (!fullWidth && size && size !== 'none') vars.push(`--ct-max: ${size}`);
+		if (gutter) vars.push(`--container-gutter: ${gutter}`);
+		if (fullWidth && inset) {
+			const [left, right = left] = inset.trim().split(/\s+/);
+			vars.push(`--ct-inset-l: ${left}`, `--ct-inset-r: ${right}`);
+		}
+		return vars.length ? vars.join('; ') : undefined;
+	});
 </script>
 
 <svelte:element
@@ -33,25 +53,46 @@
 	data-tsu="Container"
 	class="container ct {klass}"
 	class:pad
+	class:none={size === 'none'}
+	class:start={align === 'start'}
 	class:full={fullWidth}
-	style={!fullWidth && size ? `max-width: ${size}` : undefined}
+	{style}
 	{...rest}
 >
 	{@render children?.()}
 </svelte:element>
 
 <style>
+	.ct {
+		--container-gutter: var(--sp-4);
+		width: 100%;
+		max-width: var(--ct-max, var(--content-max));
+		margin-inline: auto;
+		padding-inline: max(var(--container-gutter), var(--safe-left))
+			max(var(--container-gutter), var(--safe-right));
+	}
+
+	.ct.none {
+		max-width: none;
+	}
+
+	.ct.start {
+		margin-inline: 0;
+	}
+
 	.ct.pad {
 		padding-top: var(--sp-6);
 		padding-bottom: var(--sp-12);
 	}
 
-	/* Break out of any centered ancestor to span the full viewport width.
+	/* Break out of any centered ancestor to span the viewport (minus `inset`).
 	   `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 {
+		--ct-inset-l: 0px;
+		--ct-inset-r: 0px;
 		max-width: none;
-		width: 100vw;
-		margin-inline: calc(50% - 50vw);
+		width: calc(100vw - var(--ct-inset-l) - var(--ct-inset-r));
+		margin-inline: calc(50% - 50vw + var(--ct-inset-l)) calc(50% - 50vw + var(--ct-inset-r));
 	}
 </style>

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

@@ -1,11 +1,19 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     as?: 'div' | 'main' | 'section' | 'article';
-    /** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
-    size?: string;
+    /** Max width (any CSS length), or `'none'` to fill the parent. Defaults to --content-max. Ignored when `fullWidth`. */
+    size?: string | 'none';
+    /** Inline gutter (any CSS length). Defaults to --sp-4; safe-area insets still win when larger. */
+    gutter?: string;
+    /** `'center'` (margin-inline auto) or `'start'` (flush with the parent's start edge). */
+    align?: 'center' | 'start';
     pad?: boolean;
-    /** Break out to the full viewport width, ignoring `size`/--content-max. */
+    /** Break out to the full *viewport* width, ignoring `size`/--content-max and any
+     *  centered ancestor. Inside a sidebar layout prefer `size="none"` (fills the column). */
     fullWidth?: boolean;
+    /** Space reserved at the viewport edges when `fullWidth` (`'left right'` or one value
+     *  for both), e.g. `"var(--dock-left-w) var(--dock-right-w)"` for docked panels. */
+    inset?: string;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/styles/app.css

@@ -106,9 +106,7 @@ pre {
 	width: 100%;
 	max-width: var(--content-max);
 	margin-inline: auto;
-	padding-inline: var(--sp-4);
-	padding-left: max(var(--sp-4), var(--safe-left));
-	padding-right: max(var(--sp-4), var(--safe-right));
+	padding-inline: max(var(--sp-4), var(--safe-left)) max(var(--sp-4), var(--safe-right));
 }
 .stack {
 	display: flex;

package/package.json

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