Components

<Button variant="filled" size="m">Filled</Button>
<Button variant="tonal">Tonal</Button>
<Button href="/docs/" variant="outlined">Docs</Button>

<IconButton label="Share" variant="filled">
	<Icon name="share" />
</IconButton>

<FAB extended label="Compose">
	<Icon name="edit" />Compose
</FAB>

<ConnectedButtons label="View mode">
	<Button variant="tonal" size="s">Day</Button>
	<Button variant="tonal" size="s">Week</Button>
</ConnectedButtons>

<Card variant="elevated" onclick={open}>
	<h3>Elevated</h3>
	<p>Rests on the surface with a subtle shadow.</p>
</Card>

<Card variant="outlined">
	<ListItem
		headline="Two-line list item"
		supporting="Secondary text stays readable at every breakpoint."
	/>
</Card>

<TextField label="Email" bind:value={email} supportingText="We never share it." />
<TextField label="Username" value="a b" invalid supportingText="Only letters and numbers." />

<Checkbox bind:checked={agree} label="Accept terms" />
<Radio name="drink" value="filter" label="Filter" checked={drink === 'filter'}
	onchange={() => (drink = 'filter')} />
<Switch bind:checked={soundOn} label="Sound" />

<Slider bind:value={volume} min={0} max={100} />
<Select label="Topic" options={[{ value: 'motion', label: 'Motion' }]} bind:value={topic} />
<Chip variant="filter" label="Wi-Fi" bind:selected={filterChip} />
<Chip variant="input" label="Svelte" onRemove={removeChip} />
<DateField bind:value={dueDate} aria-label="Due date" />

<CircularProgress value={64} max={100} />
<CircularProgress />
<LinearProgress value={64} max={100} />
<LoadingIndicator />

<script lang="ts">
	import { Button, Dialog, Menu, MenuItem, Snackbar, snackbar } from 'm3nerd';

	let open = $state(false);
	let menuOpen = $state(false);
	let anchor = $state<HTMLSpanElement | null>(null);
</script>

<Button onclick={() => (open = true)}>Open dialog</Button>

<Dialog bind:open title="Discard draft?">
	<p>Your changes will be lost.</p>
	{#snippet actions()}
		<Button variant="text" onclick={() => (open = false)}>Cancel</Button>
		<Button variant="filled" onclick={() => (open = false)}>Discard</Button>
	{/snippet}
</Dialog>

<span bind:this={anchor}>
	<Button onclick={() => (menuOpen = true)}>Open menu</Button>
</span>
<Menu bind:open={menuOpen} anchorEl={anchor}>
	<MenuItem>Cut</MenuItem>
	<MenuItem>Copy</MenuItem>
</Menu>

<Snackbar />
<button onclick={() => snackbar('Saved')}>Save</button>

<NavigationSuite
	items={[
		{ id: 'home', label: 'Home', icon: 'home' },
		{ id: 'docs', label: 'Docs', icon: 'menu_book' },
		{ id: 'components', label: 'Library', icon: 'widgets' },
		{ id: 'motion', label: 'Motion', icon: 'animation' },
		{ id: 'settings', label: 'Settings', icon: 'settings' }
	]}
	bind:activeId={activeId}
/>

<Tabs tabs={tabs} bind:activeId={tab} variant="primary" />

<Toolbar dense elevated>
	{#snippet leading()}
		<IconButton label="Navigate back"><Icon name="arrow_back" /></IconButton>
		<span>Inbox</span>
	{/snippet}
</Toolbar>

<Badge value={3}>
	<span class="avatar">A</span>
</Badge>

<Badge value={120} max={99}>
	<Icon name="notifications" size={28} />
</Badge>

<Badge dot label="Unread items">
	<Icon name="campaign" size={28} />
</Badge>

<script lang="ts">
	$effect(() => {
		const root = document.documentElement;
		if (density === 'compact') root.dataset.density = 'compact';
		else delete root.dataset.density;
	});

	$effect(() => {
		const update = () => (width = window.innerWidth);
		update();
		const queries = [600, 840, 1200, 1600].map((w) => {
			const mq = matchMedia('(min-width: ' + w + 'px)');
			mq.addEventListener('change', update);
			return mq;
		});
		window.addEventListener('resize', update);
		return () => {
			for (const mq of queries) mq.removeEventListener('change', update);
			window.removeEventListener('resize', update);
		};
	});
</script>