@c15t/svelte 3.0.0-alpha.0

package/dist/components/panel-link.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    noStyle?: boolean;
+    'data-testid'?: string;
+    [key: string]: unknown;
+};
+declare const PanelLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelLink = ReturnType<typeof PanelLink>;
+export default PanelLink;

package/dist/components/panel-trigger.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import styles from '@c15t/ui/styles/components/consent-dialog-trigger';
+	import {
+		calculateCornerFromDrag,
+		createInitialDragState,
+		getPersistedPosition,
+		persistPosition as persistToStorage,
+	} from '@c15t/ui/utils';
+	import type { CornerPosition, DragState } from '@c15t/ui/utils';
+	import { onMount, untrack } from 'svelte';
+
+	import { portal } from '../actions/portal';
+	import { getConsentContext } from '../context.svelte';
+	import C15TIconOnly from './icons/c15-t-icon-only.svelte';
+	import ConsentIconOnly from './icons/consent-icon-only.svelte';
+
+	type TriggerVisibility = 'always' | 'never';
+
+	let {
+		defaultPosition = 'bottom-right' as CornerPosition,
+		persistPosition = true,
+		showWhen = 'always' as TriggerVisibility,
+		size = 'md' as 'sm' | 'md' | 'lg',
+		ariaLabel = 'Open privacy settings',
+		noStyle = false,
+		class: className,
+		onclick,
+		onPositionChange,
+	}: {
+		defaultPosition?: CornerPosition;
+		persistPosition?: boolean;
+		showWhen?: TriggerVisibility;
+		size?: 'sm' | 'md' | 'lg';
+		ariaLabel?: string;
+		noStyle?: boolean;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		onPositionChange?: (position: CornerPosition) => void;
+	} = $props();
+
+	const consent = getConsentContext();
+
+	let corner: CornerPosition = $state(untrack(() => defaultPosition));
+
+	// Drag state
+	let dragState: DragState = $state(createInitialDragState());
+	let isSnapping = $state(false);
+	let hasDragged = $state(false);
+	let dragStartTime = $state(0);
+	let capturedElement: HTMLElement | null = null;
+
+	onMount(() => {
+		if (persistPosition) {
+			const persisted = getPersistedPosition();
+			if (persisted) {
+				corner = persisted;
+			}
+		}
+	});
+
+	const branding = $derived(consent.state.branding);
+	// Nothing to manage without a resolved policy.
+	const visible = $derived(
+		consent.state.hasConsentUi &&
+			showWhen !== 'never' &&
+			consent.snapshot.activeUI !== 'dialog'
+	);
+
+	// Position class mapping
+	const cornerClassMap: Record<CornerPosition, string> = {
+		'bottom-left': styles.bottomLeft || '',
+		'bottom-right': styles.bottomRight || '',
+		'top-left': styles.topLeft || '',
+		'top-right': styles.topRight || '',
+	};
+
+	const sizeClassMap: Record<string, string> = {
+		lg: styles.lg || '',
+		md: styles.md || '',
+		sm: styles.sm || '',
+	};
+
+	const positionClass = $derived(cornerClassMap[corner] || '');
+
+	// Drag style
+	const dragStyle = $derived(
+		dragState.isDragging
+			? `transform: translate(${dragState.currentX - dragState.startX}px, ${dragState.currentY - dragState.startY}px); transition: none;`
+			: 'transform: none;'
+	);
+
+	const updateCorner = function updateCorner(newCorner: CornerPosition) {
+		corner = newCorner;
+		if (persistPosition) {
+			persistToStorage(newCorner);
+		}
+		onPositionChange?.(newCorner);
+	};
+
+	const handlePointerDown = function handlePointerDown(e: PointerEvent) {
+		if (e.button !== 0) {
+			return;
+		}
+
+		(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		capturedElement = e.target as HTMLElement;
+		hasDragged = false;
+		dragStartTime = Date.now();
+
+		dragState = {
+			currentX: e.clientX,
+			currentY: e.clientY,
+			isDragging: true,
+			startX: e.clientX,
+			startY: e.clientY,
+		};
+
+		isSnapping = false;
+	};
+
+	const handlePointerMove = function handlePointerMove(e: PointerEvent) {
+		if (!dragState.isDragging) {
+			return;
+		}
+
+		const dx = Math.abs(e.clientX - dragState.startX);
+		const dy = Math.abs(e.clientY - dragState.startY);
+		if (dx > 5 || dy > 5) {
+			hasDragged = true;
+		}
+
+		dragState = {
+			...dragState,
+			currentX: e.clientX,
+			currentY: e.clientY,
+		};
+	};
+
+	const handlePointerUp = function handlePointerUp(e: PointerEvent) {
+		if (capturedElement) {
+			capturedElement.releasePointerCapture(e.pointerId);
+			capturedElement = null;
+		}
+
+		if (!dragState.isDragging) {
+			return;
+		}
+
+		if (hasDragged) {
+			const dragX = e.clientX - dragState.startX;
+			const dragY = e.clientY - dragState.startY;
+			const dragDuration = Date.now() - dragStartTime;
+
+			const velocityX = dragDuration > 0 ? dragX / dragDuration : 0;
+			const velocityY = dragDuration > 0 ? dragY / dragDuration : 0;
+
+			const newCorner = calculateCornerFromDrag(corner, dragX, dragY, {
+				velocityX,
+				velocityY,
+			});
+
+			if (newCorner !== corner) {
+				isSnapping = true;
+				setTimeout(() => {
+					isSnapping = false;
+				}, 300);
+				updateCorner(newCorner);
+			}
+		}
+
+		dragState = createInitialDragState();
+	};
+
+	const handlePointerCancel = function handlePointerCancel(e: PointerEvent) {
+		if (capturedElement) {
+			capturedElement.releasePointerCapture(e.pointerId);
+			capturedElement = null;
+		}
+		dragState = createInitialDragState();
+	};
+
+	const handleClick = function handleClick(e: MouseEvent) {
+		// Don't open dialog if this was a drag interaction
+		if (hasDragged) {
+			return;
+		}
+		onclick?.(e);
+		if (!e.defaultPrevented) {
+			consent.state.setActiveUI('dialog');
+		}
+	};
+
+	const buttonClasses = $derived(
+		noStyle
+			? className
+			: [
+					styles.trigger,
+					positionClass,
+					sizeClassMap[size],
+					dragState.isDragging && styles.dragging,
+					isSnapping && styles.snapping,
+					className,
+				]
+					.filter(Boolean)
+					.join(' ')
+	);
+</script>
+
+{#if visible}
+	<div use:portal>
+		<button
+			type="button"
+			class={buttonClasses}
+			style={dragStyle}
+			data-c15t-trigger="true"
+			data-c15t-rights={consent.snapshot.policyRule.rights.join(' ')}
+			aria-label={ariaLabel}
+			onclick={handleClick}
+			onpointerdown={handlePointerDown}
+			onpointermove={handlePointerMove}
+			onpointerup={handlePointerUp}
+			onpointercancel={handlePointerCancel}
+			data-testid="consent-dialog-trigger"
+		>
+			<span
+				class={noStyle ? '' : styles.icon || ''}
+				aria-hidden="true"
+			>
+				{#if branding === 'consent'}
+					<ConsentIconOnly />
+				{:else}
+					<C15TIconOnly />
+				{/if}
+			</span>
+		</button>
+	</div>
+{/if}

package/dist/components/panel-trigger.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { CornerPosition } from '@c15t/ui/utils';
+type TriggerVisibility = 'always' | 'never';
+type $$ComponentProps = {
+    defaultPosition?: CornerPosition;
+    persistPosition?: boolean;
+    showWhen?: TriggerVisibility;
+    size?: 'sm' | 'md' | 'lg';
+    ariaLabel?: string;
+    noStyle?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    onPositionChange?: (position: CornerPosition) => void;
+};
+declare const PanelTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelTrigger = ReturnType<typeof PanelTrigger>;
+export default PanelTrigger;

package/dist/components/panel.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import type { LegalLinks as LegalLinksType, Model } from '@c15t/core';
+	import {
+		defaultTranslationConfig,
+		resolveConsentPresentation,
+	} from '@c15t/core';
+	import styles from '@c15t/ui/styles/components/consent-dialog';
+	import { getTextDirection, resolveTranslations } from '@c15t/ui/utils';
+
+	import { getConsentContext, getThemeContext } from '../context.svelte';
+	import { Dialog, Portal } from '../primitives';
+	import { resolveComponentStyles } from '../utils';
+	import Branding from './branding.svelte';
+	import InlineLegalLinks from './inline-legal-links.svelte';
+	import ConsentDialogTrigger from './panel-trigger.svelte';
+	import ConsentWidget from './preferences.svelte';
+
+	interface ConsentDialogTriggerProps {
+		defaultPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+		persistPosition?: boolean;
+		showWhen?: 'always' | 'never';
+		size?: 'sm' | 'md' | 'lg';
+		ariaLabel?: string;
+		noStyle?: boolean;
+		class?: string;
+	}
+
+	const {
+		open: openProp,
+		noStyle: localNoStyle,
+		hideBranding,
+		legalLinks,
+		showTrigger = false,
+		// A `none` rule that grants the preferences right still opens here.
+		models = ['opt-in', 'opt-out', 'iab', 'none'] as Model[],
+		class: className,
+	}: {
+		open?: boolean;
+		noStyle?: boolean;
+		hideBranding?: boolean;
+		legalLinks?: (keyof LegalLinksType)[] | null;
+		showTrigger?: boolean | ConsentDialogTriggerProps;
+		models?: Model[];
+		class?: string;
+	} = $props();
+
+	const consent = getConsentContext();
+	const theme = getThemeContext();
+	const preferences = $derived(
+		resolveConsentPresentation({
+			policy: consent.snapshot.policyRule,
+			presentation: {
+				...consent.state.presentation,
+				preferences: {
+					scrollLock: theme.scrollLock,
+					trapFocus: theme.trapFocus,
+					...consent.state.presentation?.preferences,
+				},
+			},
+			surface: 'preferences',
+		})
+	);
+
+	const noStyle = $derived(localNoStyle ?? theme.noStyle ?? false);
+	const disableAnimation = $derived(theme.disableAnimation ?? false);
+
+	// Translations
+	const translations = $derived(
+		resolveTranslations(
+			consent.state.translationConfig,
+			defaultTranslationConfig
+		)
+	);
+	const textDirection = $derived(
+		getTextDirection(consent.state.translationConfig?.defaultLanguage)
+	);
+
+	// Open state
+	const isOpen = $derived(
+		consent.state.hasConsentUi &&
+			models.includes(consent.state.model) &&
+			(openProp ?? consent.state.activeUI === 'dialog')
+	);
+	let dialogOpen = $state(false);
+	let lastResolvedOpen = $state(false);
+
+	// Per-element theme key styling
+	const rootStyle = $derived(
+		resolveComponentStyles(
+			'consentDialog',
+			theme.theme,
+			{ className, noStyle },
+			noStyle
+		)
+	);
+
+	const cardStyle = $derived(
+		resolveComponentStyles(
+			'consentDialogCard',
+			theme.theme,
+			{ baseClassName: styles.card, noStyle },
+			noStyle
+		)
+	);
+
+	const headerStyle = $derived(
+		resolveComponentStyles(
+			'consentDialogHeader',
+			theme.theme,
+			{ baseClassName: styles.header, noStyle },
+			noStyle
+		)
+	);
+
+	const titleStyle = $derived(
+		resolveComponentStyles(
+			'consentDialogTitle',
+			theme.theme,
+			{ baseClassName: styles.title, noStyle },
+			noStyle
+		)
+	);
+
+	const descriptionStyle = $derived(
+		resolveComponentStyles(
+			'consentDialogDescription',
+			theme.theme,
+			{ baseClassName: styles.description, noStyle },
+			noStyle
+		)
+	);
+
+	const contentStyle = $derived(
+		resolveComponentStyles(
+			'consentDialogContent',
+			theme.theme,
+			{ baseClassName: styles.content, noStyle },
+			noStyle
+		)
+	);
+
+	// Trigger props
+	const triggerProps = $derived.by(() => {
+		if (showTrigger === true) {
+			return {};
+		}
+		if (showTrigger === false) {
+			return null;
+		}
+		return showTrigger;
+	});
+
+	$effect(() => {
+		if (isOpen !== lastResolvedOpen) {
+			dialogOpen = isOpen;
+			lastResolvedOpen = isOpen;
+		}
+	});
+
+	$effect(() => {
+		if (lastResolvedOpen && !dialogOpen) {
+			consent.state.setActiveUI('none');
+			lastResolvedOpen = false;
+		}
+	});
+</script>
+
+{#if triggerProps}
+	<ConsentDialogTrigger {...triggerProps} />
+{/if}
+
+<Dialog.Root
+	bind:open={dialogOpen}
+	closeOnInteractOutside={false}
+	closeOnEscape={true}
+	trapFocus={preferences.blocking}
+	preventScroll={preferences.scrollLock}
+	lazyMount
+	unmountOnExit
+>
+	<Portal>
+		{#if preferences.blocking}
+			<Dialog.Backdrop
+				class={noStyle ? '' : styles.overlay || ''}
+				data-testid="consent-dialog-overlay"
+			/>
+		{/if}
+		<Dialog.Positioner
+			class={noStyle
+				? ''
+				: `${styles.root || ''} ${!disableAnimation ? (isOpen ? styles.dialogVisible || '' : styles.dialogHidden || '') : ''}`}
+		>
+			<Dialog.Content
+				class={noStyle
+					? rootStyle.className || ''
+					: `${styles.container || ''} ${rootStyle.className || ''} ${!disableAnimation ? (isOpen ? styles.contentVisible || '' : styles.contentHidden || '') : ''}`}
+				dir={textDirection}
+				aria-labelledby="consent-dialog-title"
+				aria-describedby="consent-dialog-description"
+				data-blocking={preferences.blocking ? 'true' : undefined}
+				data-testid="consent-dialog-root"
+			>
+				<!-- Card -->
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+				<div
+					class={noStyle ? '' : cardStyle.className || ''}
+					data-testid="consent-dialog-card"
+					tabindex={-1}
+				>
+					<!-- Header -->
+					<div
+						class={noStyle ? '' : headerStyle.className || ''}
+						data-testid="consent-dialog-header"
+					>
+						<h2
+							class={noStyle ? '' : titleStyle.className || ''}
+							data-testid="consent-dialog-title"
+							id="consent-dialog-title"
+						>
+							{translations.consentManagerDialog.title}
+						</h2>
+						<div
+							class={noStyle ? '' : descriptionStyle.className || ''}
+							data-context="dialog"
+							data-testid="consent-dialog-description"
+							id="consent-dialog-description"
+						>
+							{translations.consentManagerDialog.description}
+							<InlineLegalLinks
+								links={legalLinks}
+								themeKey="consentDialogContent"
+								testIdPrefix="consent-dialog-legal-link"
+							/>
+						</div>
+					</div>
+
+					<!-- Content: ConsentWidget -->
+					<div
+						class={noStyle ? '' : contentStyle.className || ''}
+						data-testid="consent-dialog-content"
+					>
+						<ConsentWidget
+							hideBranding
+							{noStyle}
+						/>
+					</div>
+					<Branding
+						{hideBranding}
+						{noStyle}
+						variant="dialog-tag"
+						themeKey="consentDialogTag"
+						data-testid="consent-dialog-branding"
+					/>
+				</div>
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>

package/dist/components/panel.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { LegalLinks as LegalLinksType, Model } from '@c15t/core';
+interface ConsentDialogTriggerProps {
+    defaultPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    persistPosition?: boolean;
+    showWhen?: 'always' | 'never';
+    size?: 'sm' | 'md' | 'lg';
+    ariaLabel?: string;
+    noStyle?: boolean;
+    class?: string;
+}
+type $$ComponentProps = {
+    open?: boolean;
+    noStyle?: boolean;
+    hideBranding?: boolean;
+    legalLinks?: (keyof LegalLinksType)[] | null;
+    showTrigger?: boolean | ConsentDialogTriggerProps;
+    models?: Model[];
+    class?: string;
+};
+declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/components/policy-actions-renderer.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { SurfacePresentation } from '@c15t/core';
+	import actionStyles from '@c15t/ui/styles/components/consent-actions';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Renders policy-driven action groups using the shared `consent-actions`
+	 * contract: layout (fill, column, split) is expressed through data
+	 * attributes that the component CSS reads, so every framework adapter
+	 * produces the same DOM.
+	 */
+	let {
+		actionGroups = [],
+		primaryActions = [],
+		shouldFillActions = false,
+		direction = 'row',
+		noStyle = false,
+		footerClassName,
+		footerSubGroupClassName,
+		footerTestId,
+		footerSubGroupTestId,
+		leading,
+		renderAction,
+	}: {
+		actionGroups?: string[][];
+		primaryActions?: string[];
+		shouldFillActions?: boolean;
+		direction?: SurfacePresentation['direction'];
+		noStyle?: boolean;
+		footerClassName?: string;
+		footerSubGroupClassName?: string;
+		footerTestId?: string;
+		footerSubGroupTestId?: string;
+		/** Rendered inside the footer before the action groups, e.g. rights links. */
+		leading?: Snippet;
+		renderAction?: Snippet<[string, boolean]>;
+	} = $props();
+
+	const isSplit = $derived(actionGroups.length > 1);
+	const resolvedFooterClassName = $derived(
+		[noStyle ? '' : actionStyles.actionRoot, footerClassName]
+			.filter(Boolean)
+			.join(' ')
+	);
+	const resolvedFooterSubGroupClassName = $derived(
+		[noStyle ? '' : actionStyles.actionGroup, footerSubGroupClassName]
+			.filter(Boolean)
+			.join(' ')
+	);
+	const keyedActionGroups = $derived(
+		actionGroups.map((group, groupIndex) => ({
+			group,
+			groupIndex,
+			key: `${group.join('-')}-${groupIndex}`,
+		}))
+	);
+</script>
+
+<div
+	class={resolvedFooterClassName}
+	data-testid={footerTestId}
+	data-direction={direction}
+	data-fill={shouldFillActions ? true : undefined}
+	data-split={isSplit && !shouldFillActions ? true : undefined}
+>
+	{@render leading?.()}
+	{#each keyedActionGroups as actionGroup (actionGroup.key)}
+		<div
+			class={resolvedFooterSubGroupClassName}
+			data-testid={footerSubGroupTestId}
+			data-direction={direction}
+			data-fill={shouldFillActions ? true : undefined}
+		>
+			{#each actionGroup.group as action (actionGroup.groupIndex + '-' + action)}
+				{@render renderAction?.(action, primaryActions.includes(action))}
+			{/each}
+		</div>
+	{/each}
+</div>

package/dist/components/policy-actions-renderer.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SurfacePresentation } from '@c15t/core';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    actionGroups?: string[][];
+    primaryActions?: string[];
+    shouldFillActions?: boolean;
+    direction?: SurfacePresentation['direction'];
+    noStyle?: boolean;
+    footerClassName?: string;
+    footerSubGroupClassName?: string;
+    footerTestId?: string;
+    footerSubGroupTestId?: string;
+    /** Rendered inside the footer before the action groups, e.g. rights links. */
+    leading?: Snippet;
+    renderAction?: Snippet<[string, boolean]>;
+};
+declare const PolicyActionsRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+type PolicyActionsRenderer = ReturnType<typeof PolicyActionsRenderer>;
+export default PolicyActionsRenderer;