@dorsk/tsumikit 0.82.0 → 0.82.1

package/dist/components/layouts/AppShell.svelte

@@ -57,8 +57,9 @@
 		/** `'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. */
+		/** Pin the desktop sidebar to the viewport (own scroll) so its footer
+		 *  stays visible on long pages. Sits below the header in `header-top`,
+		 *  spans the full viewport height in `sidebar-full`. */
 		stickySidebar?: boolean;
 		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
 		sidebarPadding?: 'none' | 'sm' | 'md';
@@ -414,9 +415,13 @@
 		}
 		.shell.sticky-sidebar .shell-sidebar {
 			position: sticky;
+			top: var(--shell-header-h);
+			height: calc(100dvh - var(--shell-header-h));
+			align-self: start;
+		}
+		.shell.sticky-sidebar.sidebar-full .shell-sidebar {
 			top: 0;
 			height: 100dvh;
-			align-self: start;
 		}
 		.shell-scrim,
 		.shell-menu-btn {

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

@@ -18,8 +18,9 @@ type $$ComponentProps = {
     /** `'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. */
+    /** Pin the desktop sidebar to the viewport (own scroll) so its footer
+     *  stays visible on long pages. Sits below the header in `header-top`,
+     *  spans the full viewport height in `sidebar-full`. */
     stickySidebar?: boolean;
     /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
     sidebarPadding?: 'none' | 'sm' | 'md';

package/dist/components/molecules/Modal.svelte

@@ -231,12 +231,15 @@
 
 <style>
 	/* Reset the UA dialog box: we own the surface via the inner .sheet. The
-	   dialog itself is just the centering/backdrop layer. */
+	   dialog itself is just the centering/backdrop layer. It must never scroll:
+	   the UA `overflow: auto` lets the initial focus scroll the sheet into view
+	   while it still sits at `translate: 0 100%`, which eats the slide-in. */
 	.modal {
 		margin: 0;
 		padding: 0;
 		border: 0;
 		background: none;
+		overflow: clip;
 		max-width: 100vw;
 		max-height: 100dvh;
 		width: 100%;

package/dist/components/molecules/RichSelect.svelte

@@ -83,6 +83,7 @@
 
 	const uid = Math.random().toString(36).slice(2, 8);
 	const listId = `rs-list-${uid}`;
+	const nameId = `rs-name-${uid}`;
 	const optionId = (i: number) => `rs-opt-${uid}-${i}`;
 
 	let root = $state<HTMLDivElement | null>(null);
@@ -96,6 +97,7 @@
 
 	const selectedIndex = $derived(options.findIndex((o) => getKey(o) === value));
 	const selectedOption = $derived(selectedIndex >= 0 ? options[selectedIndex] : undefined);
+	const triggerName = $derived(selectedOption === undefined ? label : `${label}, ${getLabel(selectedOption)}`);
 	const typeahead = createTypeahead();
 
 	const triggerEl = () => root?.querySelector<HTMLElement>('.rs-trigger') ?? null;
@@ -150,6 +152,7 @@
 		if (key !== value) {
 			value = key;
 			onchange?.(key, next);
+			if (!closeAfter) announcement = getLabel(next);
 			playSound(closeAfter ? 'click' : 'tick', sound);
 		}
 		if (closeAfter) {
@@ -354,6 +357,7 @@
 		onopen={onOpen}
 		onclose={onClose}
 		aria-controls={listId}
+		aria-labelledby={nameId}
 		aria-activedescendant={open && active >= 0 ? optionId(active) : undefined}
 	>
 		{#snippet trigger()}
@@ -407,6 +411,7 @@
 			<div class="rs-footer">{@render footer({ close })}</div>
 		{/if}
 	</Popover>
+	<span class="sr-only" id={nameId}>{triggerName}</span>
 	<span class="sr-only" aria-live="polite">{announcement}</span>
 </div>
 
@@ -487,8 +492,10 @@
 	.rich-select.is-open .rs-chevron {
 		rotate: 180deg;
 	}
-	.rich-select :global(.pop-panel.rs-panel) {
+	.rich-select :global(.pop-panel.rs-panel:popover-open) {
 		display: flex;
+	}
+	.rich-select :global(.pop-panel.rs-panel) {
 		flex-direction: column;
 		gap: var(--sp-1);
 		box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.82.0",
+  "version": "0.82.1",
   "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",
@@ -72,7 +72,8 @@
     "design": "npm run package && npm run design:bundle && npm run design:verify",
     "design:bundle": "node .design-sync/build-bundle.mjs",
     "design:verify": "node .design-sync/verify-bundle.mjs",
-    "design:clean": "rm -rf ds-bundle .ds-proto"
+    "design:clean": "rm -rf ds-bundle .ds-proto",
+    "demo:props": "node scripts/gen-demo-props.mjs"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"