@nqmcreative/ui 0.2.2 → 0.3.0

package/dist/styles/sprout/Table.svelte

@@ -33,6 +33,16 @@
 		/** Header stays put while the body scrolls — pair with a `max-h-*` class. */
 		stickyHeader?: boolean;
 
+		/** Bar above the table — a title, a search field, a filter row. */
+		header?: Snippet;
+		/** Bar below the table — pagination, a total, a summary line. */
+		footer?: Snippet;
+		/**
+		 * Shown in place of `header` while rows are ticked, after the count and the
+		 * clear button. Passing it is what turns the bulk bar on.
+		 */
+		bulkActions?: Snippet<[{ selected: string[]; clear: () => void }]>;
+
 		/** Bindable. Set it to sort; leave `sortable` columns to drive it. */
 		sort?: TableSort | null;
 		/** Sort the rows here rather than refetching them server-side. Default true. */
@@ -58,6 +68,9 @@
 		hoverable = true,
 		compact = false,
 		stickyHeader = false,
+		header,
+		footer,
+		bulkActions,
 		sort = $bindable(null),
 		sortLocally = true,
 		onsort,
@@ -107,112 +120,155 @@
 		selected = toggleKey(selected, keyOf(row));
 		onselect?.(selected);
 	}
+
+	function clearSelection() {
+		selected = [];
+		onselect?.(selected);
+	}
+
+	/** The bulk bar takes the header's place, so only one of the two is up. */
+	const bulkBar = $derived(selectable && bulkActions !== undefined && selected.length > 0);
 </script>
 
 <div
-	class="w-full overflow-auto rounded-[20px] border border-hairline bg-bg {edge} {className}"
+	class="flex w-full flex-col overflow-hidden rounded-[20px] border border-hairline bg-bg {edge} {className}"
 	{...rest}
 >
-	<table class="w-full border-collapse font-sans text-sm">
-		{#if caption}
-			<caption
-				class="border-b border-hairline px-4 py-3 text-left font-sans text-[13px] text-text-muted"
+	{#if bulkBar}
+		<div
+			class="flex flex-wrap items-center gap-3 border-b border-hairline bg-brand-light px-4 py-3"
+		>
+			<span class="font-sans text-[13px] font-semibold text-text">
+				{selected.length}
+				{t.current.selected}
+			</span>
+			<button
+				type="button"
+				onclick={clearSelection}
+				class="rounded-full font-sans text-[13px] font-medium text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
-				{caption}
-			</caption>
-		{/if}
-		<thead class={stickyHeader ? 'sticky top-0 z-10' : ''}>
-			<tr class="border-b border-hairline bg-bg-alt">
-				{#if selectable}
-					<th scope="col" class="w-10 {pad}">
-						<Checkbox
-							checked={allSelected}
-							indeterminate={someSelected}
-							{tone}
-							aria-label={t.current.selectAllRows}
-							onchange={toggleAll}
-						/>
-					</th>
-				{/if}
-				{#each columns as column (column.key)}
-					<th
-						scope="col"
-						aria-sort={sort?.key === column.key
-							? sort.direction === 'asc'
-								? 'ascending'
-								: 'descending'
-							: undefined}
-						class="text-[13px] font-semibold text-text-muted {pad} {aligns[
-							column.align ?? 'left'
-						]} {column.class ?? ''}"
-					>
-						{#if column.sortable}
-							<button
-								type="button"
-								onclick={() => toggleSort(column)}
-								class="inline-flex items-center gap-1.5 rounded transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
+				{t.current.clear}
+			</button>
+			<div class="ml-auto flex flex-wrap items-center gap-2">
+				{@render bulkActions?.({ selected, clear: clearSelection })}
+			</div>
+		</div>
+	{:else if header}
+		<div
+			class="flex flex-wrap items-center gap-3 border-b border-hairline px-4 py-3 font-sans text-[13px] text-text-secondary"
+		>
+			{@render header()}
+		</div>
+	{/if}
+	<div class="min-h-0 w-full flex-1 overflow-auto">
+		<table class="w-full border-collapse font-sans text-sm">
+			{#if caption}
+				<caption
+					class="border-b border-hairline px-4 py-3 text-left font-sans text-[13px] text-text-muted"
+				>
+					{caption}
+				</caption>
+			{/if}
+			<thead class={stickyHeader ? 'sticky top-0 z-10' : ''}>
+				<tr class="border-b border-hairline bg-bg-alt">
+					{#if selectable}
+						<th scope="col" class="w-10 {pad}">
+							<Checkbox
+								checked={allSelected}
+								indeterminate={someSelected}
+								{tone}
+								aria-label={t.current.selectAllRows}
+								onchange={toggleAll}
+							/>
+						</th>
+					{/if}
+					{#each columns as column (column.key)}
+						<th
+							scope="col"
+							aria-sort={sort?.key === column.key
+								? sort.direction === 'asc'
+									? 'ascending'
+									: 'descending'
+								: undefined}
+							class="text-[13px] font-semibold text-text-muted {pad} {aligns[
+								column.align ?? 'left'
+							]} {column.class ?? ''}"
+						>
+							{#if column.sortable}
+								<button
+									type="button"
+									onclick={() => toggleSort(column)}
+									class="inline-flex items-center gap-1.5 rounded transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
 									{sort?.key === column.key ? 'text-text' : ''}"
-							>
+								>
+									{column.label}
+									<span class="text-[9px] leading-none" aria-hidden="true">
+										{#if sort?.key === column.key}
+											{sort.direction === 'asc' ? '▲' : '▼'}
+										{:else}
+											⇅
+										{/if}
+									</span>
+								</button>
+							{:else}
 								{column.label}
-								<span class="text-[9px] leading-none" aria-hidden="true">
-									{#if sort?.key === column.key}
-										{sort.direction === 'asc' ? '▲' : '▼'}
-									{:else}
-										⇅
-									{/if}
-								</span>
-							</button>
-						{:else}
-							{column.label}
-						{/if}
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			{#if sorted.length === 0}
-				<tr>
-					<td
-						colspan={columns.length + (selectable ? 1 : 0)}
-						class="px-4 py-10 text-center text-sm text-text-muted"
-					>
-						{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
-					</td>
+							{/if}
+						</th>
+					{/each}
 				</tr>
-			{:else}
-				{#each sorted as row, i (selectable ? keyOf(row) : i)}
-					{@const isSelected = selectable && selected.includes(keyOf(row))}
-					<tr
-						aria-selected={selectable ? isSelected : undefined}
-						class="border-b border-hairline last:border-b-0
+			</thead>
+			<tbody>
+				{#if sorted.length === 0}
+					<tr>
+						<td
+							colspan={columns.length + (selectable ? 1 : 0)}
+							class="px-4 py-10 text-center text-sm text-text-muted"
+						>
+							{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
+						</td>
+					</tr>
+				{:else}
+					{#each sorted as row, i (selectable ? keyOf(row) : i)}
+						{@const isSelected = selectable && selected.includes(keyOf(row))}
+						<tr
+							aria-selected={selectable ? isSelected : undefined}
+							class="border-b border-hairline last:border-b-0
 							{isSelected ? 'bg-brand-light' : striped && i % 2 === 1 ? 'bg-bg-alt' : ''}
 							{hoverable ? 'transition-colors duration-150 hover:bg-bg-alt' : ''}"
-					>
-						{#if selectable}
-							<td class={pad}>
-								<Checkbox
-									checked={isSelected}
-									{tone}
-									aria-label={t.current.selectRow}
-									onchange={() => toggleRow(row)}
-								/>
-							</td>
-						{/if}
-						{#each columns as column (column.key)}
-							<td
-								class="text-text-secondary {pad} {aligns[column.align ?? 'left']} {column.class ??
-									''}"
-							>
-								{#if cell}
-									{@render cell({ row, column, value: row[column.key] })}
-								{:else}
-									{row[column.key] ?? ''}
-								{/if}
-							</td>
-						{/each}
-					</tr>
-				{/each}
-			{/if}
-		</tbody>
-	</table>
+						>
+							{#if selectable}
+								<td class={pad}>
+									<Checkbox
+										checked={isSelected}
+										{tone}
+										aria-label={t.current.selectRow}
+										onchange={() => toggleRow(row)}
+									/>
+								</td>
+							{/if}
+							{#each columns as column (column.key)}
+								<td
+									class="text-text-secondary {pad} {aligns[column.align ?? 'left']} {column.class ??
+										''}"
+								>
+									{#if cell}
+										{@render cell({ row, column, value: row[column.key] })}
+									{:else}
+										{row[column.key] ?? ''}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{/if}
+			</tbody>
+		</table>
+	</div>
+	{#if footer}
+		<div
+			class="flex flex-wrap items-center gap-3 border-t border-hairline px-4 py-3 font-sans text-[13px] text-text-secondary"
+		>
+			{@render footer()}
+		</div>
+	{/if}
 </div>

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

@@ -29,6 +29,18 @@ declare function $$render<T extends Record<string, unknown>>(): {
         compact?: boolean;
         /** Header stays put while the body scrolls — pair with a `max-h-*` class. */
         stickyHeader?: boolean;
+        /** Bar above the table — a title, a search field, a filter row. */
+        header?: Snippet;
+        /** Bar below the table — pagination, a total, a summary line. */
+        footer?: Snippet;
+        /**
+         * Shown in place of `header` while rows are ticked, after the count and the
+         * clear button. Passing it is what turns the bulk bar on.
+         */
+        bulkActions?: Snippet<[{
+            selected: string[];
+            clear: () => void;
+        }]>;
         /** Bindable. Set it to sort; leave `sortable` columns to drive it. */
         sort?: TableSort | null;
         /** Sort the rows here rather than refetching them server-side. Default true. */

package/dist/styles/sprout/Tabs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { edge } from './lift.js';
 	import {
@@ -9,10 +10,13 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	export interface TabItem {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		disabled?: boolean;
 		/** Small count/label rendered after the tab title. */
 		badge?: string | number;
@@ -90,6 +94,7 @@
 			onclick={() => select(item)}
 			class={tabClass(value === item.value)}
 		>
+			{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 			{item.label}
 			{#if item.badge !== undefined}
 				<span

package/dist/styles/sprout/Tabs.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 TabItem {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     disabled?: boolean;
     /** Small count/label rendered after the tab title. */
     badge?: string | number;

package/dist/styles/sprout/Toaster.svelte

@@ -4,6 +4,7 @@
 	import { portal } from '../../core/actions/dismissable.js';
 	import { toast } from '../../core/toast.svelte.js';
 	import { toneText } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 	import Spinner from './Spinner.svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { soft } from './lift.js';
@@ -62,6 +63,8 @@
 			<span class="mt-0.5 shrink-0 {toneText[item.tone]}">
 				{#if item.loading}
 					<Spinner size="sm" label="" />
+				{:else if item.icon}
+					<span class={iconMd}>{@render item.icon()}</span>
 				{:else if item.tone === 'success'}
 					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
 						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />

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/icon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The box a consumer-supplied icon renders into.
+ *
+ * Every icon in the library is a `Snippet` the app writes — the package ships
+ * no icon set and no runtime dependency — so the component has to size the
+ * glyph rather than trust it. The `*:` variant hits the snippet's own element,
+ * which is what keeps a bare `<svg viewBox="0 0 16 16">` from laying out at its
+ * intrinsic 300×150.
+ *
+ * Kept per style rather than in `core/`: an app only `@source`s the style
+ * folder it installed, so a class string living outside it would never be
+ * generated by Tailwind.
+ */
+/** 14px — menu rows, chips, anything sitting on one line of small text. */
+export declare const iconSm = "grid size-3.5 shrink-0 place-items-center *:size-3.5";
+/** 16px — the default: nav items, tabs, buttons, list rows. */
+export declare const iconMd = "grid size-4 shrink-0 place-items-center *:size-4";
+/** 20px — headers, stats, anything sitting beside a heading. */
+export declare const iconLg = "grid size-5 shrink-0 place-items-center *:size-5";
+/** 24px — dialog and empty-state marks. */
+export declare const iconXl = "grid size-6 shrink-0 place-items-center *:size-6";

package/dist/styles/sprout/icon.js

@@ -0,0 +1,21 @@
+/**
+ * The box a consumer-supplied icon renders into.
+ *
+ * Every icon in the library is a `Snippet` the app writes — the package ships
+ * no icon set and no runtime dependency — so the component has to size the
+ * glyph rather than trust it. The `*:` variant hits the snippet's own element,
+ * which is what keeps a bare `<svg viewBox="0 0 16 16">` from laying out at its
+ * intrinsic 300×150.
+ *
+ * Kept per style rather than in `core/`: an app only `@source`s the style
+ * folder it installed, so a class string living outside it would never be
+ * generated by Tailwind.
+ */
+/** 14px — menu rows, chips, anything sitting on one line of small text. */
+export const iconSm = 'grid size-3.5 shrink-0 place-items-center *:size-3.5';
+/** 16px — the default: nav items, tabs, buttons, list rows. */
+export const iconMd = 'grid size-4 shrink-0 place-items-center *:size-4';
+/** 20px — headers, stats, anything sitting beside a heading. */
+export const iconLg = 'grid size-5 shrink-0 place-items-center *:size-5';
+/** 24px — dialog and empty-state marks. */
+export const iconXl = 'grid size-6 shrink-0 place-items-center *:size-6';

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

@@ -22,8 +22,6 @@ export { default as Switch } from './Switch.svelte';
 export type { SwitchSize } from './Switch.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Label } from './Label.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export type { RadioOption } from './RadioGroup.svelte';
@@ -76,7 +74,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/index.js

@@ -21,8 +21,6 @@ export { default as Radio } from './Radio.svelte';
 export { default as Switch } from './Switch.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Label } from './Label.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as CheckboxGroup } from './CheckboxGroup.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,7 +1,7 @@
 {
 	"name": "@nqmcreative/ui",
-	"version": "0.2.2",
-	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 65 components each, one shared behaviour core. No runtime dependencies.",
+	"version": "0.3.0",
+	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 63 components each, one shared behaviour core. No runtime dependencies.",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && svelte-kit sync && svelte-package && node scripts/strip-dist-tests.mjs && node scripts/generate-index.mjs && node scripts/generate-exports.mjs && node scripts/generate-registry.mjs && node scripts/generate-scoped-css.mjs && node scripts/generate-demos.mjs && publint",
@@ -135,14 +135,6 @@
 			"types": "./dist/styles/matte/Label.svelte.d.ts",
 			"svelte": "./dist/styles/matte/Label.svelte"
 		},
-		"./matte/password-input": {
-			"types": "./dist/styles/matte/PasswordInput.svelte.d.ts",
-			"svelte": "./dist/styles/matte/PasswordInput.svelte"
-		},
-		"./matte/number-input": {
-			"types": "./dist/styles/matte/NumberInput.svelte.d.ts",
-			"svelte": "./dist/styles/matte/NumberInput.svelte"
-		},
 		"./matte/slider": {
 			"types": "./dist/styles/matte/Slider.svelte.d.ts",
 			"svelte": "./dist/styles/matte/Slider.svelte"
@@ -401,14 +393,6 @@
 			"types": "./dist/styles/paper/Label.svelte.d.ts",
 			"svelte": "./dist/styles/paper/Label.svelte"
 		},
-		"./paper/password-input": {
-			"types": "./dist/styles/paper/PasswordInput.svelte.d.ts",
-			"svelte": "./dist/styles/paper/PasswordInput.svelte"
-		},
-		"./paper/number-input": {
-			"types": "./dist/styles/paper/NumberInput.svelte.d.ts",
-			"svelte": "./dist/styles/paper/NumberInput.svelte"
-		},
 		"./paper/slider": {
 			"types": "./dist/styles/paper/Slider.svelte.d.ts",
 			"svelte": "./dist/styles/paper/Slider.svelte"
@@ -667,14 +651,6 @@
 			"types": "./dist/styles/sprout/Label.svelte.d.ts",
 			"svelte": "./dist/styles/sprout/Label.svelte"
 		},
-		"./sprout/password-input": {
-			"types": "./dist/styles/sprout/PasswordInput.svelte.d.ts",
-			"svelte": "./dist/styles/sprout/PasswordInput.svelte"
-		},
-		"./sprout/number-input": {
-			"types": "./dist/styles/sprout/NumberInput.svelte.d.ts",
-			"svelte": "./dist/styles/sprout/NumberInput.svelte"
-		},
 		"./sprout/slider": {
 			"types": "./dist/styles/sprout/Slider.svelte.d.ts",
 			"svelte": "./dist/styles/sprout/Slider.svelte"

package/registry.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nqmcreative/ui",
 	"homepage": "https://github.com/mukhsamr/nqmcreative-ui",
-	"count": 65,
+	"count": 63,
 	"demoStyle": "matte",
 	"styles": [
 		{
@@ -190,40 +190,6 @@
 			"uses": [],
 			"modules": []
 		},
-		{
-			"name": "PasswordInput",
-			"slug": "password-input",
-			"category": "forms",
-			"description": "Password field with a visibility toggle and a strength meter.",
-			"subpaths": {
-				"matte": "@nqmcreative/ui/matte/password-input",
-				"paper": "@nqmcreative/ui/paper/password-input",
-				"sprout": "@nqmcreative/ui/sprout/password-input"
-			},
-			"uses": [],
-			"modules": [
-				"locale",
-				"password",
-				"tones"
-			]
-		},
-		{
-			"name": "NumberInput",
-			"slug": "number-input",
-			"category": "forms",
-			"description": "Number field with steppers, clamping and decimal handling.",
-			"subpaths": {
-				"matte": "@nqmcreative/ui/matte/number-input",
-				"paper": "@nqmcreative/ui/paper/number-input",
-				"sprout": "@nqmcreative/ui/sprout/number-input"
-			},
-			"uses": [],
-			"modules": [
-				"locale",
-				"number",
-				"tones"
-			]
-		},
 		{
 			"name": "Slider",
 			"slug": "slider",
@@ -942,7 +908,8 @@
 				"dialog",
 				"list",
 				"locale",
-				"tones"
+				"tones",
+				"trigger"
 			]
 		},
 		{