@nqmcreative/ui 0.2.1 → 0.2.3

package/README.md

@@ -1,13 +1,14 @@
 # @nqmcreative/ui
 
-Svelte 5 (runes) + Tailwind CSS v4 component library. One package, **two
+Svelte 5 (runes) + Tailwind CSS v4 component library. One package, **three
 styles**, 65 components each — the same props, the same behaviour, a different
 look. Eight tones, light and dark, no runtime dependencies.
 
-| style   | import                  | character                                                                                                                      |
-| ------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `matte` | `@nqmcreative/ui/matte` | Flat and sharp-cornered — no radius, no shadow, no gloss. Hairline rules and mono micro-labels do the work borders usually do. |
-| `paper` | `@nqmcreative/ui/paper` | The neutral one. Start here if unsure: soft corners, light shadows, generous spacing, and nothing that fights the content.     |
+| style    | import                   | character                                                                                                                      |
+| -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
+| `matte`  | `@nqmcreative/ui/matte`  | Flat and sharp-cornered — no radius, no shadow, no gloss. Hairline rules and mono micro-labels do the work borders usually do. |
+| `paper`  | `@nqmcreative/ui/paper`  | The neutral one. Start here if unsure: soft corners, light shadows, generous spacing, and nothing that fights the content.     |
+| `sprout` | `@nqmcreative/ui/sprout` | Warm and fully rounded — leaf green on cream, pill buttons, and a round display face. For school, community and family sites.  |
 
 The docs site lives in this repo — every component with a live demo, plus
 theming, locale and contributing guides. `bun run dev` to read it.
@@ -132,6 +133,7 @@ Under SSR use `<LocaleProvider>` instead, so the locale is scoped to a request.
 src/lib/core/            behaviour, a11y, types — no markup, no classes
 src/lib/styles/matte/    65 components
 src/lib/styles/paper/    65 components
+src/lib/styles/sprout/   65 components
 scripts/catalogue.mjs    the list every style must implement
 ```
 

package/dist/core/index.d.ts

@@ -15,7 +15,7 @@ export type { Placement, AnchorOptions } from './actions/anchor.js';
 export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
 export type { ClickOutsideOptions, FocusTrapOptions } from './actions/dismissable.js';
 export { syncDialog, isBackdropClick } from './dialog.svelte.js';
-export { popupTrigger, describeTrigger, menuItems, HOVER_GRACE } from './trigger.js';
+export { popupTrigger, describeTrigger, menuItems, isTypingTarget, HOVER_GRACE } from './trigger.js';
 export type { PopupTriggerOptions } from './trigger.js';
 export { ListCursor, groupItems, matchQuery, revealIndex } from './list.svelte.js';
 export type { ListItem } from './list.svelte.js';

package/dist/core/index.js

@@ -15,7 +15,7 @@ export { anchored } from './actions/anchor.js';
 export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
 /* --- overlays --- */
 export { syncDialog, isBackdropClick } from './dialog.svelte.js';
-export { popupTrigger, describeTrigger, menuItems, HOVER_GRACE } from './trigger.js';
+export { popupTrigger, describeTrigger, menuItems, isTypingTarget, HOVER_GRACE } from './trigger.js';
 /* --- lists --- */
 export { ListCursor, groupItems, matchQuery, revealIndex } from './list.svelte.js';
 /* --- data --- */

package/dist/core/trigger.d.ts

@@ -33,3 +33,9 @@ export declare function popupTrigger(node: HTMLElement, options: PopupTriggerOpt
 export declare function describeTrigger(wrapper: HTMLElement | null, kind: 'menu' | 'dialog' | 'listbox', open: boolean): void;
 /** The menu items a roving-focus menu should walk, in DOM order. */
 export declare function menuItems(menu: HTMLElement | null): HTMLElement[];
+/**
+ * Whether a keystroke landed in something the reader is typing into. A
+ * bare-key shortcut — `/` for search — has to stand down for those, or it
+ * eats the character instead of opening anything.
+ */
+export declare function isTypingTarget(target: EventTarget | null): boolean;

package/dist/core/trigger.js

@@ -75,3 +75,16 @@ export function describeTrigger(wrapper, kind, open) {
 export function menuItems(menu) {
     return menu ? [...menu.querySelectorAll('[role="menuitem"]:not([disabled])')] : [];
 }
+/**
+ * Whether a keystroke landed in something the reader is typing into. A
+ * bare-key shortcut — `/` for search — has to stand down for those, or it
+ * eats the character instead of opening anything.
+ */
+export function isTypingTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return (target.isContentEditable ||
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.tagName === 'SELECT');
+}

package/dist/styles/matte/Button.svelte

@@ -49,10 +49,10 @@
 		'inline-flex items-center justify-center gap-2 border font-sans font-medium whitespace-nowrap transition-all duration-150 ease-brand-out disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none';
 
 	const sizes: Record<ButtonSize, string> = {
-		sm: 'h-9 px-4 text-[13px]',
-		md: 'h-11 px-7 text-[15px]',
-		lg: 'h-12 px-8 text-base',
-		xl: 'h-14 px-10 text-base'
+		sm: 'h-8 px-3.5 text-[13px]',
+		md: 'h-10 px-5 text-[15px]',
+		lg: 'h-11 px-6 text-base',
+		xl: 'h-12 px-8 text-base'
 	};
 
 	const variantClass = $derived.by(() => {

package/dist/styles/matte/Card.svelte

@@ -50,7 +50,7 @@
 	{...rest}
 >
 	{#if header || title || eyebrow}
-		<div class="flex flex-col gap-1 {padded ? 'px-6 pt-6' : ''}">
+		<div class="flex flex-col gap-1 {padded ? 'px-5 pt-5' : ''}">
 			{#if header}
 				{@render header()}
 			{:else}
@@ -64,12 +64,12 @@
 		</div>
 	{/if}
 
-	<div class="flex-1 {padded ? (header || title || eyebrow ? 'px-6 pt-4 pb-6' : 'p-6') : ''}">
+	<div class="flex-1 {padded ? (header || title || eyebrow ? 'px-5 pt-3.5 pb-5' : 'p-5') : ''}">
 		{@render children()}
 	</div>
 
 	{#if footer}
-		<div class="border-t border-hairline {padded ? 'px-6 py-4' : ''}">
+		<div class="border-t border-hairline {padded ? 'px-5 py-3.5' : ''}">
 			{@render footer()}
 		</div>
 	{/if}

package/dist/styles/matte/Combobox.svelte

@@ -142,7 +142,7 @@
 
 <div
 	bind:this={wrapper}
-	class="relative inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-4 transition-colors duration-150 ease-brand-out
+	class="relative inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-3.5 transition-colors duration-150 ease-brand-out
 		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
 		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 >
@@ -166,7 +166,7 @@
 		}}
 		onfocus={openList}
 		onkeydown={onKeydown}
-		class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+		class="h-10 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
 	/>
 
 	{#if name}<input type="hidden" {name} {value} />{/if}

package/dist/styles/matte/CommandPalette.svelte

@@ -21,6 +21,7 @@
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
+	import { isTypingTarget } from '../../core/trigger.js';
 	import Kbd from './Kbd.svelte';
 
 	interface Props {
@@ -34,6 +35,11 @@
 		 * Pass `null` to wire your own trigger only.
 		 */
 		hotkey?: string | null;
+		/**
+		 * Key that opens the palette on its own, pressed anywhere the reader
+		 * isn't typing. Default `'/'`. Pass `null` to turn it off.
+		 */
+		quickKey?: string | null;
 		onselect?: (item: CommandItem) => void;
 		class?: string;
 	}
@@ -45,6 +51,7 @@
 		emptyText,
 		tone = 'brand',
 		hotkey = 'k',
+		quickKey = '/',
 		onselect,
 		class: className = ''
 	}: Props = $props();
@@ -82,11 +89,27 @@
 	});
 
 	$effect(() => {
-		if (!hotkey) return;
+		if (!hotkey && !quickKey) return;
 		const onKeydown = (event: KeyboardEvent) => {
-			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === hotkey.toLowerCase()) {
+			const key = event.key.toLowerCase();
+
+			if ((event.metaKey || event.ctrlKey) && key === hotkey?.toLowerCase()) {
 				event.preventDefault();
 				open = !open;
+				return;
+			}
+
+			// A bare key can only open the palette, never close it: while it is
+			// open the keystroke belongs to the query field.
+			if (
+				key === quickKey?.toLowerCase() &&
+				!event.metaKey &&
+				!event.ctrlKey &&
+				!event.altKey &&
+				!isTypingTarget(event.target)
+			) {
+				event.preventDefault();
+				open = true;
 			}
 		};
 		window.addEventListener('keydown', onKeydown);
@@ -138,7 +161,7 @@
 	class="mx-auto mt-[12vh] mb-auto w-[min(36rem,calc(100vw-2rem))] max-w-none border border-hairline bg-bg p-0 text-text backdrop:bg-text/40 {className}"
 >
 	<div use:focusTrap={{ autofocus: false }} onkeydown={onKeydown} role="none" class="flex flex-col">
-		<div class="flex items-center gap-3 border-b border-hairline px-4">
+		<div class="flex items-center gap-3 border-b border-hairline px-3.5">
 			<svg
 				class="size-4 shrink-0 text-text-muted"
 				viewBox="0 0 16 16"
@@ -156,7 +179,7 @@
 				autocomplete="off"
 				aria-label={placeholder ?? t.current.commandPlaceholder}
 				placeholder={placeholder ?? t.current.commandPlaceholder}
-				class="h-12 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+				class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
 			/>
 			<Kbd>esc</Kbd>
 		</div>
@@ -168,13 +191,15 @@
 			class="max-h-80 overflow-y-auto py-1"
 		>
 			{#if flat.length === 0}
-				<p class="px-4 py-10 text-center font-sans text-sm text-text-muted">
+				<p class="px-3.5 py-10 text-center font-sans text-sm text-text-muted">
 					{emptyText ?? t.current.noResults}
 				</p>
 			{:else}
 				{#each groups as [group, groupItems] (group)}
 					{#if group}
-						<p class="px-4 pt-3 pb-1 font-mono text-[10px] tracking-wide text-text-muted uppercase">
+						<p
+							class="px-3.5 pt-3 pb-1 font-mono text-[10px] tracking-wide text-text-muted uppercase"
+						>
 							{group}
 						</p>
 					{/if}
@@ -189,7 +214,7 @@
 							aria-disabled={item.disabled}
 							onclick={() => run(item)}
 							onpointermove={() => (cursor.index = index)}
-							class="flex cursor-pointer items-center gap-3 px-4 py-2.5 font-sans text-[14px] transition-colors duration-100
+							class="flex cursor-pointer items-center gap-3 px-3.5 py-2 font-sans text-[14px] transition-colors duration-100
 								{item.disabled ? 'pointer-events-none opacity-40' : ''}
 								{index === active ? toneSoft[tone] : 'text-text-secondary'}"
 						>

package/dist/styles/matte/CommandPalette.svelte.d.ts

@@ -24,6 +24,11 @@ interface Props {
      * Pass `null` to wire your own trigger only.
      */
     hotkey?: string | null;
+    /**
+     * Key that opens the palette on its own, pressed anywhere the reader
+     * isn't typing. Default `'/'`. Pass `null` to turn it off.
+     */
+    quickKey?: string | null;
     onselect?: (item: CommandItem) => void;
     class?: string;
 }

package/dist/styles/matte/DatePicker.svelte

@@ -94,7 +94,7 @@
 
 <div
 	bind:this={wrapper}
-	class="inline-flex w-full items-center gap-1 border bg-bg pr-1 pl-4 transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center gap-1 border bg-bg pr-1 pl-3.5 transition-colors duration-150 ease-brand-out
 		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
 		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 >
@@ -118,7 +118,7 @@
 		}}
 		onblur={commit}
 		onkeydown={onKeydown}
-		class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none"
+		class="h-10 w-full min-w-0 bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none"
 	/>
 
 	{#if name}<input type="hidden" {name} {value} />{/if}

package/dist/styles/matte/Drawer.svelte

@@ -91,7 +91,7 @@
 >
 	<div class="flex h-full flex-col">
 		{#if title || dismissible}
-			<div class="flex items-start gap-4 border-b border-hairline px-6 py-5">
+			<div class="flex items-start gap-4 border-b border-hairline px-5 py-4">
 				<div class="flex min-w-0 flex-1 flex-col gap-1">
 					{#if title}
 						<h2 class="font-heading text-lg font-medium tracking-tight">{title}</h2>
@@ -116,7 +116,7 @@
 		{/if}
 
 		<div
-			class="flex-1 overflow-y-auto px-6 py-5 font-sans text-[15px] leading-relaxed text-text-secondary"
+			class="flex-1 overflow-y-auto px-5 py-4 font-sans text-[15px] leading-relaxed text-text-secondary"
 		>
 			{@render children()}
 		</div>

package/dist/styles/matte/Dropzone.svelte

@@ -173,7 +173,7 @@
 		<ul class="flex flex-col border border-hairline">
 			{#each files as file, i (file.name + file.size + i)}
 				<li
-					class="flex items-center gap-3 border-b border-hairline px-4 py-3 font-sans last:border-b-0"
+					class="flex items-center gap-3 border-b border-hairline px-3.5 py-2.5 font-sans last:border-b-0"
 				>
 					<span class="min-w-0 flex-1 truncate text-sm text-text">{file.name}</span>
 					<span class="shrink-0 font-mono text-xs text-text-muted">{formatSize(file.size)}</span>

package/dist/styles/matte/FeatureCard.svelte

@@ -29,7 +29,7 @@
 <svelte:element
 	this={href ? 'a' : 'div'}
 	{href}
-	class="group flex flex-col gap-3 bg-bg p-6 {href
+	class="group flex flex-col gap-3 bg-bg p-5 {href
 		? `transition-colors duration-150 ease-brand-out ${focusRing} ${toneRing[tone]}`
 		: ''} {className}"
 	{...rest}

package/dist/styles/matte/Input.svelte

@@ -30,14 +30,14 @@
 	}: Props = $props();
 
 	const sizes: Record<InputSize, string> = {
-		sm: 'h-9 text-[13px]',
-		md: 'h-11 text-[15px]',
-		lg: 'h-12 text-base'
+		sm: 'h-8 text-[13px]',
+		md: 'h-10 text-[15px]',
+		lg: 'h-11 text-base'
 	};
 </script>
 
 <span
-	class="inline-flex w-full items-center gap-2 border bg-bg px-4 transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center gap-2 border bg-bg px-3.5 transition-colors duration-150 ease-brand-out
 		{sizes[size]}
 		{invalid
 		? 'border-danger focus-within:border-danger'

package/dist/styles/matte/MenuItem.svelte

@@ -37,7 +37,7 @@
 	disabled={href ? undefined : disabled}
 	aria-disabled={disabled ? 'true' : undefined}
 	tabindex={disabled ? undefined : -1}
-	class="flex w-full items-center gap-2.5 px-3 py-2 text-left text-[14px] transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
+	class="flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[14px] transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
 		{tone === 'neutral'
 		? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
 		: `${toneText[tone]} ${toneSoftHover[tone]}`}

package/dist/styles/matte/Modal.svelte

@@ -74,7 +74,7 @@
 >
 	<div class="flex flex-col">
 		{#if title || closable}
-			<div class="flex items-start gap-4 border-b border-hairline px-6 py-5">
+			<div class="flex items-start gap-4 border-b border-hairline px-5 py-4">
 				<div class="flex min-w-0 flex-1 flex-col gap-1">
 					{#if title}
 						<h2 class="font-heading text-lg font-medium tracking-tight">{title}</h2>
@@ -98,12 +98,12 @@
 			</div>
 		{/if}
 
-		<div class="px-6 py-5 font-sans text-[15px] leading-relaxed text-text-secondary">
+		<div class="px-5 py-4 font-sans text-[15px] leading-relaxed text-text-secondary">
 			{@render children()}
 		</div>
 
 		{#if footer}
-			<div class="flex items-center justify-end gap-3 border-t border-hairline px-6 py-4">
+			<div class="flex items-center justify-end gap-3 border-t border-hairline px-5 py-3.5">
 				{@render footer()}
 			</div>
 		{/if}

package/dist/styles/matte/NumberInput.svelte

@@ -51,7 +51,7 @@
 </script>
 
 <span
-	class="inline-flex w-full items-center border bg-bg pr-1 pl-4 transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center border bg-bg pr-1 pl-3.5 transition-colors duration-150 ease-brand-out
 		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
 		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 >
@@ -65,7 +65,7 @@
 		oninput={(event) => (value = clamp(event.currentTarget.valueAsNumber))}
 		onkeydown={onKeydown}
 		aria-invalid={invalid ? 'true' : undefined}
-		class="h-11 w-full min-w-0 [appearance:textfield] bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+		class="h-10 w-full min-w-0 [appearance:textfield] bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
 		{...rest}
 	/>
 	{#if unit}

package/dist/styles/matte/PasswordInput.svelte

@@ -34,7 +34,7 @@
 
 <div class="flex w-full flex-col gap-2">
 	<span
-		class="inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-4 transition-colors duration-150 ease-brand-out
+		class="inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-3.5 transition-colors duration-150 ease-brand-out
 			{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
 			{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 	>
@@ -43,7 +43,7 @@
 			{disabled}
 			type={visible ? 'text' : 'password'}
 			aria-invalid={invalid ? 'true' : undefined}
-			class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+			class="h-10 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
 			{...rest}
 		/>
 		<button

package/dist/styles/matte/PricingCard.svelte

@@ -45,7 +45,7 @@
 		: 'border border-hairline'} {className}"
 	{...rest}
 >
-	<div class="flex flex-col gap-4 p-6 {featured ? toneSoft[tone] : ''}">
+	<div class="flex flex-col gap-4 p-5 {featured ? toneSoft[tone] : ''}">
 		<div class="flex items-start justify-between gap-3">
 			<h3 class="font-heading text-lg font-medium tracking-tight {featured ? '' : 'text-text'}">
 				{name}
@@ -80,7 +80,7 @@
 	</div>
 
 	{#if features.length}
-		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-6">
+		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-5">
 			{#each features as feature (feature)}
 				<li class="flex items-start gap-3 font-sans text-sm text-text-secondary">
 					<svg
@@ -102,6 +102,6 @@
 	{/if}
 
 	{#if action}
-		<div class="p-6 pt-2">{@render action()}</div>
+		<div class="p-5 pt-2">{@render action()}</div>
 	{/if}
 </div>

package/dist/styles/matte/SegmentedControl.svelte

@@ -41,7 +41,7 @@
 
 	const sizes: Record<SegmentedSize, string> = {
 		sm: 'h-8 px-3 text-[13px]',
-		md: 'h-10 px-4 text-sm'
+		md: 'h-9 px-3.5 text-sm'
 	};
 
 	function select(option: SegmentOption) {

package/dist/styles/matte/Select.svelte

@@ -35,7 +35,7 @@
 	<select
 		bind:value
 		aria-invalid={invalid ? 'true' : undefined}
-		class="h-11 w-full appearance-none border bg-bg py-0 pr-10 pl-4 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-50
+		class="h-10 w-full appearance-none border bg-bg py-0 pr-10 pl-3.5 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-50
 			{invalid ? 'border-danger' : `border-hairline ${toneFocusBorder[tone]}`} {className}"
 		{...rest}
 	>

package/dist/styles/matte/Sidebar.svelte

@@ -1,4 +1,8 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export type SidebarVariant = 'plain' | 'filled' | 'floating';
+
 	export interface SidebarItem {
 		/** Stable id used for the active state. Falls back to `href`. */
 		id?: string;
@@ -6,10 +10,21 @@
 		href?: string;
 		disabled?: boolean;
 		badge?: string | number;
+		/**
+		 * Leading glyph, 16px. The one thing a collapsed rail still shows, so
+		 * an item that has to survive `collapsed` needs one.
+		 */
+		icon?: Snippet;
 		/** Nested links — the parent becomes a collapsible group. */
 		items?: SidebarItem[];
 		/** Open the group on first render. */
 		open?: boolean;
+		/**
+		 * `false` pins a group open: the parent stops being a button and the
+		 * children are always on show. For navigation a reader should not be
+		 * able to lose.
+		 */
+		collapsible?: boolean;
 	}
 
 	export interface SidebarSection {
@@ -20,7 +35,6 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
@@ -32,6 +46,8 @@
 		collapsed?: boolean;
 		/** Show the collapse button. */
 		collapsible?: boolean;
+		/** Surface treatment: bare, the framed default, or a detached card. */
+		variant?: SidebarVariant;
 		tone?: Tone;
 		header?: Snippet;
 		footer?: Snippet;
@@ -44,6 +60,7 @@
 		value = $bindable(''),
 		collapsed = $bindable(false),
 		collapsible = true,
+		variant = 'filled',
 		tone = 'brand',
 		header,
 		footer,
@@ -59,7 +76,8 @@
 	let opened = $state<Record<string, boolean>>({});
 
 	const isOpen = (item: SidebarItem) =>
-		opened[keyOf(item)] ?? (item.open || item.items!.some((child) => keyOf(child) === value));
+		item.collapsible === false ||
+		(opened[keyOf(item)] ?? (item.open || item.items!.some((child) => keyOf(child) === value)));
 
 	function toggle(item: SidebarItem) {
 		opened = { ...opened, [keyOf(item)]: !isOpen(item) };
@@ -71,13 +89,50 @@
 		onnavigate?.(item);
 	}
 
+	const surfaces: Record<SidebarVariant, string> = {
+		plain: 'h-full bg-transparent',
+		filled: 'h-full border-r border-hairline bg-bg',
+		floating: 'm-3 h-[calc(100%-1.5rem)] border border-hairline bg-bg'
+	};
+
 	const row =
 		'flex w-full items-center gap-3 px-3 py-2 text-left font-sans text-sm transition-colors duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40';
 </script>
 
+<!-- Nested links. One copy, rendered by both kinds of group. -->
+{#snippet subitems(item: SidebarItem)}
+	<div class="ml-5 flex flex-col gap-0.5 border-l border-hairline pl-1">
+		{#each item.items as child (keyOf(child))}
+			<a
+				href={child.href}
+				onclick={() => go(child)}
+				aria-current={value === keyOf(child) ? 'page' : undefined}
+				class="{row} {focusRing} {toneRing[tone]} {value === keyOf(child)
+					? `${toneSoft[tone]} font-medium`
+					: 'text-text-muted hover:bg-bg-inset hover:text-text'} {child.disabled
+					? 'pointer-events-none opacity-40'
+					: ''}"
+			>
+				{@render glyph(child)}
+				<span class="min-w-0 flex-1 truncate">{child.label}</span>
+				{#if child.badge !== undefined}
+					<span class="shrink-0 font-mono text-[11px]">{child.badge}</span>
+				{/if}
+			</a>
+		{/each}
+	</div>
+{/snippet}
+
+<!-- One box for every glyph, so rows line up whether or not an item has one. -->
+{#snippet glyph(item: SidebarItem)}
+	{#if item.icon}
+		<span class="grid size-4 shrink-0 place-items-center *:size-4">{@render item.icon()}</span>
+	{/if}
+{/snippet}
+
 <aside
-	class="flex h-full shrink-0 flex-col border-r border-hairline bg-bg transition-[width] duration-200 ease-brand-out
-		{collapsed ? 'w-16' : 'w-60'} {className}"
+	class="flex shrink-0 flex-col transition-[width] duration-200 ease-brand-out
+		{surfaces[variant]} {collapsed ? 'w-16' : 'w-60'} {className}"
 >
 	{#if header}
 		<div class="flex h-16 shrink-0 items-center gap-3 border-b border-hairline px-3">
@@ -97,16 +152,25 @@
 				{/if}
 
 				{#each section.items as item (keyOf(item))}
-					{#if item.items?.length}
+					{#if item.items?.length && item.collapsible === false}
+						<div class="{row} {collapsed ? 'justify-center' : ''} font-medium text-text-muted">
+							{@render glyph(item)}
+							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
+						</div>
+						{#if isOpen(item) && !collapsed}
+							{@render subitems(item)}
+						{/if}
+					{:else if item.items?.length}
 						<button
 							type="button"
 							onclick={() => toggle(item)}
 							aria-expanded={isOpen(item)}
 							title={collapsed ? item.label : undefined}
-							class="{row} {focusRing} {toneRing[
+							class="{row} {collapsed ? 'justify-center' : ''} {focusRing} {toneRing[
 								tone
 							]} text-text-secondary hover:bg-bg-inset hover:text-text"
 						>
+							{@render glyph(item)}
 							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
 							{#if !collapsed}
 								<svg
@@ -128,25 +192,7 @@
 						</button>
 
 						{#if isOpen(item) && !collapsed}
-							<div class="ml-5 flex flex-col gap-0.5 border-l border-hairline pl-1">
-								{#each item.items as child (keyOf(child))}
-									<a
-										href={child.href}
-										onclick={() => go(child)}
-										aria-current={value === keyOf(child) ? 'page' : undefined}
-										class="{row} {focusRing} {toneRing[tone]} {value === keyOf(child)
-											? `${toneSoft[tone]} font-medium`
-											: 'text-text-muted hover:bg-bg-inset hover:text-text'} {child.disabled
-											? 'pointer-events-none opacity-40'
-											: ''}"
-									>
-										<span class="min-w-0 flex-1 truncate">{child.label}</span>
-										{#if child.badge !== undefined}
-											<span class="shrink-0 font-mono text-[11px]">{child.badge}</span>
-										{/if}
-									</a>
-								{/each}
-							</div>
+							{@render subitems(item)}
 						{/if}
 					{:else}
 						<a
@@ -154,12 +200,15 @@
 							onclick={() => go(item)}
 							aria-current={value === keyOf(item) ? 'page' : undefined}
 							title={collapsed ? item.label : undefined}
-							class="{row} {focusRing} {toneRing[tone]} {value === keyOf(item)
+							class="{row} {collapsed ? 'justify-center' : ''} {focusRing} {toneRing[
+								tone
+							]} {value === keyOf(item)
 								? `${toneSoft[tone]} font-medium`
 								: 'text-text-secondary hover:bg-bg-inset hover:text-text'} {item.disabled
 								? 'pointer-events-none opacity-40'
 								: ''}"
 						>
+							{@render glyph(item)}
 							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
 							{#if item.badge !== undefined && !collapsed}
 								<span class="shrink-0 font-mono text-[11px] text-text-muted">{item.badge}</span>