@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/navigation-menu/NavigationMenuItem.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { tick, type Snippet } from 'svelte';
 	import type { Attachment } from 'svelte/attachments';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { prefersReducedMotion } from 'svelte/motion';
 	import { scale, slide } from 'svelte/transition';
-	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import ChevronDown from '../../internal/icons/ChevronDown.svelte';
 	import { getNavigationMenuContext } from './context.js';
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLLIElement>, 'children'> & {
 		/** Links the item. Ignored when the item has `items`. */
 		href?: string;
 		/** Marks the item as the current page, or the section containing it. */
@@ -16,16 +17,25 @@
 		/** Number of columns the panel lays its links out in. Ignored in a vertical menu. */
 		columns?: 1 | 2 | 3;
 		children: Snippet;
+		ref?: HTMLLIElement | null;
 	};
 
-	let { href, active = false, items, columns = 1, children }: Props = $props();
+	let {
+		href,
+		active = false,
+		items,
+		columns = 1,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 
 	const id = $props.id();
 	const menu = getNavigationMenuContext();
 	const gap = 8;
 	const edge = 8;
 
-	let itemEl: HTMLLIElement;
 	let triggerEl: HTMLButtonElement | undefined = $state();
 	let contentEl: HTMLElement | undefined = $state();
 	let position = $state({ top: 0, left: 0 });
@@ -81,11 +91,11 @@
 		if (!open || menu.vertical) return;
 
 		function handlePointerDown(event: PointerEvent) {
-			if (!itemEl.contains(event.target as Node)) close();
+			if (!ref?.contains(event.target as Node)) close();
 		}
 
 		function handleKeydown(event: KeyboardEvent) {
-			if (event.key === 'Escape') close({ restoreFocus: itemEl.contains(document.activeElement) });
+			if (event.key === 'Escape') close({ restoreFocus: ref?.contains(document.activeElement) });
 		}
 
 		window.addEventListener('pointerdown', handlePointerDown);
@@ -103,11 +113,12 @@
 </script>
 
 <li
-	class={['navigation-menu-item', { 'navigation-menu-item--vertical': menu.vertical }]}
-	bind:this={itemEl}
+	{...rest}
+	class={['navigation-menu-item', { 'navigation-menu-item--vertical': menu.vertical }, className]}
+	bind:this={ref}
 	onfocusout={(event) => {
-		if (open && !menu.vertical && !itemEl.contains(event.relatedTarget as Node | null))
-			menu.close();
+		rest.onfocusout?.(event);
+		if (open && !menu.vertical && !ref?.contains(event.relatedTarget as Node | null)) menu.close();
 	}}
 >
 	{#if items}
@@ -163,95 +174,126 @@
 </li>
 
 <style>
-	.navigation-menu-item {
-		display: flex;
-	}
+	@layer svelte-ui {
+		.navigation-menu-item {
+			display: flex;
+		}
 
-	.navigation-menu-item--vertical {
-		flex-direction: column;
-	}
+		.navigation-menu-item--vertical {
+			flex-direction: column;
+		}
 
-	.navigation-menu-item--vertical .navigation-menu-trigger {
-		justify-content: space-between;
-		width: 100%;
-		text-align: left;
-	}
+		.navigation-menu-item--vertical .navigation-menu-trigger {
+			justify-content: space-between;
+			width: 100%;
+			text-align: left;
+		}
 
-	.navigation-menu-trigger {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0;
-		background: none;
-		border: none;
-		border-radius: 4px;
-		font: inherit;
-		font-size: 14px;
-		line-height: 28px;
-		color: var(--color-text);
-		text-decoration: none;
-		outline: none;
-		cursor: pointer;
-		transition: opacity 200ms;
-	}
+		.navigation-menu-trigger {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			padding: 0;
+			background: none;
+			border: none;
+			border-radius: 4px;
+			font: inherit;
+			font-size: 14px;
+			line-height: 28px;
+			color: var(--color-text);
+			text-decoration: none;
+			outline: none;
+			cursor: pointer;
+			transition: opacity 200ms;
+		}
 
-	.navigation-menu-trigger:hover {
-		opacity: 0.6;
-	}
+		.navigation-menu-trigger:hover {
+			opacity: 0.6;
+		}
 
-	.navigation-menu-trigger:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 2px;
-	}
+		.navigation-menu-trigger:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: 2px;
+		}
 
-	.navigation-menu-trigger--active {
-		font-weight: 500;
-	}
+		.navigation-menu-trigger--active {
+			font-weight: 500;
+		}
 
-	.navigation-menu-item :global(.navigation-menu-chevron) {
-		width: 14px;
-		height: 14px;
-		flex-shrink: 0;
-		transition: rotate 200ms ease;
-	}
+		.navigation-menu-item :global(.navigation-menu-chevron) {
+			width: 14px;
+			height: 14px;
+			flex-shrink: 0;
+			transition: rotate 200ms ease;
+		}
 
-	.navigation-menu-trigger[aria-expanded='true'] :global(.navigation-menu-chevron) {
-		rotate: 180deg;
-	}
+		.navigation-menu-trigger[aria-expanded='true'] :global(.navigation-menu-chevron) {
+			rotate: 180deg;
+		}
 
-	.navigation-menu-content {
-		position: fixed;
-		inset: auto;
-		box-sizing: border-box;
-		max-width: calc(100vw - 16px);
-		margin: 0;
-		padding: 6px;
-		overflow: visible;
-		background-color: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-		transform-origin: top left;
-		user-select: none;
-	}
+		.navigation-menu-content {
+			position: fixed;
+			inset: auto;
+			box-sizing: border-box;
+			max-width: calc(100vw - 16px);
+			margin: 0;
+			padding: 6px;
+			overflow: visible;
+			background-color: var(--color-bg);
+			color: var(--color-text);
+			border: 1px solid var(--color-border);
+			border-radius: 12px;
+			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+			transform-origin: top left;
+			user-select: none;
+		}
 
-	.navigation-menu-links {
-		display: grid;
-		grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
-		width: min(var(--columns) * 240px, 100vw - 30px);
-		gap: 2px;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
+		.navigation-menu-links {
+			display: grid;
+			grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+			width: min(var(--columns) * 240px, 100vw - 30px);
+			gap: 2px;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
+
+		.navigation-menu-sub {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			margin: 4px 0 0;
+			padding: 0;
+			list-style: none;
+		}
 
-	.navigation-menu-sub {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		margin: 4px 0 0;
-		padding: 0;
-		list-style: none;
+		@media (prefers-reduced-motion: reduce) {
+			.navigation-menu-trigger,
+			.navigation-menu-item :global(.navigation-menu-chevron) {
+				transition: none;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.navigation-menu-trigger:hover {
+				opacity: 1;
+				text-decoration: underline;
+			}
+
+			.navigation-menu-trigger--active {
+				text-decoration: underline;
+			}
+
+			.navigation-menu-trigger:focus-visible {
+				outline-color: Highlight;
+			}
+		}
+
+		@media (pointer: coarse) {
+			.navigation-menu-trigger {
+				min-width: 44px;
+				min-height: 44px;
+			}
+		}
 	}
 </style>

package/dist/components/navigation-menu/NavigationMenuItem.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type Snippet } from 'svelte';
-type Props = {
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLLIElement>, 'children'> & {
     /** Links the item. Ignored when the item has `items`. */
     href?: string;
     /** Marks the item as the current page, or the section containing it. */
@@ -9,7 +10,8 @@ type Props = {
     /** Number of columns the panel lays its links out in. Ignored in a vertical menu. */
     columns?: 1 | 2 | 3;
     children: Snippet;
+    ref?: HTMLLIElement | null;
 };
-declare const NavigationMenuItem: import("svelte").Component<Props, {}, "">;
+declare const NavigationMenuItem: import("svelte").Component<Props, {}, "ref">;
 type NavigationMenuItem = ReturnType<typeof NavigationMenuItem>;
 export default NavigationMenuItem;

package/dist/components/navigation-menu/NavigationMenuLink.svelte

@@ -1,27 +1,38 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { LucideIcon } from '@lucide/svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { IconComponent } from '../../icon.js';
 	import { getNavigationMenuContext } from './context.js';
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLLIElement>, 'children'> & {
 		href: string;
-		/** Any Lucide icon (import from `svelte-ui/icons`). */
-		icon?: LucideIcon;
+		/** Any icon component, e.g. from `@lucide/svelte`. */
+		icon?: IconComponent;
 		/** Short text below the title, clamped to two lines. */
 		description?: string;
 		/** Marks the link as the current page. */
 		active?: boolean;
 		/** The link's title. */
 		children: Snippet;
+		ref?: HTMLLIElement | null;
 	};
 
-	let { href, icon: Icon, description, active = false, children }: Props = $props();
+	let {
+		href,
+		icon: Icon,
+		description,
+		active = false,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 
 	const menu = getNavigationMenuContext();
 	let classes = $derived(['navigation-menu-link', { 'navigation-menu-link--active': active }]);
 </script>
 
-<li>
+<li {...rest} bind:this={ref} class={className}>
 	<!-- href comes from the consumer, who resolves it; this library has no routes -->
 	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 	<a {href} aria-current={active ? 'page' : undefined} class={classes} onclick={menu.close}>
@@ -36,56 +47,84 @@
 </li>
 
 <style>
-	.navigation-menu-link {
-		display: flex;
-		align-items: flex-start;
-		gap: 10px;
-		padding: 8px 10px;
-		border-radius: 8px;
-		font-size: 13px;
-		line-height: 1.4;
-		color: var(--color-text);
-		text-decoration: none;
-		outline: none;
-		transition: background-color 150ms ease;
-	}
+	@layer svelte-ui {
+		.navigation-menu-link {
+			display: flex;
+			align-items: flex-start;
+			gap: 10px;
+			padding: 8px 10px;
+			border-radius: 8px;
+			font-size: 13px;
+			line-height: 1.4;
+			color: var(--color-text);
+			text-decoration: none;
+			outline: none;
+			transition: background-color 150ms ease;
+		}
 
-	.navigation-menu-link:hover,
-	.navigation-menu-link:focus-visible,
-	.navigation-menu-link--active {
-		background-color: var(--color-surface);
-	}
+		.navigation-menu-link:hover,
+		.navigation-menu-link:focus-visible,
+		.navigation-menu-link--active {
+			background-color: var(--color-surface);
+		}
 
-	.navigation-menu-link:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: -2px;
-	}
+		.navigation-menu-link:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: -2px;
+		}
 
-	.navigation-menu-link :global(.navigation-menu-link-icon) {
-		width: 16px;
-		height: 16px;
-		margin-top: 1px;
-		flex-shrink: 0;
-	}
+		.navigation-menu-link :global(.navigation-menu-link-icon) {
+			width: 16px;
+			height: 16px;
+			margin-top: 1px;
+			flex-shrink: 0;
+		}
 
-	.navigation-menu-link-text {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		min-width: 0;
-	}
+		.navigation-menu-link-text {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			min-width: 0;
+		}
 
-	.navigation-menu-link-title {
-		font-weight: 500;
-	}
+		.navigation-menu-link-title {
+			font-weight: 500;
+		}
+
+		.navigation-menu-link-description {
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+			line-clamp: 2;
+			overflow: hidden;
+			font-size: 12px;
+			color: var(--color-text-muted);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.navigation-menu-link {
+				transition: none;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.navigation-menu-link:hover,
+			.navigation-menu-link--active {
+				outline: 1px solid Highlight;
+				outline-offset: -1px;
+			}
+
+			.navigation-menu-link:focus-visible {
+				outline: 2px solid Highlight;
+				outline-offset: -2px;
+			}
+		}
 
-	.navigation-menu-link-description {
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		overflow: hidden;
-		font-size: 12px;
-		color: var(--color-text-muted);
+		@media (pointer: coarse) {
+			.navigation-menu-link {
+				min-height: 44px;
+				box-sizing: border-box;
+			}
+		}
 	}
 </style>

package/dist/components/navigation-menu/NavigationMenuLink.svelte.d.ts

@@ -1,16 +1,18 @@
 import type { Snippet } from 'svelte';
-import type { LucideIcon } from '@lucide/svelte';
-type Props = {
+import type { HTMLAttributes } from 'svelte/elements';
+import type { IconComponent } from '../../icon.js';
+type Props = Omit<HTMLAttributes<HTMLLIElement>, 'children'> & {
     href: string;
-    /** Any Lucide icon (import from `svelte-ui/icons`). */
-    icon?: LucideIcon;
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
     /** Short text below the title, clamped to two lines. */
     description?: string;
     /** Marks the link as the current page. */
     active?: boolean;
     /** The link's title. */
     children: Snippet;
+    ref?: HTMLLIElement | null;
 };
-declare const NavigationMenuLink: import("svelte").Component<Props, {}, "">;
+declare const NavigationMenuLink: import("svelte").Component<Props, {}, "ref">;
 type NavigationMenuLink = ReturnType<typeof NavigationMenuLink>;
 export default NavigationMenuLink;

package/dist/components/number-stepper/NumberStepper.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Minus from '../../internal/icons/Minus.svelte';
+	import Plus from '../../internal/icons/Plus.svelte';
+	import Button from '../button/Button.svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange'> & {
+		/** The count. Bindable. */
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		size?: 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+		/** Names what is counted; the accessible name of the group and part of the button labels. */
+		label: string;
+		/** Prefix of the decrease button's name, followed by `label`. */
+		decreaseLabel?: string;
+		/** Prefix of the increase button's name, followed by `label`. */
+		increaseLabel?: string;
+		ref?: HTMLDivElement | null;
+		onchange?: (value: number) => void;
+	};
+
+	let {
+		value = $bindable(0),
+		min = 0,
+		max = Infinity,
+		step = 1,
+		size = 'sm',
+		disabled = false,
+		label,
+		decreaseLabel = 'Decrease',
+		increaseLabel = 'Increase',
+		ref = $bindable(null),
+		class: className,
+		onchange,
+		...rest
+	}: Props = $props();
+
+	function set(next: number) {
+		value = Math.min(Math.max(next, min), max);
+		onchange?.(value);
+	}
+</script>
+
+<div
+	{...rest}
+	bind:this={ref}
+	role="group"
+	aria-label={label}
+	class={['number-stepper', `number-stepper--${size}`, className]}
+>
+	<Button
+		variant="secondary"
+		{size}
+		icon={Minus}
+		label="{decreaseLabel} {label}"
+		disabled={disabled || value <= min}
+		onclick={() => set(value - step)}
+	/>
+	<output class="number-stepper-value" aria-live="polite">{value}</output>
+	<Button
+		variant="secondary"
+		{size}
+		icon={Plus}
+		label="{increaseLabel} {label}"
+		disabled={disabled || value >= max}
+		onclick={() => set(value + step)}
+	/>
+</div>
+
+<style>
+	@layer svelte-ui {
+		.number-stepper {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			font-size: 13px;
+			color: var(--color-text);
+		}
+
+		.number-stepper--sm {
+			font-size: 12px;
+		}
+
+		.number-stepper-value {
+			min-width: 24px;
+			font-weight: 600;
+			font-variant-numeric: tabular-nums;
+			text-align: center;
+		}
+
+		@media (pointer: coarse) {
+			.number-stepper :global(.button) {
+				min-width: 44px;
+				min-height: 44px;
+			}
+		}
+	}
+</style>

package/dist/components/number-stepper/NumberStepper.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange'> & {
+    /** The count. Bindable. */
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Names what is counted; the accessible name of the group and part of the button labels. */
+    label: string;
+    /** Prefix of the decrease button's name, followed by `label`. */
+    decreaseLabel?: string;
+    /** Prefix of the increase button's name, followed by `label`. */
+    increaseLabel?: string;
+    ref?: HTMLDivElement | null;
+    onchange?: (value: number) => void;
+};
+declare const NumberStepper: import("svelte").Component<Props, {}, "ref" | "value">;
+type NumberStepper = ReturnType<typeof NumberStepper>;
+export default NumberStepper;