@nqmcreative/ui 0.2.2 → 0.2.3

package/dist/styles/sprout/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-alt',
+		floating: 'm-3 h-[calc(100%-1.5rem)] rounded-2xl border border-hairline bg-bg-alt shadow-sm'
+	};
+
 	const row =
 		'flex w-full items-center gap-3 rounded-xl px-2.5 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-4 flex flex-col gap-0.5 border-l border-hairline pl-2">
+		{#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 text-[11px] tabular-nums">{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-alt 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-4 flex flex-col gap-0.5 border-l border-hairline pl-2">
-								{#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 text-[11px] tabular-nums">{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 text-[11px] text-text-muted tabular-nums">{item.badge}</span>

package/dist/styles/sprout/Sidebar.svelte.d.ts

@@ -1,3 +1,5 @@
+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;
@@ -5,17 +7,27 @@ export interface SidebarItem {
     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 {
     /** Small heading above a run of items. */
     label?: string;
     items: SidebarItem[];
 }
-import type { Snippet } from 'svelte';
 import { type Tone } from '../../core/tones.js';
 interface Props {
     sections: SidebarSection[];
@@ -25,6 +37,8 @@ interface Props {
     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;

package/dist/styles/sprout/fonts.css

@@ -1,6 +1,6 @@
 /*
  * Optional: the two faces sprout is designed around — Fredoka (headings) and
- * Plus Jakarta Sans (body). Import this only if your project doesn't already
+ * Work Sans (body). Import this only if your project doesn't already
  * self-host or load them another way — without it the tokens fall back to the
  * system stack, which works but loses the round, hand-drawn warmth the style is
  * built on.
@@ -14,7 +14,7 @@
  *
  * Four rules for two families: both are variable fonts, so one file per subset
  * covers every weight the style uses — 400 to 600 for Fredoka, 400 to 700 for
- * Plus Jakarta Sans. Latin and Latin Extended only, around 90 kB in total. Add
+ * Work Sans. Latin and Latin Extended only. Add
  * `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` to
  * your document head to open the connection earlier.
  */
@@ -49,15 +49,14 @@
 		U+A720-A7FF;
 }
 
-/* --- Plus Jakarta Sans --- */
+/* --- Work Sans --- */
 /* latin */
 @font-face {
-	font-family: 'Plus Jakarta Sans';
+	font-family: 'Work Sans';
 	font-style: normal;
 	font-weight: 400 700;
 	font-display: swap;
-	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2)
-		format('woff2');
+	src: url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
 	unicode-range:
 		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
 		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -65,11 +64,11 @@
 
 /* latin-ext */
 @font-face {
-	font-family: 'Plus Jakarta Sans';
+	font-family: 'Work Sans';
 	font-style: normal;
 	font-weight: 400 700;
 	font-display: swap;
-	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2)
+	src: url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2)
 		format('woff2');
 	unicode-range:
 		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,

package/dist/styles/sprout/index.d.ts

@@ -76,7 +76,7 @@ export type { StepItem } from './Steps.svelte';
 export { default as Navbar } from './Navbar.svelte';
 export type { NavItem } from './Navbar.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
-export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
+export type { SidebarVariant, SidebarItem, SidebarSection } from './Sidebar.svelte';
 export { default as Footer } from './Footer.svelte';
 export type { FooterLink, FooterColumn } from './Footer.svelte';
 export { default as HeroSection } from './HeroSection.svelte';

package/dist/styles/sprout/theme.css

@@ -102,18 +102,18 @@
 	/* --- type --- */
 	/*
 	 * Two faces, and the split is the point. Fredoka sets headings: geometric,
-	 * round-terminalled, drawn wide — the same warmth the shapes have. Plus
-	 * Jakarta Sans sets everything a reader has to get through, because Fredoka
-	 * at 15px in a paragraph is charm at the cost of the sentence.
+	 * round-terminalled, drawn wide — the same warmth the shapes have. Work
+	 * Sans sets everything a reader has to get through, because Fredoka at 15px
+	 * in a paragraph is charm at the cost of the sentence — and it is the body
+	 * face in every style, so only the headings change voice when you swap.
 	 *
 	 * Both are variable files, one request per subset — see `fonts.css`.
 	 * Everything degrades to the system stack if that file is not imported, so
 	 * the webfonts stay optional.
 	 */
-	--font-sans:
-		'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-sans: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	--font-heading:
-		'Fredoka', 'Plus Jakarta Sans', ui-rounded, ui-sans-serif, system-ui, -apple-system, sans-serif;
+		'Fredoka', 'Work Sans', ui-rounded, ui-sans-serif, system-ui, -apple-system, sans-serif;
 	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
 
 	/* --- motion --- */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nqmcreative/ui",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 65 components each, one shared behaviour core. No runtime dependencies.",
 	"scripts": {
 		"dev": "vite dev",

package/registry.json

@@ -942,7 +942,8 @@
 				"dialog",
 				"list",
 				"locale",
-				"tones"
+				"tones",
+				"trigger"
 			]
 		},
 		{