@dorsk/tsumikit 0.18.4 → 0.18.6

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/molecules/Modal.svelte

@@ -21,9 +21,9 @@
 		onclose: () => void;
 		body: Snippet;
 		footer?: Snippet;
-		/** Desktop width preset (sm 24rem / md 34rem / lg 48rem). A `resizeKey`
-		 *  drag still overrides it. */
-		size?: 'sm' | 'md' | 'lg';
+		/** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
+		 *  `resizeKey` drag still overrides it. */
+		size?: 'sm' | 'md' | 'lg' | 'xl';
 		/** When set, the sheet is horizontally resizable on desktop and the chosen
 		 *  width persists under this localStorage key. */
 		resizeKey?: string;
@@ -32,7 +32,7 @@
 	const titleId = `modal-title-${Math.random().toString(36).slice(2, 8)}`;
 
 	const MIN_W = 544; // 34rem at 16px base
-	const MAX_W = 1100;
+	const MAX_W = 1680;
 
 	function loadWidth(): number | null {
 		if (!browser || !resizeKey) return null;
@@ -109,7 +109,12 @@
 	}}
 	onclick={onDialogClick}
 >
-	<div class="sheet" class:sheet-sm={size === 'sm'} class:sheet-lg={size === 'lg'}>
+	<div
+		class="sheet"
+		class:sheet-sm={size === 'sm'}
+		class:sheet-lg={size === 'lg'}
+		class:sheet-xl={size === 'xl'}
+	>
 		<div class="sheet-head">
 			<span id={titleId} class="sheet-title truncate">{title}</span>
 			<div class="spacer"></div>
@@ -199,6 +204,9 @@
 		.sheet-lg {
 			--sw: 48rem;
 		}
+		.sheet-xl {
+			--sw: 72rem;
+		}
 	}
 	@keyframes sheet-up {
 		from {
@@ -255,18 +263,35 @@
 			touch-action: none;
 			z-index: 2;
 		}
+		/* Full-height edge line that lights up on hover, so the affordance is
+		   findable without knowing it exists. */
+		.sheet-resize::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 6px;
+			width: 2px;
+			border-radius: 999px;
+			background: transparent;
+			transition: background 0.12s var(--ease);
+		}
 		.sheet-resize::after {
 			content: '';
 			position: absolute;
 			top: 50%;
-			right: 6px;
+			right: 5px;
 			transform: translateY(-50%);
-			width: 3px;
-			height: 28px;
+			width: 4px;
+			height: 44px;
 			border-radius: 999px;
 			background: var(--border-strong);
 			transition: background 0.12s var(--ease);
 		}
+		.sheet-resize:hover::before,
+		.modal.resizing .sheet-resize::before {
+			background: color-mix(in srgb, var(--accent) 45%, transparent);
+		}
 		.sheet-resize:hover::after,
 		.modal.resizing .sheet-resize::after {
 			background: var(--accent);

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

@@ -4,9 +4,9 @@ type $$ComponentProps = {
     onclose: () => void;
     body: Snippet;
     footer?: Snippet;
-    /** Desktop width preset (sm 24rem / md 34rem / lg 48rem). A `resizeKey`
-     *  drag still overrides it. */
-    size?: 'sm' | 'md' | 'lg';
+    /** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
+     *  `resizeKey` drag still overrides it. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     /** When set, the sheet is horizontally resizable on desktop and the chosen
      *  width persists under this localStorage key. */
     resizeKey?: string;

package/package.json

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