Are `as` and `class` working?

I'm using Windi CSS with Svelte Kit.

Most of the things work and are straight forward, but using the components I can't use the as and class props.
So I need to nest a div or other html element. Is this intended?

A port from the headless ui react example

<script>
	import {
		RadioGroup,
		RadioGroupDescription,
		RadioGroupLabel,
		RadioGroupOption
	} from '@rgossiaux/svelte-headlessui';

	const plans = [
		{
			name: 'Startup',
			ram: '12GB',
			cpus: '6 CPUs',
			disk: '160 GB SSD disk'
		},
		{
			name: 'Business',
			ram: '16GB',
			cpus: '8 CPUs',
			disk: '512 GB SSD disk'
		},
		{
			name: 'Enterprise',
			ram: '32GB',
			cpus: '12 CPUs',
			disk: '1024 GB SSD disk'
		}
	];

	let value = plans[0];
</script>

<div class="w-full px-4 py-16">
	<div class="w-full max-w-md mx-auto">
		<RadioGroup {value} on:change={(e) => (value = plans.find((p) => p.name === e.detail.name))}>
			<RadioGroupLabel>
				<div class="sr-only">Server size</div>
			</RadioGroupLabel>
			<div class="space-y-2">
				{#each plans as plan (plan.name)}
					<RadioGroupOption key={plan.name} value={plan} let:active let:checked>
						<div
							class={`
                            relative rounded-lg shadow-md px-5 py-4 cursor-pointer flex focus:outline-none 
                            ${checked ? 'bg-sky-900 bg-opacity-75 text-white' : 'bg-white'} ${
								active ? 'ring-2 ring-offset-2 ring-offset-sky-300 ring-white ring-opacity-60' : ''
							} 
                            `}
						>
							<div class="flex items-center justify-between w-full">
								<div class="flex items-center">
									<div class="text-sm">
										<RadioGroupLabel>
											<p class={`font-medium ${checked ? 'text-white' : 'text-gray-900'}`}>
												{plan.name}
											</p>
										</RadioGroupLabel>
										<RadioGroupDescription>
											<span class={`inline ${checked ? 'text-sky-100' : 'text-gray-500'}`}>
												<span>
													{plan.ram}/{plan.cpus}
												</span>
												<span aria-hidden="true">&middot;</span>{' '}
												<span>{plan.disk}</span>
											</span>
										</RadioGroupDescription>
									</div>
								</div>
								{#if checked}
									<div class="flex-shrink-0 text-white">
										<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none">
											<circle cx={12} cy={12} r={12} fill="#fff" opacity="0.2" />
											<path
												d="M7 13l3 3 7-7"
												stroke="#fff"
												stroke-width={1.5}
												stroke-linecap="round"
												stroke-linejoin="round"
											/>
										</svg>
									</div>
								{/if}
							</div>
						</div>
					</RadioGroupOption>
				{/each}
			</div>
		</RadioGroup>
	</div>
</div>

Thanks for the report! Very helpful. I was able to reproduce the two issues I think you're talking about:

as for labels is not working. This is a bug; it's because the Label component isn't using the <Render> component when it should be:

svelte-headlessui/src/lib/components/label/Label.svelte

Line 21 in 5d83d35

<label
class for labels is not reactive. This is also a bug; this line should be reactive:

svelte-headlessui/src/lib/components/label/Label.svelte

Line 16 in 5d83d35

let allProps = { ...$$restProps, ...$contextStore!.props, id } as any;

I think Labels didn't get as much testing because they're a separate component from the "main" components + the upstream library doesn't really have many tests for them. I'll try to add some more unit tests with the fixes. The as and class props do work in general, eg they work correctly for the RadioGroupDescription in the same example.

I'm pretty busy today but I hope to fix this over the weekend.

Don't worry take your time, you've done great work.

I saw you mentioned Svelte Material UI, maybe more inspiration can be drawn from Renderless Svelte and Carbon Components Svelte

Thanks for the report! This will be fixed in the next release later today.