@nqmcreative/ui 0.2.2 → 0.3.0

package/dist/styles/paper/Navbar.svelte

@@ -2,6 +2,8 @@
 	export interface NavItem {
 		label: string;
 		href?: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		/** Marks the current page — also sets `aria-current`. */
 		active?: boolean;
 		disabled?: boolean;
@@ -15,6 +17,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd } from './icon.js';
 	import { focusRing, toneRing, toneSoft, toneText, type Tone } from '../../core/tones.js';
 	import Drawer from './Drawer.svelte';
 	import Dropdown from './Dropdown.svelte';
@@ -84,6 +87,7 @@
 										? `${toneSoft[tone]}`
 										: 'text-text-secondary hover:bg-bg-inset hover:text-text'}"
 								>
+									{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 									{item.label}
 									<svg class="size-3" viewBox="0 0 16 16" fill="none" aria-hidden="true">
 										<path
@@ -96,7 +100,12 @@
 								</button>
 							{/snippet}
 							{#each item.items as child (child.label)}
-								<MenuItem href={child.href} disabled={child.disabled} selected={child.active}>
+								<MenuItem
+									href={child.href}
+									disabled={child.disabled}
+									selected={child.active}
+									icon={child.icon}
+								>
 									{child.label}
 								</MenuItem>
 							{/each}
@@ -111,6 +120,7 @@
 								? 'pointer-events-none opacity-50'
 								: ''}"
 						>
+							{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 							{item.label}
 							{#if item.badge !== undefined}
 								<span class="text-[11px] text-text-muted tabular-nums">{item.badge}</span>
@@ -163,7 +173,10 @@
 						? 'pointer-events-none opacity-50'
 						: ''}"
 				>
-					{item.label}
+					<span class="flex min-w-0 items-center gap-2.5">
+						{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
+						{item.label}
+					</span>
 					{#if item.badge !== undefined}
 						<span class="text-[11px] text-text-muted tabular-nums">{item.badge}</span>
 					{/if}
@@ -175,11 +188,12 @@
 								<a
 									href={child.href}
 									onclick={() => (menuOpen = false)}
-									class="block rounded-md px-3 py-2 font-sans text-[13px] text-text-muted hover:bg-bg-inset {toneText[
+									class="flex items-center gap-2.5 rounded-md px-3 py-2 font-sans text-[13px] text-text-muted hover:bg-bg-inset {toneText[
 										tone
 									]}"
 								>
-									{child.label}
+									{#if child.icon}<span class={iconMd}>{@render child.icon()}</span
+										>{/if}{child.label}
 								</a>
 							</li>
 						{/each}

package/dist/styles/paper/Navbar.svelte.d.ts

@@ -1,6 +1,8 @@
 export interface NavItem {
     label: string;
     href?: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     /** Marks the current page — also sets `aria-current`. */
     active?: boolean;
     disabled?: boolean;

package/dist/styles/paper/PricingCard.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneBorder, toneSoft, toneSolid, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		name: string;
@@ -12,6 +13,8 @@
 		description?: string;
 		/** One line each. Rendered with a tick. */
 		features?: string[];
+		/** Replaces the tick beside every feature. */
+		featureIcon?: Snippet;
 		/** Pill in the top corner, e.g. "Most popular". */
 		badge?: string;
 		/** Ring, lift and a tinted header — for the plan you want chosen. */
@@ -29,6 +32,7 @@
 		period,
 		description,
 		features = [],
+		featureIcon,
 		badge,
 		featured = false,
 		tone = 'brand',
@@ -77,21 +81,25 @@
 		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-6">
 			{#each features as feature (feature)}
 				<li class="flex items-start gap-3 font-sans text-sm text-text-secondary">
-					<span
-						class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full {toneSoft[
-							tone
-						]}"
-					>
-						<svg class="size-2.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-							<path
-								d="m3 8 3.2 3.2L13 4.4"
-								stroke="currentColor"
-								stroke-width="2.4"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-					</span>
+					{#if featureIcon}
+						<span class="mt-0.5 {iconMd}">{@render featureIcon()}</span>
+					{:else}
+						<span
+							class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full {toneSoft[
+								tone
+							]}"
+						>
+							<svg class="size-2.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+								<path
+									d="m3 8 3.2 3.2L13 4.4"
+									stroke="currentColor"
+									stroke-width="2.4"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</span>
+					{/if}
 					<span class="leading-snug">{feature}</span>
 				</li>
 			{/each}

package/dist/styles/paper/PricingCard.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     description?: string;
     /** One line each. Rendered with a tick. */
     features?: string[];
+    /** Replaces the tick beside every feature. */
+    featureIcon?: Snippet;
     /** Pill in the top corner, e.g. "Most popular". */
     badge?: string;
     /** Ring, lift and a tinted header — for the plan you want chosen. */

package/dist/styles/paper/RadioGroup.svelte

@@ -3,10 +3,13 @@
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Radio from './Radio.svelte';
 	import { toneBorder, toneSurface, type Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 
 	export interface RadioOption {
 		value: string;
 		label: string;
+		/** Leading icon, 20px. Drawn in `boxed` mode only. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 	}
@@ -62,6 +65,9 @@
 							: 'border-hairline bg-bg hover:border-hairline-strong'}
 							{option.disabled ? 'pointer-events-none opacity-50' : ''}"
 					>
+						{#if option.icon}
+							<span class={iconLg}>{@render option.icon()}</span>
+						{/if}
 						<Radio
 							bind:group={value}
 							value={option.value}

package/dist/styles/paper/RadioGroup.svelte.d.ts

@@ -4,6 +4,8 @@ import { type Tone } from '../../core/tones.js';
 export interface RadioOption {
     value: string;
     label: string;
+    /** Leading icon, 20px. Drawn in `boxed` mode only. */
+    icon?: Snippet;
     description?: string;
     disabled?: boolean;
 }

package/dist/styles/paper/SegmentedControl.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { focusRing, toneRing, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	export interface SegmentOption {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		disabled?: boolean;
 	}
 
@@ -20,6 +24,8 @@
 		tone?: Tone;
 		/** Spread the segments evenly across the full width. */
 		fullWidth?: boolean;
+		/** Icons only — each option's `label` becomes its accessible name. */
+		iconOnly?: boolean;
 		label?: string;
 		disabled?: boolean;
 		onchange?: (value: string) => void;
@@ -32,6 +38,7 @@
 		size = 'md',
 		tone = 'brand',
 		fullWidth = false,
+		iconOnly = false,
 		label,
 		disabled = false,
 		class: className = '',
@@ -44,6 +51,11 @@
 		md: 'h-8 px-3.5 text-sm'
 	};
 
+	const squares: Record<SegmentedSize, string> = {
+		sm: 'size-7 text-[13px]',
+		md: 'size-8 text-sm'
+	};
+
 	function select(option: SegmentOption) {
 		if (option.disabled || disabled) return;
 		value = option.value;
@@ -74,14 +86,16 @@
 			type="button"
 			role="radio"
 			aria-checked={value === option.value}
+			aria-label={iconOnly ? option.label : undefined}
 			disabled={option.disabled || disabled}
 			tabindex={value === option.value ? 0 : -1}
 			onclick={() => select(option)}
 			class="inline-flex items-center justify-center rounded-md font-sans font-medium whitespace-nowrap transition-all duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40
-				{sizes[size]} {focusRing} {toneRing[tone]}
+				{iconOnly ? squares[size] : sizes[size]} {focusRing} {toneRing[tone]}
 				{value === option.value ? 'bg-bg text-text shadow-xs' : 'text-text-muted hover:text-text'}"
 		>
-			{option.label}
+			{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
+			{#if !iconOnly}{option.label}{/if}
 		</button>
 	{/each}
 	{#if name}<input type="hidden" {name} {value} />{/if}

package/dist/styles/paper/SegmentedControl.svelte.d.ts

@@ -1,8 +1,11 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export interface SegmentOption {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     disabled?: boolean;
 }
 export type SegmentedSize = 'sm' | 'md';
@@ -16,6 +19,8 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
     tone?: Tone;
     /** Spread the segments evenly across the full width. */
     fullWidth?: boolean;
+    /** Icons only — each option's `label` becomes its accessible name. */
+    iconOnly?: boolean;
     label?: string;
     disabled?: boolean;
     onchange?: (value: string) => void;

package/dist/styles/paper/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,8 +35,8 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd } from './icon.js';
 	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
@@ -32,6 +47,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 +61,7 @@
 		value = $bindable(''),
 		collapsed = $bindable(false),
 		collapsible = true,
+		variant = 'filled',
 		tone = 'brand',
 		header,
 		footer,
@@ -59,7 +77,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 +90,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-lg border border-hairline bg-bg-alt shadow-sm'
+	};
+
 	const row =
 		'flex w-full items-center gap-3 rounded-md 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={iconMd}>{@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 +153,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 +193,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 +201,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/paper/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/paper/Stat.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneText, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	export type StatTrend = 'up' | 'down' | 'flat';
 
@@ -11,6 +13,8 @@
 		delta?: string;
 		trend?: StatTrend;
 		hint?: string;
+		/** Leading icon on the label row. */
+		icon?: Snippet;
 		/** Colour of the value itself. Leave unset for plain `text`. */
 		tone?: Tone;
 	}
@@ -21,6 +25,7 @@
 		delta,
 		trend = 'flat',
 		hint,
+		icon,
 		tone,
 		class: className = '',
 		...rest
@@ -31,7 +36,9 @@
 </script>
 
 <div class="flex flex-col gap-1 font-sans {className}" {...rest}>
-	<span class="text-sm font-medium text-text-muted">{label}</span>
+	<span class="flex items-center gap-2 text-sm font-medium text-text-muted"
+		>{#if icon}<span class={iconMd}>{@render icon()}</span>{/if}{label}</span
+	>
 	<div class="flex items-baseline gap-2">
 		<span
 			class="font-heading text-3xl font-semibold tracking-tight tabular-nums {tone

package/dist/styles/paper/Stat.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export type StatTrend = 'up' | 'down' | 'flat';
@@ -8,6 +9,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     delta?: string;
     trend?: StatTrend;
     hint?: string;
+    /** Leading icon on the label row. */
+    icon?: Snippet;
     /** Colour of the value itself. Leave unset for plain `text`. */
     tone?: Tone;
 }

package/dist/styles/paper/Steps.svelte

@@ -1,7 +1,11 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
 	export interface StepItem {
 		label: string;
 		description?: string;
+		/** Replaces the step number. A finished step still shows its check. */
+		icon?: Snippet;
 		/** Marks the step as failed — shown in `danger` regardless of position. */
 		error?: boolean;
 		disabled?: boolean;
@@ -10,6 +14,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { iconMd } from './icon.js';
 	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
@@ -73,6 +78,8 @@
 				stroke-linejoin="round"
 			/>
 		</svg>
+	{:else if item.icon}
+		<span class={iconMd}>{@render item.icon()}</span>
 	{:else}
 		{index + 1}
 	{/if}

package/dist/styles/paper/Steps.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 export interface StepItem {
     label: string;
     description?: string;
+    /** Replaces the step number. A finished step still shows its check. */
+    icon?: Snippet;
     /** Marks the step as failed — shown in `danger` regardless of position. */
     error?: boolean;
     disabled?: boolean;