@nqmcreative/ui 0.4.2 → 0.4.4

package/cli/index.mjs

@@ -389,9 +389,11 @@ async function init() {
 		`@import '@nqmcreative/ui/${style.name}/theme.css';`,
 		...(style.fonts ? [`@import '@nqmcreative/ui/${style.name}/fonts.css';`] : []),
 		``,
-		`/* Tailwind v4 skips node_modules — point it at this style's folder so`,
-		`   the class names used inside its components are generated. */`,
-		`@source '${source}/styles/${style.name}';`
+		`/* Tailwind v4 skips node_modules — point it at this style's folder and`,
+		`   the shared core, so the class names used inside the components (tone`,
+		`   colours and the like live in core) are generated. */`,
+		`@source '${source}/styles/${style.name}';`,
+		`@source '${source}/core';`
 	];
 
 	const css = await readOr(project.css);

package/dist/styles/matte/Button.svelte

@@ -63,7 +63,10 @@
 	}: Props = $props();
 
 	const base =
-		'inline-flex items-center justify-center gap-2 border font-sans font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,gap] duration-150 ease-brand-out disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none';
+		// The press: matte can't sink or scale, so a click reads as the whole
+		// button dimming a notch (brightness, not a shadow or a transform).
+		// Snaps in at 75ms, settles back over the base 150ms on release.
+		'inline-flex items-center justify-center gap-2 border font-sans font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,gap,filter] duration-150 ease-brand-out active:brightness-90 active:duration-75 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none';
 
 	const sizes: Record<ButtonSize, string> = {
 		sm: 'h-8 px-3.5 text-[13px]',

package/dist/styles/matte/Combobox.svelte

@@ -214,7 +214,7 @@
 		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
 		id="{id ?? 'combobox'}-listbox"
 		role="listbox"
-		class="z-50 max-h-64 overflow-y-auto border border-hairline bg-bg py-1 font-sans"
+		class="z-50 max-h-64 animate-reveal overflow-y-auto border border-hairline bg-bg py-1 font-sans"
 	>
 		{#if flat.length === 0}
 			<p class="px-3 py-6 text-center text-sm text-text-muted">

package/dist/styles/matte/CommandPalette.svelte

@@ -160,7 +160,7 @@
 	onclick={(event) => {
 		if (event.target === dialog) open = false;
 	}}
-	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}"
+	class="mx-auto mt-[12vh] mb-auto w-[min(36rem,calc(100vw-2rem))] max-w-none animate-enter 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-3.5">

package/dist/styles/matte/ContextMenu.svelte

@@ -78,7 +78,7 @@
 		role="menu"
 		aria-label={label ?? 'Menu'}
 		tabindex="-1"
-		class="z-50 flex max-h-[min(24rem,80vh)] min-w-44 flex-col overflow-y-auto border border-hairline bg-bg py-1 font-sans {menuClass}"
+		class="z-50 flex max-h-[min(24rem,80vh)] min-w-44 animate-reveal flex-col overflow-y-auto border border-hairline bg-bg py-1 font-sans {menuClass}"
 	>
 		{@render menu()}
 	</div>

package/dist/styles/matte/DatePicker.svelte

@@ -169,7 +169,7 @@
 		use:anchored={{ anchor: wrapper, placement: 'bottom-start', offset: 4 }}
 		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
 		id="{id ?? 'datepicker'}-calendar"
-		class="z-50 border border-hairline bg-bg"
+		class="z-50 animate-reveal border border-hairline bg-bg"
 	>
 		<Calendar
 			bind:value

package/dist/styles/matte/Dropdown.svelte

@@ -84,7 +84,7 @@
 		role="menu"
 		aria-label={label ?? 'Menu'}
 		tabindex="-1"
-		class="z-50 flex max-h-[min(24rem,80vh)] min-w-44 flex-col overflow-y-auto border border-hairline bg-bg py-1 font-sans {className}"
+		class="z-50 flex max-h-[min(24rem,80vh)] min-w-44 animate-reveal flex-col overflow-y-auto border border-hairline bg-bg py-1 font-sans {className}"
 	>
 		{@render children()}
 	</div>

package/dist/styles/matte/Modal.svelte

@@ -73,7 +73,7 @@
 	oncancel={(event) => {
 		if (!dismissible) event.preventDefault();
 	}}
-	class="m-auto w-[calc(100%-2rem)] border border-hairline bg-bg p-0 text-text backdrop:bg-text/40 {sizes[
+	class="m-auto w-[calc(100%-2rem)] animate-enter border border-hairline bg-bg p-0 text-text backdrop:bg-text/40 {sizes[
 		size
 	]} {className}"
 	{...rest}

package/dist/styles/matte/MultiSelect.svelte

@@ -222,7 +222,7 @@
 		id="{id ?? 'multiselect'}-listbox"
 		role="listbox"
 		aria-multiselectable="true"
-		class="z-50 max-h-64 overflow-y-auto border border-hairline bg-bg py-1 font-sans"
+		class="z-50 max-h-64 animate-reveal overflow-y-auto border border-hairline bg-bg py-1 font-sans"
 	>
 		{#if flat.length === 0}
 			<p class="px-3 py-6 text-center text-sm text-text-muted">

package/dist/styles/matte/Popover.svelte

@@ -77,7 +77,7 @@
 		role="dialog"
 		aria-label={title}
 		tabindex="-1"
-		class="z-50 flex max-w-xs flex-col gap-2 border border-hairline bg-bg p-4 font-sans {className}"
+		class="z-50 flex max-w-xs animate-reveal flex-col gap-2 border border-hairline bg-bg p-4 font-sans {className}"
 	>
 		{#if title}
 			<p class="font-heading text-sm font-medium text-text">{title}</p>

package/dist/styles/matte/theme.css

@@ -78,9 +78,37 @@
 	--font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
 	--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
 
-	/* --- motion --- */
+	/* --- motion ---
+	 * matte enters by fading and revealing along an axis — never by moving or
+	 * scaling (the style's first law). One token per overlay kind: `enter` for
+	 * dialog panels + backdrops, `reveal` for anchored menus and popovers.
+	 * paper and sprout define these same two names their own way, so an
+	 * overlay's markup never changes between styles — only these values do.
+	 */
 	--ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
 	--ease-brand-out: cubic-bezier(0.25, 1, 0.5, 1);
+	--animate-enter: nqm-fade 150ms var(--ease-brand-out);
+	--animate-reveal: nqm-shutter 160ms var(--ease-brand-out);
+}
+
+/* Enter-only, matching the Drawer: the native <dialog> and the {#if}-mounted
+ * popover each play these once on mount and leave instantly. */
+@keyframes nqm-fade {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes nqm-shutter {
+	from {
+		opacity: 0;
+		clip-path: inset(0 0 100% 0);
+	}
+	to {
+		opacity: 1;
+		/* Both ends must be inset() — animating to `none` (the default) can't
+		 * interpolate and the panel would snap open at the midpoint instead. */
+		clip-path: inset(0 0 0 0);
+	}
 }
 
 /*
@@ -218,6 +246,20 @@
  * a wash — the text underneath keeps its own colour and its own contrast.
  */
 @layer base {
+	/* The one overlay surface a class can't reach: every <dialog> backdrop
+	 * fades with its panel. */
+	dialog::backdrop {
+		animation: nqm-fade 150ms var(--ease-brand-out);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.animate-enter,
+		.animate-reveal,
+		dialog::backdrop {
+			animation: none;
+		}
+	}
+
 	::selection {
 		background-color: color-mix(in oklab, var(--color-brand) 24%, transparent);
 	}

package/dist/styles/paper/AccordionItem.svelte

@@ -4,7 +4,7 @@
 	import { toneText, type Tone } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 
-	interface Props extends HTMLAttributes<HTMLDetailsElement> {
+	interface Props extends HTMLAttributes<HTMLDivElement> {
 		title: string;
 		open?: boolean;
 		tone?: Tone;
@@ -25,27 +25,54 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	const uid = $props.id();
 </script>
 
-<details bind:open class="group border-b border-hairline last:border-b-0 {className}" {...rest}>
-	<summary
-		class="flex cursor-pointer list-none items-center gap-4 px-4 py-3.5 font-sans text-sm font-medium text-text transition-colors duration-150 ease-brand-out select-none hover:bg-bg-alt focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-current [&::-webkit-details-marker]:hidden"
+<!--
+	A disclosure, not a native <details>: the panel is a grid whose single row
+	animates from 0fr to 1fr, which is the one height animation that works in
+	every browser (auto-height keyframes don't interpolate). The <button> keeps
+	the keyboard and focus behaviour <summary> gave us for free; aria-expanded
+	and the region wiring replace what the open attribute carried.
+-->
+<div class="border-b border-hairline last:border-b-0 {className}" {...rest}>
+	<button
+		type="button"
+		id="{uid}-trigger"
+		aria-expanded={open}
+		aria-controls="{uid}-panel"
+		onclick={() => (open = !open)}
+		class="flex w-full cursor-pointer items-center gap-4 px-4 py-3.5 text-left font-sans text-sm font-medium text-text transition-colors duration-150 ease-brand-out select-none hover:bg-bg-alt focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-current"
 	>
 		{#if icon}<span class={iconMd}>{@render icon()}</span>{/if}
 		<span class="flex-1">{title}</span>
 		{#if meta}<span class="text-[13px] font-normal text-text-muted">{meta}</span>{/if}
 		<svg
-			class="size-4 shrink-0 transition-transform duration-200 ease-brand-out group-open:rotate-180 {toneText[
-				tone
-			]}"
+			class="size-4 shrink-0 transition-transform duration-200 ease-brand-out {open
+				? 'rotate-180'
+				: ''} {toneText[tone]}"
 			viewBox="0 0 16 16"
 			fill="none"
 			aria-hidden="true"
 		>
 			<path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
 		</svg>
-	</summary>
-	<div class="px-4 pb-4 font-sans text-sm leading-relaxed text-text-secondary">
-		{@render children()}
+	</button>
+	<div
+		id="{uid}-panel"
+		role="region"
+		aria-labelledby="{uid}-trigger"
+		inert={!open}
+		class="grid transition-[grid-template-rows] duration-200 ease-brand-out"
+		style:grid-template-rows={open ? '1fr' : '0fr'}
+	>
+		<!-- overflow-hidden gives this grid row a min height of 0 so 0fr can
+			 collapse it fully, and clips the content while it slides. -->
+		<div class="overflow-hidden">
+			<div class="px-4 pb-4 font-sans text-sm leading-relaxed text-text-secondary">
+				{@render children()}
+			</div>
+		</div>
 	</div>
-</details>
+</div>

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
-interface Props extends HTMLAttributes<HTMLDetailsElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
     open?: boolean;
     tone?: Tone;

package/dist/styles/paper/Button.svelte

@@ -63,7 +63,10 @@
 	}: Props = $props();
 
 	const base =
-		'inline-flex items-center justify-center gap-2 rounded-md border font-sans font-medium whitespace-nowrap transition-colors duration-150 ease-brand-out disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none';
+		// The press: shadow is paper's language, so a click flattens the button
+		// onto the page (shadow drops) and dims it a notch. Snaps in at 75ms,
+		// settles back over the base 150ms on release.
+		'inline-flex items-center justify-center gap-2 rounded-md border font-sans font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,filter] duration-150 ease-brand-out active:shadow-none active:brightness-95 active:duration-75 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none';
 
 	const sizes: Record<ButtonSize, string> = {
 		sm: 'h-8 px-3 text-[13px]',

package/dist/styles/paper/Combobox.svelte

@@ -219,7 +219,7 @@
 		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
 		id="{id ?? 'combobox'}-listbox"
 		role="listbox"
-		class="z-50 max-h-64 overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
+		class="z-50 max-h-64 animate-reveal overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
 	>
 		{#if flat.length === 0}
 			<p class="px-3 py-6 text-center text-sm text-text-muted">

package/dist/styles/paper/CommandPalette.svelte

@@ -160,7 +160,7 @@
 	onclick={(event) => {
 		if (event.target === dialog) open = false;
 	}}
-	class="mx-auto mt-[12vh] mb-auto w-[min(36rem,calc(100vw-2rem))] max-w-none rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {className}"
+	class="mx-auto mt-[12vh] mb-auto w-[min(36rem,calc(100vw-2rem))] max-w-none animate-enter rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {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">

package/dist/styles/paper/ContextMenu.svelte

@@ -78,7 +78,7 @@
 		role="menu"
 		aria-label={label ?? 'Menu'}
 		tabindex="-1"
-		class="z-50 flex max-h-[min(24rem,80vh)] min-w-48 flex-col overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg {menuClass}"
+		class="z-50 flex max-h-[min(24rem,80vh)] min-w-48 animate-reveal flex-col overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg {menuClass}"
 	>
 		{@render menu()}
 	</div>

package/dist/styles/paper/DatePicker.svelte

@@ -179,7 +179,7 @@
 		use:anchored={{ anchor: wrapper, placement: 'bottom-start', offset: 4 }}
 		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
 		id="{id ?? 'datepicker'}-calendar"
-		class="z-50 rounded-lg border border-hairline bg-bg shadow-lg"
+		class="z-50 animate-reveal rounded-lg border border-hairline bg-bg shadow-lg"
 	>
 		<Calendar
 			bind:value

package/dist/styles/paper/Dropdown.svelte

@@ -84,7 +84,7 @@
 		role="menu"
 		aria-label={label ?? 'Menu'}
 		tabindex="-1"
-		class="z-50 flex max-h-[min(24rem,80vh)] min-w-48 flex-col overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg {className}"
+		class="z-50 flex max-h-[min(24rem,80vh)] min-w-48 animate-reveal flex-col overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg {className}"
 	>
 		{@render children()}
 	</div>

package/dist/styles/paper/Modal.svelte

@@ -73,7 +73,7 @@
 	oncancel={(event) => {
 		if (!dismissible) event.preventDefault();
 	}}
-	class="m-auto w-[calc(100%-2rem)] rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {sizes[
+	class="m-auto w-[calc(100%-2rem)] animate-enter rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {sizes[
 		size
 	]} {className}"
 	{...rest}

package/dist/styles/paper/MultiSelect.svelte

@@ -232,7 +232,7 @@
 		id="{id ?? 'multiselect'}-listbox"
 		role="listbox"
 		aria-multiselectable="true"
-		class="z-50 max-h-64 overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
+		class="z-50 max-h-64 animate-reveal overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
 	>
 		{#if flat.length === 0}
 			<p class="px-3 py-6 text-center text-sm text-text-muted">

package/dist/styles/paper/Popover.svelte

@@ -77,7 +77,7 @@
 		role="dialog"
 		aria-label={title}
 		tabindex="-1"
-		class="z-50 flex max-w-xs flex-col gap-2 rounded-lg border border-hairline bg-bg p-4 font-sans shadow-lg {className}"
+		class="z-50 flex max-w-xs animate-reveal flex-col gap-2 rounded-lg border border-hairline bg-bg p-4 font-sans shadow-lg {className}"
 	>
 		{#if title}
 			<p class="font-heading text-sm font-semibold text-text">{title}</p>

package/dist/styles/paper/theme.css

@@ -29,10 +29,10 @@
 	--color-text-inverse: #ffffff;
 
 	/* --- brand / primary (indigo) --- */
-	--color-brand: #4f46e5;
-	--color-brand-hover: #4338ca;
-	--color-brand-light: #eef2ff;
-	--color-brand-border: #c7d2fe;
+	--color-brand: #15803d;
+	--color-brand-hover: #166534;
+	--color-brand-light: #e8f6ee;
+	--color-brand-border: #a7d9b9;
 
 	/* --- accent (rose) --- */
 	--color-accent: #e11d48;
@@ -95,9 +95,46 @@
 		'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
 
-	/* --- motion --- */
+	/* --- motion ---
+	 * paper enters by rising and fading — depth is its language, so overlays
+	 * settle onto the page rather than snapping or scaling in. One token per
+	 * overlay kind: `enter` for dialog panels + backdrops, `reveal` for anchored
+	 * menus and popovers. matte and sprout define these same two names their own
+	 * way, so an overlay's markup never changes between styles — only the values.
+	 */
 	--ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
 	--ease-brand-out: cubic-bezier(0, 0, 0.2, 1);
+	--animate-enter: nqm-rise 200ms var(--ease-brand-out);
+	--animate-reveal: nqm-drop 180ms var(--ease-brand-out);
+}
+
+/* Enter-only, matching the Drawer: the native <dialog> and the {#if}-mounted
+ * popover each play these once on mount and leave instantly. */
+@keyframes nqm-fade {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes nqm-rise {
+	from {
+		opacity: 0;
+		/* dialogs rise and grow a hair — a gentle zoom onto the page */
+		transform: translateY(8px) scale(0.98);
+		/* one layer, matching the panel's shadow-2xl, so box-shadow interpolates
+		 * to the resting shadow instead of snapping (a mismatched layer count is
+		 * discrete). The shadow deepens as the panel settles. */
+		box-shadow: 0 8px 20px -12px rgb(0 0 0 / 0.18);
+	}
+}
+@keyframes nqm-drop {
+	from {
+		opacity: 0;
+		transform: translateY(-6px);
+		/* two layers, matching the menus' shadow-lg — same reason as above */
+		box-shadow:
+			0 2px 6px -3px rgb(0 0 0 / 0.08),
+			0 1px 3px -2px rgb(0 0 0 / 0.06);
+	}
 }
 
 /*
@@ -126,10 +163,10 @@
 	--color-text-muted: #9ca3af;
 	--color-text-inverse: #0b0f19;
 
-	--color-brand: #818cf8;
-	--color-brand-hover: #a5b4fc;
-	--color-brand-light: #1e1b4b;
-	--color-brand-border: #3730a3;
+	--color-brand: #46a06a;
+	--color-brand-hover: #5cb47e;
+	--color-brand-light: #12281b;
+	--color-brand-border: #255034;
 
 	--color-accent: #fb7185;
 	--color-accent-hover: #fda4af;
@@ -182,10 +219,10 @@
 		--color-text-muted: #9ca3af;
 		--color-text-inverse: #0b0f19;
 
-		--color-brand: #818cf8;
-		--color-brand-hover: #a5b4fc;
-		--color-brand-light: #1e1b4b;
-		--color-brand-border: #3730a3;
+		--color-brand: #46a06a;
+		--color-brand-hover: #5cb47e;
+		--color-brand-light: #12281b;
+		--color-brand-border: #255034;
 
 		--color-accent: #fb7185;
 		--color-accent-hover: #fda4af;
@@ -234,6 +271,20 @@
  * a wash — the text underneath keeps its own colour and its own contrast.
  */
 @layer base {
+	/* The one overlay surface a class can't reach: every <dialog> backdrop
+	 * fades with its panel. */
+	dialog::backdrop {
+		animation: nqm-fade 180ms var(--ease-brand-out);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.animate-enter,
+		.animate-reveal,
+		dialog::backdrop {
+			animation: none;
+		}
+	}
+
 	::selection {
 		background-color: color-mix(in oklab, var(--color-brand) 24%, transparent);
 	}

package/dist/styles/sprout/theme.css

@@ -129,6 +129,24 @@
 	 */
 	--ease-brand: cubic-bezier(0.34, 1.4, 0.64, 1);
 	--ease-brand-out: cubic-bezier(0.22, 1, 0.36, 1);
+	/* Overlay entrances — sprout pops in with a little overshoot, on the same
+	 * `enter`/`reveal` token names matte and paper use. Declared here so the
+	 * three styles stay in token-name parity; sprout's overlay components adopt
+	 * them in a later pass. */
+	--animate-enter: nqm-pop 240ms var(--ease-brand);
+	--animate-reveal: nqm-pop 220ms var(--ease-brand);
+}
+
+@keyframes nqm-fade {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes nqm-pop {
+	from {
+		opacity: 0;
+		transform: scale(0.96);
+	}
 }
 
 /*

package/package.json

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