@c15t/svelte 3.0.0-alpha.0 → 3.0.0-alpha.2

package/AGENTS.md

@@ -47,14 +47,17 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [Ahrefs Analytics](./docs/integrations/ahrefs-analytics.md): Configure Ahrefs Analytics with c15t v3, understand measurement permission and verify loading and revocation.
 - [Amplitude](./docs/integrations/amplitude.md): Configure Amplitude with c15t v3, understand measurement permission and verify loading and revocation.
 - [Custom integrations](./docs/integrations/building-integrations.md): Define loading, initialization and consent-change behavior for a vendor without a helper.
+- [Clear on revocation](./docs/integrations/clear-on-revocation.md): Remove configured first-party cookies and Web Storage keys when their consent category is denied.
 - [Clearbit](./docs/integrations/clearbit.md): Configure Clearbit with c15t v3, understand marketing permission and verify loading and revocation.
 - [Cloudflare Web Analytics](./docs/integrations/cloudflare-web-analytics.md): Configure Cloudflare Web Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [Cloudflare Zaraz](./docs/integrations/cloudflare-zaraz.md): Synchronize c15t permissions with Zaraz purposes while Cloudflare manages your tools.
 - [Crisp](./docs/integrations/crisp.md): Configure Crisp with c15t v3, understand functionality permission and verify loading and revocation.
 - [Databuddy](./docs/integrations/databuddy.md): Configure Databuddy's initial and updated consent state with c15t v3.
 - [Fathom Analytics](./docs/integrations/fathom-analytics.md): Configure Fathom Analytics with c15t v3, understand measurement permission and verify loading and revocation.
 - [Google Maps](./docs/integrations/google-maps.md): Prevent a map iframe from mounting before the required permission.
 - [Google Tag](./docs/integrations/google-tag.md): Configure gtag with c15t Consent Mode signals and understand its loading behavior.
 - [Google Tag Manager](./docs/integrations/google-tag-manager.md): Load GTM with c15t consent signals and verify the tags inside your container.
+- [Granular consent](./docs/integrations/granular-consent.md): Let visitors grant a category and still turn one vendor off, without adopting IAB TCF.
 - [Heap](./docs/integrations/heap.md): Configure Heap with c15t v3, understand measurement permission and verify loading and revocation.
 - [Hightouch](./docs/integrations/hightouch.md): Configure Hightouch with c15t v3, understand measurement permission and verify loading and revocation.
 - [Hotjar](./docs/integrations/hotjar.md): Configure Hotjar with c15t v3, understand measurement permission and verify loading and revocation.

package/dist/components/{frame.svelte.d.ts → consent-gate.svelte.d.ts}

@@ -7,6 +7,6 @@ type $$ComponentProps = {
     noStyle?: boolean;
     class?: string;
 };
-declare const Frame: import("svelte").Component<$$ComponentProps, {}, "">;
-type Frame = ReturnType<typeof Frame>;
-export default Frame;
+declare const ConsentGate: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConsentGate = ReturnType<typeof ConsentGate>;
+export default ConsentGate;

package/dist/components/iab-purpose-item.svelte

@@ -183,6 +183,7 @@
 	     its own padding's worth. -->
 	<PreferenceItem.Content
 		innerClassName={noStyle ? '' : styles.purposeContent || ''}
+		{noStyle}
 	>
 		<p class={noStyle ? '' : styles.purposeDescription || ''}>
 			{purpose.description}
@@ -252,7 +253,7 @@
 						{iabT.preferenceCenter.purposeItem.examples}
 						({purpose.illustrations.length})
 					</PreferenceItem.Trigger>
-					<PreferenceItem.Content>
+					<PreferenceItem.Content {noStyle}>
 						<ul class={noStyle ? '' : styles.examplesList || ''}>
 							{#each purpose.illustrations as illustration (illustration)}
 								<li>{illustration}</li>
@@ -281,6 +282,7 @@
 				</PreferenceItem.Trigger>
 				<PreferenceItem.Content
 					innerClassName={noStyle ? '' : styles.vendorSection || ''}
+					{noStyle}
 				>
 					<!-- IAB Consent Vendors -->
 					{#if iabConsentVendors.length > 0}

package/dist/components/iab-stack-item.svelte

@@ -120,7 +120,7 @@
 		</PreferenceItem.Control>
 	</div>
 
-	<PreferenceItem.Content>
+	<PreferenceItem.Content {noStyle}>
 		<div class={noStyle ? '' : styles.stackDescription || ''}>
 			<p>{stack.description}</p>
 		</div>

package/dist/components/iab-vendor-list.svelte

@@ -423,6 +423,7 @@
 
 						<PreferenceItem.Content
 							innerClassName={noStyle ? '' : styles.vendorListContent || ''}
+							{noStyle}
 						>
 							<!-- Links -->
 							<div class={noStyle ? '' : styles.vendorLinks || ''}>
@@ -764,6 +765,7 @@
 
 						<PreferenceItem.Content
 							innerClassName={noStyle ? '' : styles.vendorListContent || ''}
+							{noStyle}
 						>
 							<div class={noStyle ? '' : styles.vendorLinks || ''}>
 								<a

package/dist/components/manager-provider.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type {
-		AllConsentNames,
 		ConsentSnapshot,
 		ConsentState,
 		KernelOverrides,
 		KernelUser,
+		OptionalConsentCategory,
 	} from '@c15t/core';
+	import { deniedVendorIds, vendorRenders } from '@c15t/core';
 	import {
 		createConsentRuntime,
 		normalizeKernelUser,
@@ -99,29 +100,119 @@
 	const { kernel } = runtime;
 
 	let snapshot = $state<ConsentSnapshot>(kernel.getSnapshot());
+	let draftScope = $state<string | null>(null);
 	let draftFingerprint = $state<string | null>(null);
 	let draftRevision = 0;
 	let draftSaveSequence = 0;
 	let draftValues = $state<Partial<ConsentState>>({});
+	/** Vendor grants the visitor moved, over the seeded map. */
+	let draftVendors = $state<Record<string, boolean>>({});
+	/** The vendor list as it was when the first vendor moved. */
+	let draftVendorSurface = $state<string | null>(null);
+
+	/** Set an own property without going through the prototype for `__proto__`. */
+	const setOwn = (
+		target: Record<string, boolean>,
+		key: string,
+		value: boolean
+	) => {
+		Object.defineProperty(target, key, {
+			configurable: true,
+			enumerable: true,
+			value,
+			writable: true,
+		});
+	};
+	/**
+	 * Granted flag per declared vendor from the record: the denials the gate
+	 * honors, so a stale denial for a vendor now `disabled` does not count.
+	 */
+	const seedVendors = (current: ConsentSnapshot): Record<string, boolean> => {
+		const grants: Record<string, boolean> = {};
+		if (current.model === 'iab') {
+			return grants;
+		}
+		const denied = deniedVendorIds(current) ?? new Set<string>();
+		for (const vendor of current.vendors?.declared ?? []) {
+			setOwn(grants, vendor.id, !denied.has(vendor.id));
+		}
+		return grants;
+	};
+	const toggleableVendor = (current: ConsentSnapshot, vendorId: string) =>
+		current.model !== 'iab' &&
+		(current.vendors?.declared ?? []).some(
+			(vendor) => vendor.id === vendorId && vendor.disabled !== true
+		);
+	/**
+	 * What the vendor rows are built from; a dirty draft goes stale when it
+	 * changes. A declaration that cannot produce a row, such as a script
+	 * registering only its slug, is not part of the surface.
+	 */
+	const vendorSurface = (current: ConsentSnapshot) =>
+		current.model === 'iab'
+			? ''
+			: JSON.stringify(
+					(current.vendors?.declared ?? [])
+						.filter(vendorRenders)
+						.map((vendor) => [
+							vendor.id,
+							vendor.disabled === true,
+							vendor.category,
+						])
+				);
+	/** The value a category shows before the visitor moves it. */
+	const baselineValue = (
+		current: ConsentSnapshot,
+		name: OptionalConsentCategory
+	) =>
+		current.explicitChoice?.categories[name]?.value ??
+		options.presentation?.preferences?.defaults?.[name] ??
+		(current.policyRule.model === 'opt-out' ||
+			current.policyRule.preselectedCategories.includes(name));
+	/**
+	 * Forget the policy and vendor surface once nothing is staged. Both maps
+	 * hold only moved values, so a visitor who moves a switch and moves it
+	 * back leaves nothing to review: a later declaration must not make the
+	 * draft stale, and a later policy must not find a value staged under
+	 * the old one and save it. A save that fails never settles, so its draft
+	 * stays for the retry.
+	 */
+	const settleDraft = () => {
+		if (
+			Object.keys(draftValues).length === 0 &&
+			Object.keys(draftVendors).length === 0
+		) {
+			draftFingerprint = null;
+			draftScope = null;
+			draftVendorSurface = null;
+		}
+	};
 	let iabHandle = $state<IABHandle | null>(
 		untrack(() => runtime.iab as IABHandle | null)
 	);
 	let iabTab = $state<'purposes' | 'vendors'>('purposes');
-	let configuredCategories = $state<AllConsentNames[]>(
-		untrack(() => options.consentCategories ?? runtime.consentCategories)
-	);
 
 	const draft: ConsentDraftState = {
 		get isStale() {
 			return (
-				draftFingerprint !== null &&
-				draftFingerprint !== snapshot.evaluationPolicy.choice.fingerprint
+				(draftFingerprint !== null &&
+					(draftFingerprint !== snapshot.evaluationPolicy.choice.fingerprint ||
+						draftScope !==
+							(
+								snapshot.evaluationPolicy.choiceScope ??
+								snapshot.policyRule.scope
+							).join(','))) ||
+				(draftVendorSurface !== null &&
+					draftVendorSurface !== vendorSurface(snapshot))
 			);
 		},
 		reset() {
 			draftRevision += 1;
 			draftValues = {};
+			draftVendors = {};
 			draftFingerprint = null;
+			draftScope = null;
+			draftVendorSurface = null;
 		},
 		async save(categories) {
 			const revision = draftRevision;
@@ -129,59 +220,143 @@
 			const sequence = draftSaveSequence;
 			const current = kernel.getSnapshot();
 			if (
-				draftFingerprint !== null &&
-				draftFingerprint !== current.evaluationPolicy.choice.fingerprint
+				(draftFingerprint !== null &&
+					(draftFingerprint !== current.evaluationPolicy.choice.fingerprint ||
+						draftScope !==
+							(
+								current.evaluationPolicy.choiceScope ?? current.policyRule.scope
+							).join(','))) ||
+				(draftVendorSurface !== null &&
+					draftVendorSurface !== vendorSurface(current))
 			) {
 				throw new Error(
 					'The policy changed. Review your preferences before saving.'
 				);
 			}
 			const { values } = draft;
-			const result = await kernel.commands.save(
-				Object.fromEntries(
-					current.policyRule.scope
-						.filter(
-							(name) =>
-								configuredCategories.length === 0 ||
-								configuredCategories.includes(name)
-						)
+			// Only the vendors the draft moved travel with the save, so an
+			// untouched vendor never renews its recorded confirmation time.
+			const seeded = seedVendors(current);
+			const moved: Record<string, boolean> = {};
+			for (const [id, granted] of Object.entries(draft.vendors)) {
+				if (seeded[id] !== granted) {
+					setOwn(moved, id, granted);
+				}
+			}
+			const result = await kernel.commands.save({
+				...Object.fromEntries(
+					(current.evaluationPolicy.choiceScope ?? current.policyRule.scope)
 						.filter(
 							(name) => categories === undefined || categories.includes(name)
 						)
 						.map((name) => [name, values[name]])
-				)
-			);
+				),
+				...(Object.keys(moved).length > 0 && { vendors: moved }),
+			});
 			if (!result.ok) {
 				throw new Error('Unable to save preferences.');
 			}
-			if (revision === draftRevision && sequence === draftSaveSequence) {
+			if (sequence !== draftSaveSequence) {
+				return;
+			}
+			if (revision === draftRevision) {
 				draft.reset();
+				return;
+			}
+			// The visitor edited while the save was in flight. What was sent
+			// is the baseline now, so a submitted entry the visitor did not
+			// move again leaves the draft, or it would override a record
+			// another surface writes later; edits made after the submit stay.
+			const nextValues: Partial<ConsentState> = {};
+			for (const [name, staged] of Object.entries(draftValues)) {
+				if (values[name as OptionalConsentCategory] !== staged) {
+					nextValues[name as OptionalConsentCategory] = staged;
+				}
+			}
+			draftValues = nextValues;
+			const nextVendors: Record<string, boolean> = {};
+			for (const [id, staged] of Object.entries(draftVendors)) {
+				if (moved[id] !== staged) {
+					setOwn(nextVendors, id, staged);
+				}
 			}
+			draftVendors = nextVendors;
+			settleDraft();
 		},
 		set(name, value) {
 			if (name === 'necessary') {
 				return;
 			}
+			const current = kernel.getSnapshot();
+			draftRevision += 1;
+			draftFingerprint ??= current.evaluationPolicy.choice.fingerprint;
+			draftScope ??= (
+				current.evaluationPolicy.choiceScope ?? current.policyRule.scope
+			).join(',');
+			// A category edit reviews the vendor rows too: a vendor declared
+			// under it later was not what the visitor saw.
+			draftVendorSurface ??= vendorSurface(current);
+			// Only moved categories are staged, like the vendor map.
+			const next: Partial<ConsentState> = {};
+			for (const [key, staged] of Object.entries(draftValues)) {
+				if (key !== name) {
+					next[key as OptionalConsentCategory] = staged;
+				}
+			}
+			if (value !== baselineValue(current, name)) {
+				next[name] = value;
+			}
+			draftValues = next;
+			settleDraft();
+		},
+		setVendor(vendorId, granted) {
+			const current = kernel.getSnapshot();
+			if (!toggleableVendor(current, vendorId)) {
+				return;
+			}
 			draftRevision += 1;
-			draftFingerprint ??=
-				kernel.getSnapshot().evaluationPolicy.choice.fingerprint;
-			draftValues = { ...draftValues, [name]: value };
+			draftFingerprint ??= current.evaluationPolicy.choice.fingerprint;
+			draftScope ??= (
+				current.evaluationPolicy.choiceScope ?? current.policyRule.scope
+			).join(',');
+			draftVendorSurface ??= vendorSurface(current);
+			// Only moved vendors are staged. A vendor put back to its seeded
+			// value leaves the map, or the entry would outlive the seed and
+			// override a record another island writes later.
+			const next: Record<string, boolean> = {};
+			for (const [id, value] of Object.entries(draftVendors)) {
+				if (id !== vendorId) {
+					setOwn(next, id, value);
+				}
+			}
+			if (granted !== seedVendors(current)[vendorId]) {
+				setOwn(next, vendorId, granted);
+			}
+			draftVendors = next;
+			settleDraft();
 		},
 		get values() {
 			return {
 				necessary: true,
 				...Object.fromEntries(
-					snapshot.policyRule.scope.map((name) => [
+					(
+						snapshot.evaluationPolicy.choiceScope ?? snapshot.policyRule.scope
+					).map((name) => [
 						name,
-						draftValues[name] ??
-							snapshot.explicitChoice?.categories[name]?.value ??
-							options.presentation?.preferences?.defaults?.[name] ??
-							(snapshot.policyRule.model === 'opt-out' ||
-								snapshot.policyRule.preselectedCategories.includes(name)),
+						draftValues[name] ?? baselineValue(snapshot, name),
 					])
 				),
 			};
 		},
+		get vendors() {
+			const seeded = seedVendors(snapshot);
+			for (const [id, granted] of Object.entries(draftVendors)) {
+				if (toggleableVendor(snapshot, id)) {
+					setOwn(seeded, id, granted);
+				}
+			}
+			return seeded;
+		},
 	};
 
 	const getIABState = function getIABState(): SvelteIABState | null {
@@ -229,10 +404,7 @@
 		clearRecords: () => runtime.clearRecords(),
 		getConsentCategories: () => [
 			'necessary',
-			...snapshot.policyRule.scope.filter(
-				(name) =>
-					!configuredCategories.length || configuredCategories.includes(name)
-			),
+			...(snapshot.evaluationPolicy.choiceScope ?? snapshot.policyRule.scope),
 		],
 		getDraft: () => draft,
 		getIAB: getIABState,
@@ -294,11 +466,12 @@
 	// removing the prop restores that rather than leaving the last pushed
 	// list in place. Only restored if this provider did the pushing: a
 	// borrowed runtime's categories belong to whoever owns it.
-	const initialCategories = untrack(() => runtime.consentCategories);
+	const initialCategories = untrack(() => [
+		...(kernel.getSnapshot().consentCategories ?? []),
+	]);
 	let pushedCategories = false;
 
 	$effect(() => {
-		configuredCategories = consentCategoriesOption ?? initialCategories;
 		if (consentCategoriesOption) {
 			runtime.setConsentCategories(consentCategoriesOption);
 			pushedCategories = true;

package/dist/components/preferences.svelte

@@ -6,7 +6,7 @@
 	} from '@c15t/core';
 	import accordionStyles from '@c15t/ui/styles/components/accordion';
 	import managerStyles from '@c15t/ui/styles/components/consent-manager';
-	import { switchVariants } from '@c15t/ui/styles/primitives';
+	import switchStyles from '@c15t/ui/styles/components/switch';
 	import { getTextDirection, resolveTranslations } from '@c15t/ui/utils';
 
 	import { getConsentContext, getThemeContext } from '../context.svelte';
@@ -15,8 +15,7 @@
 	import ConsentButton from './action-button.svelte';
 	import Branding from './branding.svelte';
 	import PolicyActionsRenderer from './policy-actions-renderer.svelte';
-
-	const sw = switchVariants({ size: 'small' });
+	import VendorList from './vendor-list.svelte';
 
 	let {
 		hideBranding = true,
@@ -215,15 +214,12 @@
 									: undefined}
 								onclick={() => toggleConsent(consentType.name, !isChecked)}
 								disabled={isDisabled}
-								class={noStyle ? '' : sw.root()}
+								class={noStyle ? '' : switchStyles.root}
+								data-size={noStyle ? undefined : 'small'}
 								data-testid={`consent-widget-switch-${consentType.name}`}
 							>
-								<Switch.Control
-									class={noStyle ? '' : sw.track({ disabled: isDisabled })}
-								>
-									<Switch.Thumb
-										class={noStyle ? '' : sw.thumb({ disabled: isDisabled })}
-									/>
+								<Switch.Control class={noStyle ? '' : switchStyles.track}>
+									<Switch.Thumb class={noStyle ? '' : switchStyles.thumb} />
 								</Switch.Control>
 							</Switch.Root>
 						</PreferenceItem.Control>
@@ -249,6 +245,10 @@
 						{translations.consentTypes[consentType.name]?.description ??
 							consentType.description ??
 							''}
+						<VendorList
+							category={consentType.name}
+							{noStyle}
+						/>
 					</PreferenceItem.Content>
 				</PreferenceItem.Root>
 			{/each}

package/dist/components/vendor-list.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	/**
+	 * Vendor cards nested inside one category's accordion content. Each is a
+	 * collapsed card of its own that opens for its description and privacy
+	 * policy link, with a switch on the header. The markup, class names,
+	 * `data-slot`s and ARIA attributes mirror the React
+	 * `ConsentWidgetVendorList` so the cross-framework parity runner sees
+	 * identical DOM.
+	 */
+	import type { AllConsentNames, ResolvedVendor } from '@c15t/core';
+	import { defaultTranslationConfig } from '@c15t/core';
+	import switchStyles from '@c15t/ui/styles/components/switch';
+	import vendorListStyles from '@c15t/ui/styles/components/vendor-list';
+	import { resolveTranslations } from '@c15t/ui/utils';
+
+	import { getConsentContext } from '../context.svelte';
+	import { PreferenceItem, Switch } from '../primitives';
+
+	let {
+		category,
+		noStyle = false,
+	}: {
+		/** Category whose vendors to list. */
+		category: AllConsentNames;
+		/** Drop the built-in styling. */
+		noStyle?: boolean;
+	} = $props();
+
+	const consent = getConsentContext();
+	const uid = $props.id();
+
+	const DEFAULT_COPY = {
+		disabledByCategory: 'Turn on this category to choose vendors.',
+		privacyPolicy: 'Privacy policy',
+		switchLabel: 'Allow {vendor}',
+		title: 'Vendors ({count})',
+	};
+
+	const copy = $derived({
+		...DEFAULT_COPY,
+		...resolveTranslations(
+			consent.state.translationConfig,
+			defaultTranslationConfig
+		).consentManagerDialog.vendors,
+	});
+	const vendors = $derived(consent.state.getDisplayedVendors(category));
+	const categoryOn = $derived(
+		consent.state.selectedConsents[category] === true
+	);
+	const styles = $derived(noStyle ? undefined : vendorListStyles);
+	const title = $derived(copy.title.replace('{count}', String(vendors.length)));
+
+	// A set, not an object: a vendor id is any slug, and one such as
+	// `constructor` would read an inherited member off a plain object as open.
+	let openItems = $state<ReadonlySet<string>>(new Set());
+	const toggleOpen = (id: string) => {
+		const next = new Set(openItems);
+		if (next.has(id)) {
+			next.delete(id);
+		} else {
+			next.add(id);
+		}
+		openItems = next;
+	};
+
+	const vendorName = (vendor: ResolvedVendor) => vendor.name ?? vendor.id;
+	const hasDetails = (vendor: ResolvedVendor) =>
+		Boolean(vendor.description || vendor.privacyPolicyUrl);
+	// A `disabled` vendor is presented without a toggle: the kernel ignores
+	// grants for it, so a switch would only mislead.
+	const toggleable = (vendor: ResolvedVendor) => vendor.disabled !== true;
+	const isChecked = (vendor: ResolvedVendor) =>
+		consent.state.selectedVendors[vendor.id] ?? true;
+	const labelId = (vendor: ResolvedVendor) =>
+		`${uid}vendor-${category}-${vendor.id}`;
+</script>
+
+{#if vendors.length > 0}
+	<section
+		class={styles?.root}
+		aria-label={title}
+		data-testid={`consent-widget-vendor-list-${category}`}
+	>
+		{#if !categoryOn}
+			<p
+				class={styles?.hint}
+				data-testid={`consent-widget-vendor-hint-${category}`}
+			>
+				{copy.disabledByCategory}
+			</p>
+		{/if}
+		{#each vendors as vendor (vendor.id)}
+			{@const open = openItems.has(vendor.id)}
+			{@const details = hasDetails(vendor)}
+			{@const checked = isChecked(vendor)}
+			<PreferenceItem.Root
+				class={styles?.item}
+				disabled={!details}
+				{noStyle}
+				{open}
+				data-testid={`consent-widget-vendor-item-${category}-${vendor.id}`}
+			>
+				<div class={styles?.header}>
+					<PreferenceItem.Trigger
+						class={styles?.trigger}
+						onclick={() => {
+							toggleOpen(vendor.id);
+						}}
+						data-testid={`consent-widget-vendor-trigger-${category}-${vendor.id}`}
+					>
+						<PreferenceItem.Leading class={styles?.arrow}>
+							<svg
+								aria-hidden="true"
+								fill="none"
+								focusable="false"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+							>
+								<title>{open ? 'Close' : 'Open'}</title>
+								{#if open}
+									<path d="M5 12h14" />
+								{:else}
+									<path d="M5 12h14M12 5v14" />
+								{/if}
+							</svg>
+						</PreferenceItem.Leading>
+						<span
+							id={labelId(vendor)}
+							class={styles?.name}
+							data-testid={`consent-widget-vendor-name-${category}-${vendor.id}`}
+						>
+							{vendorName(vendor)}
+						</span>
+					</PreferenceItem.Trigger>
+					{#if toggleable(vendor)}
+						<div class={styles?.control}>
+							<Switch.Root
+								aria-label={copy.switchLabel.replace(
+									'{vendor}',
+									vendorName(vendor)
+								)}
+								aria-describedby={labelId(vendor)}
+								{checked}
+								class={noStyle ? undefined : switchStyles.root}
+								data-size={noStyle ? undefined : 'small'}
+								disabled={!categoryOn}
+								onclick={() =>
+									consent.state.setSelectedVendor(vendor.id, !checked)}
+								data-testid={`consent-widget-vendor-switch-${category}-${vendor.id}`}
+							>
+								<Switch.Control
+									class={noStyle ? undefined : switchStyles.track}
+								>
+									<Switch.Thumb
+										class={noStyle ? undefined : switchStyles.thumb}
+									/>
+								</Switch.Control>
+							</Switch.Root>
+						</div>
+					{/if}
+				</div>
+				{#if details}
+					<PreferenceItem.Content
+						class={styles?.content}
+						innerClassName={styles?.contentInner}
+						{noStyle}
+						data-testid={`consent-widget-vendor-content-${category}-${vendor.id}`}
+					>
+						{#if vendor.description}
+							<p class={styles?.description}>{vendor.description}</p>
+						{/if}
+						{#if vendor.privacyPolicyUrl}
+							<a
+								class={styles?.link}
+								href={vendor.privacyPolicyUrl}
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								{copy.privacyPolicy}
+							</a>
+						{/if}
+					</PreferenceItem.Content>
+				{/if}
+			</PreferenceItem.Root>
+		{/each}
+	</section>
+{/if}

package/dist/components/vendor-list.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+     * Vendor cards nested inside one category's accordion content. Each is a
+     * collapsed card of its own that opens for its description and privacy
+     * policy link, with a switch on the header. The markup, class names,
+     * `data-slot`s and ARIA attributes mirror the React
+     * `ConsentWidgetVendorList` so the cross-framework parity runner sees
+     * identical DOM.
+     */
+import type { AllConsentNames } from '@c15t/core';
+type $$ComponentProps = {
+    /** Category whose vendors to list. */
+    category: AllConsentNames;
+    /** Drop the built-in styling. */
+    noStyle?: boolean;
+};
+declare const VendorList: import("svelte").Component<$$ComponentProps, {}, "">;
+type VendorList = ReturnType<typeof VendorList>;
+export default VendorList;