@c15t/svelte 3.0.0-alpha.0

package/AGENTS.md

@@ -0,0 +1,88 @@
+# @c15t/svelte
+
+> Svelte and SvelteKit v3 providers, request loading and static hosting with Inth.
+
+These docs ship inside the package so coding agents can read them offline. Open the topic file you need from the list below — paths are relative to this file.
+
+## Using these docs
+
+These docs describe v3. Start with Inth hosted setup, identify the framework, router and deployment, then read its quickstart. Static sites can use Inth directly. Use page Markdown and package-bundled docs for targeted context. Verify scripts, rejection, reload and preferences; banner visibility alone is insufficient.
+
+## Start here
+
+- [Svelte quickstart](./docs/frameworks/svelte/quickstart.md)
+- [SvelteKit quickstart](./docs/frameworks/sveltekit/quickstart.md)
+- [Customize your consent interface](./docs/customization/overview.md): Choose presentation, theme tokens, slots or custom markup for the change you need.
+- [Verify consent before shipping](./docs/guides/verify-consent.md): Test requests, policy resolution, persistence, navigation and preference changes in a production build.
+- [Upgrade to v3 policies](./docs/upgrade-v3.md): Migrate policy configuration, consent records, callbacks, and custom transports to the v3 policy system.
+
+## More documentation
+
+[Documentation index](https://c15t.com/docs/llms.txt) · [Full Markdown context](https://c15t.com/llms-full.txt). Prefer the index and individual pages for focused tasks.
+
+## Frameworks
+
+- [Quickstart](./docs/frameworks/svelte/quickstart.md): Mount c15t components and a persistent preferences link in a Svelte 5 application.
+- [Quickstart](./docs/frameworks/sveltekit/quickstart.md): Resolve consent in a SvelteKit server load and hydrate the provider, or initialize in the browser on static hosting.
+
+## Guides
+
+- [Understand consent state](./docs/guides/consent-state.md): Distinguish policy resolution, effective permissions, explicit choices, notices and privacy signals.
+- [Data fetching and transports](./docs/guides/data-fetching.md): Choose cached manifests, backend init or offline policy resolution, and understand where consent records are saved.
+- [Choose a deployment mode](./docs/guides/deployment-modes.md): Choose who runs your consent backend, then select manifest, init or offline resolution for your deployment.
+- [Troubleshoot consent](./docs/guides/troubleshooting.md): Diagnose missing banners, early vendor requests, lost choices and hydration differences.
+- [Verify consent before shipping](./docs/guides/verify-consent.md): Test requests, policy resolution, persistence, navigation and preference changes in a production build.
+
+## Customization
+
+- [Customize your consent interface](./docs/customization/overview.md): Choose presentation, theme tokens, slots or custom markup for the change you need.
+- [Banner styling recipes](./docs/customization/recipes.md): See real v3 components and reuse the exact theme configuration behind the examples.
+- [Style component slots](./docs/customization/slots.md): Target a specific c15t component part without replacing its markup or behavior.
+- [Theme tokens and CSS](./docs/customization/tokens.md): Style c15t with semantic tokens and use the stylesheet that matches your CSS tooling.
+- [Copy and translations](./docs/customization/translations.md): Change consent wording through i18n and test the complete prompt and preferences flow.
+
+## Integrations
+
+- [Adobe Analytics](./docs/integrations/adobe-analytics.md): Configure Adobe Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [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.
+- [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.
+- [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.
+- [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.
+- [Intercom](./docs/integrations/intercom.md): Load the Intercom messenger with functionality permission and configure its region.
+- [LinkedIn Insight Tag](./docs/integrations/linkedin-insights.md): Configure LinkedIn Insight Tag with c15t v3, understand marketing permission and verify loading and revocation.
+- [LogRocket](./docs/integrations/logrocket.md): Configure LogRocket with c15t v3, understand measurement permission and verify loading and revocation.
+- [Matomo Analytics](./docs/integrations/matomo-analytics.md): Choose gated loading or Matomo consent signaling and configure the correct tracker endpoints.
+- [Meta Pixel](./docs/integrations/meta-pixel.md): Register the Meta Pixel under marketing permission and verify event calls after revocation.
+- [Microsoft Clarity](./docs/integrations/microsoft-clarity.md): Configure Microsoft Clarity with c15t v3, understand measurement permission and verify loading and revocation.
+- [Microsoft UET](./docs/integrations/microsoft-uet.md): Configure Microsoft UET with c15t v3, understand marketing permission and verify loading and revocation.
+- [Mixpanel](./docs/integrations/mixpanel-analytics.md): Configure Mixpanel with c15t v3, understand measurement permission and verify loading and revocation.
+- [OpenAI Pixel](./docs/integrations/openai-pixel.md): Configure the OpenAI Measurement Pixel for ChatGPT Ads with c15t v3, manage marketing permission and verify conversion delivery.
+- [Overview](./docs/integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, chat and embedded content.
+- [Pirsch](./docs/integrations/pirsch.md): Configure Pirsch with c15t v3, understand measurement permission and verify loading and revocation.
+- [Plausible Analytics](./docs/integrations/plausible-analytics.md): Configure Plausible Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [PostHog](./docs/integrations/posthog.md): Choose PostHog loading and cookieless behavior, configure the region, and synchronize v3 permissions.
+- [Promptwatch](./docs/integrations/promptwatch.md): Configure Promptwatch with c15t v3, understand measurement permission and verify loading and revocation.
+- [Reddit Pixel](./docs/integrations/reddit-pixel.md): Configure Reddit Pixel with c15t v3, understand marketing permission and verify loading and revocation.
+- [RudderStack](./docs/integrations/rudderstack.md): Gate the RudderStack browser SDK or map c15t categories to destination consent IDs.
+- [Rybbit Analytics](./docs/integrations/rybbit-analytics.md): Configure Rybbit Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [Segment](./docs/integrations/segment.md): Configure Segment with c15t v3, understand measurement permission and verify loading and revocation.
+- [Snapchat Pixel](./docs/integrations/snapchat-pixel.md): Configure Snapchat Pixel with c15t v3, understand marketing permission and verify loading and revocation.
+- [TikTok Pixel](./docs/integrations/tiktok-pixel.md): Configure TikTok Pixel with c15t v3, understand marketing permission and verify loading and revocation.
+- [Umami Analytics](./docs/integrations/umami-analytics.md): Configure Umami Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [Vercel Analytics](./docs/integrations/vercel-analytics.md): Configure Vercel Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [X Pixel](./docs/integrations/x-pixel.md): Configure X Pixel with c15t v3, understand marketing permission and verify loading and revocation.
+- [YouTube](./docs/integrations/youtube.md): Gate YouTube embeds with c15t v3 in Next.js, TanStack Start, React, Nuxt, Vue, Astro, Svelte, SvelteKit or JavaScript.
+
+## Reference
+
+- [Upgrade to v3 policies](./docs/upgrade-v3.md): Migrate policy configuration, consent records, callbacks, and custom transports to the v3 policy system.

package/README.md

@@ -0,0 +1,136 @@
+<p align="center">
+  <a href="https://c15t.com?utm_source=npm&utm_medium=readme&utm_campaign=oss_readme&utm_content=%40c15t%2Fsvelte" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="../../docs/assets/c15t-banner-readme-dark.svg" type="image/svg+xml">
+      <img src="../../docs/assets/c15t-banner-readme-light.svg" alt="c15t Banner" type="image/svg+xml">
+    </picture>
+  </a>
+</p>
+
+# @c15t/svelte: Svelte Consent Components
+
+<p>
+<a href="https://www.npmjs.com/package/@c15t/svelte"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/%40c15t%2Fsvelte.svg?variant=outline&mode=dark"><img src="https://shieldcn.dev/npm/%40c15t%2Fsvelte.svg?variant=outline&mode=light" alt="Latest NPM Version"></picture></a>
+<a href="https://github.com/c15t/c15t"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/github/c15t/c15t/stars.svg?variant=outline&mode=dark"><img src="https://shieldcn.dev/github/c15t/c15t/stars.svg?variant=outline&mode=light" alt="Stars"></picture></a>
+<a href="https://github.com/c15t/c15t/blob/main/LICENSE.md"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/github/c15t/c15t/license.svg?variant=outline&mode=dark"><img src="https://shieldcn.dev/github/c15t/c15t/license.svg?variant=outline&mode=light" alt="License"></picture></a>
+<a href="https://c15t.link/discord"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/discord/1312171102268690493.svg?variant=outline&mode=dark"><img src="https://shieldcn.dev/discord/1312171102268690493.svg?variant=outline&mode=light" alt="Discord"></picture></a>
+<a href="https://skills.sh/c15t/skills/c15t"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/skills/c15t/skills/c15t.svg?variant=outline&mode=dark"><img src="https://shieldcn.dev/skills/c15t/skills/c15t.svg?variant=outline&mode=light" alt="Skills"></picture></a>
+<a href="https://inth.com?utm_source=npm&utm_medium=readme&utm_campaign=oss_readme&utm_content=%40c15t%2Fsvelte"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/Made%20By-Inth-ffc803.svg?color=ffc803&labelTextColor=000000&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzOTMgNDAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTgyLjY2MiAwdjM2Ljg5NWgtNTkuMDMxdjgyLjczM2g1OS4wMzF2MzYuODkzSDI3LjQ4MnYtMzYuODkzaDU5LjAzVjM2Ljg5NWgtNTkuMDNWMHpNMzIxLjk0MSA4OS44NVYwaDM1LjM1NXYxNTYuNTIxaC0yNS43MTNsLTg2LjEzNy05MC4zNjR2OTAuMzY0aC0zNS4zNTVWMGgyNi4zNTV6Ii8%2BPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzE4LjU3MSAxODUuNzE0aDc0LjI4NlY0MDBIMFYxODUuNzE0aDI3Mi44NTd2LTQ3LjE0M3ptLTI5MS4wOSAyOC45Njl2MzcuMTE4aDU4LjEzN3YxMTkuNjI4aDM2Ljg5NVYyNTEuODAxaDU4LjU4NHYtMzcuMTE4em0xODIuNjEuMjI0djE1Ni41MjJoMzYuODk0VjMxMy41OWg3My4zNDF2NTcuODM5aDM3LjExOFYyMTQuOTA3aC0zNy4xMTh2NjEuNzg4aC03My4zNDF2LTYxLjc4OHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg%3D%3D&valueColor=000000&mode=dark"><img src="https://shieldcn.dev/badge/Made%20By-Inth-ffc803.svg?color=ffc803&labelTextColor=000000&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzOTMgNDAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTgyLjY2MiAwdjM2Ljg5NWgtNTkuMDMxdjgyLjczM2g1OS4wMzF2MzYuODkzSDI3LjQ4MnYtMzYuODkzaDU5LjAzVjM2Ljg5NWgtNTkuMDNWMHpNMzIxLjk0MSA4OS44NVYwaDM1LjM1NXYxNTYuNTIxaC0yNS43MTNsLTg2LjEzNy05MC4zNjR2OTAuMzY0aC0zNS4zNTVWMGgyNi4zNTV6Ii8%2BPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzE4LjU3MSAxODUuNzE0aDc0LjI4NlY0MDBIMFYxODUuNzE0aDI3Mi44NTd2LTQ3LjE0M3ptLTI5MS4wOSAyOC45Njl2MzcuMTE4aDU4LjEzN3YxMTkuNjI4aDM2Ljg5NVYyNTEuODAxaDU4LjU4NHYtMzcuMTE4em0xODIuNjEuMjI0djE1Ni41MjJoMzYuODk0VjMxMy41OWg3My4zNDF2NTcuODM5aDM3LjExOFYyMTQuOTA3aC0zNy4xMTh2NjEuNzg4aC03My4zNDF2LTYxLjc4OHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg%3D%3D&valueColor=000000&mode=light" alt="Made by Inth"></picture></a>
+</p>
+
+Developer-first CMP for Svelte: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization
+
+## Key Features
+
+- Works with Svelte 5
+- Headless and fully customizable UI components
+- Automatic GDPR compliance
+- Minimal configuration with TypeScript-first design
+- Comprehensive Consent Management Platform (CMP)
+- Flexible Cookie Banner and Preference Center components
+- Built-in internationalization support
+- Seamless consent storage and tracking
+
+## Prerequisites
+
+- Svelte 5 or later
+- Node.js 20.19 or later
+- A hosted [c15t instance](https://inth.com) (free sign-up) or [self-hosted deployment](https://c15t.com/docs/self-host/v2)
+
+## Quick Start
+
+Easiest setup with @c15t/cli:
+
+```bash
+# Set up c15t in your project
+pnpm dlx @c15t/cli setup
+# Alternatives:
+# npx @c15t/cli setup
+# bunx --bun @c15t/cli setup
+```
+
+The CLI will:
+
+- Install necessary packages
+- Configure your c15t instance
+- Set up environment variables
+- Add consent management components to your app
+
+## Manual Installation
+
+```bash
+pnpm add @c15t/svelte
+```
+
+To manually install, follow the guide in our [docs – manual setup](https://c15t.com/docs/frameworks/svelte/quickstart#manual-setup).
+
+## Usage
+
+1. Wrap your app with `ConsentManagerProvider`
+2. Add `ConsentBanner` and `ConsentDialog` near the root
+3. Customise styling and behaviour to fit your app
+4. For full implementation details, see the [Svelte quickstart docs](https://c15t.com/docs/frameworks/svelte/quickstart)
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import { ConsentManagerProvider, ConsentBanner, ConsentDialog } from '@c15t/svelte'
+  import '../app.css'
+
+  let { children } = $props()
+</script>
+
+<ConsentManagerProvider
+  mode="hosted"
+  backendURL="https://your-instance.c15t.dev"
+  consentCategories={['necessary', 'measurement', 'marketing']}
+>
+  {@render children()}
+  <ConsentBanner />
+  <ConsentDialog />
+</ConsentManagerProvider>
+```
+
+Import `@c15t/svelte/styles.css` once from your global CSS, such as SvelteKit's `src/app.css`.
+
+## Documentation
+
+For further information, guides, and examples visit the [reference documentation](https://c15t.com/docs/frameworks/svelte/quickstart).
+
+## Support
+
+- Join our [Discord community](https://c15t.link/discord)
+- Open an issue on our [GitHub repository](https://github.com/c15t/c15t/issues)
+- Visit [inth.com](https://inth.com) and use the chat widget
+- Contact our support team via email [support@inth.com](mailto:support@inth.com)
+
+## Contributing
+
+- We're open to all community contributions.
+- Read our [Contribution Guidelines](https://c15t.com/docs/oss/contributing)
+- Review our [Code of Conduct](https://c15t.com/docs/oss/code-of-conduct)
+- Fork the repository
+- Create a new branch for your feature
+- Submit a pull request
+- **All contributions, big or small, are welcome and appreciated.**
+
+## Security
+
+If you believe you have found a security vulnerability in c15t, we encourage you to **_responsibly disclose this and NOT open a public issue_**. We will investigate all legitimate reports.
+
+Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our open-source software. To do this, please visit [https://github.com/c15t/c15t/security](https://github.com/c15t/c15t/security) and click the "Report a vulnerability" button.
+
+### Security Policy
+
+- Please do not share security vulnerabilities in public forums, issues, or pull requests
+- Provide detailed information about the potential vulnerability
+- Allow reasonable time for us to address the issue before any public disclosure
+- We are committed to addressing security concerns promptly and transparently
+
+## License
+
+[Apache License 2.0](https://github.com/c15t/c15t/blob/main/LICENSE.md)
+
+---
+
+**Built by [Inth](https://inth.com?utm_source=npm&utm_medium=readme&utm_campaign=oss_readme&utm_content=%40c15t%2Fsvelte)**

package/SKILL.md

@@ -0,0 +1,14 @@
+---
+name: c15t-svelte-docs
+description: Read and search the @c15t/svelte documentation. Use when working with @c15t/svelte — its setup, configuration, API, and behavior.
+metadata:
+  source: leadtype
+---
+# @c15t/svelte documentation
+
+Svelte and SvelteKit v3 providers, request loading and static hosting with Inth.
+
+To work with @c15t/svelte, read its bundled docs — they ship with the package and are version-matched to the installed code:
+
+- Start with `./AGENTS.md`; it links every per-topic Markdown file under `./docs/`.
+- Prefer these local files over fetching anything over the network.

package/dist/actions/focus-trap.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Svelte action that traps keyboard focus within a container.
+ * Wraps @c15t/ui's framework-agnostic setupFocusTrap.
+ */
+export declare const focusTrap: (node: HTMLElement, enabled?: boolean) => {
+    destroy(): void;
+    update(newEnabled: boolean): void;
+};

package/dist/actions/focus-trap.js

@@ -0,0 +1,23 @@
+import { setupFocusTrap } from '@c15t/ui/utils';
+/**
+ * Svelte action that traps keyboard focus within a container.
+ * Wraps @c15t/ui's framework-agnostic setupFocusTrap.
+ */
+export const focusTrap = function focusTrap(node, enabled = true) {
+    let cleanup;
+    if (enabled) {
+        cleanup = setupFocusTrap(node);
+    }
+    return {
+        destroy() {
+            cleanup?.();
+        },
+        update(newEnabled) {
+            cleanup?.();
+            cleanup = undefined;
+            if (newEnabled) {
+                cleanup = setupFocusTrap(node);
+            }
+        },
+    };
+};

package/dist/actions/portal.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Svelte action that teleports an element to a target container.
+ * Used for rendering modals, banners, and overlays at the document body level.
+ */
+export declare const portal: (node: HTMLElement, target?: HTMLElement | string) => {
+    destroy(): void;
+    update(newTarget: HTMLElement | string): void;
+};

package/dist/actions/portal.js

@@ -0,0 +1,39 @@
+/**
+ * Svelte action that teleports an element to a target container.
+ * Used for rendering modals, banners, and overlays at the document body level.
+ */
+export const portal = function portal(node, target = typeof document === 'undefined'
+    ? null
+    : document.body) {
+    const resolve = function resolve(t) {
+        return typeof t === 'string' ? document.querySelector(t) : t;
+    };
+    let targetEl = resolve(target);
+    if (targetEl) {
+        targetEl.appendChild(node);
+    }
+    else {
+        // oxlint-disable-next-line no-lonely-if -- Preserve established branch order and control flow.
+        if (typeof process === 'undefined' ||
+            process.env?.NODE_ENV !== 'production') {
+            console.warn(`[c15t/portal] Target element not found: ${target}`);
+        }
+    }
+    return {
+        destroy() {
+            node.remove();
+        },
+        update(newTarget) {
+            const newTargetEl = resolve(newTarget);
+            if (!newTargetEl) {
+                if (typeof process === 'undefined' ||
+                    process.env?.NODE_ENV !== 'production') {
+                    console.warn(`[c15t/portal] Target element not found: ${newTarget}`);
+                }
+                return;
+            }
+            newTargetEl.appendChild(node);
+            targetEl = newTargetEl;
+        },
+    };
+};

package/dist/actions/scroll-lock.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Svelte action that locks document scrolling when enabled.
+ * Wraps @c15t/ui's framework-agnostic setupScrollLock.
+ */
+export declare const scrollLock: (_node: HTMLElement, enabled?: boolean) => {
+    destroy(): void;
+    update(newEnabled: boolean): void;
+};

package/dist/actions/scroll-lock.js

@@ -0,0 +1,23 @@
+import { setupScrollLock } from '@c15t/ui/utils';
+/**
+ * Svelte action that locks document scrolling when enabled.
+ * Wraps @c15t/ui's framework-agnostic setupScrollLock.
+ */
+export const scrollLock = function scrollLock(_node, enabled = true) {
+    let cleanup;
+    if (enabled) {
+        cleanup = setupScrollLock();
+    }
+    return {
+        destroy() {
+            cleanup?.();
+        },
+        update(newEnabled) {
+            cleanup?.();
+            cleanup = undefined;
+            if (newEnabled) {
+                cleanup = setupScrollLock();
+            }
+        },
+    };
+};

package/dist/components/action-button.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { AllConsentNames } from '@c15t/core';
+	import buttonStyles from '@c15t/ui/styles/components/button';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	import { getConsentContext, getThemeContext } from '../context.svelte';
+	import { resolveComponentStyles } from '../utils';
+
+	let {
+		action,
+		variant = 'neutral',
+		mode = 'stroke',
+		size = 'small',
+		children,
+		onclick,
+		closeConsentBanner = false,
+		closeConsentDialog = false,
+		category,
+		noStyle: localNoStyle,
+		class: className,
+		...restProps
+	}: Omit<HTMLButtonAttributes, 'class'> & {
+		action:
+			| 'accept-consent'
+			| 'reject-consent'
+			| 'custom-consent'
+			| 'dismiss-notice'
+			| 'open-consent-dialog'
+			| 'set-consent';
+		variant?: 'primary' | 'neutral';
+		mode?: 'filled' | 'stroke' | 'lighter' | 'ghost';
+		size?: 'medium' | 'small' | 'xsmall' | 'xxsmall';
+		children?: Snippet;
+		closeConsentBanner?: boolean;
+		closeConsentDialog?: boolean;
+		category?: AllConsentNames;
+		noStyle?: boolean;
+		class?: string;
+	} = $props();
+
+	const consent = getConsentContext();
+	const theme = getThemeContext();
+
+	const noStyle = $derived(localNoStyle ?? theme.noStyle ?? false);
+
+	const defaultThemeKey = $derived(
+		variant === 'primary'
+			? ('buttonPrimary' as const)
+			: ('buttonSecondary' as const)
+	);
+
+	const variantClasses = $derived(noStyle ? '' : buttonStyles.button);
+
+	const buttonStyle = $derived(
+		resolveComponentStyles(
+			defaultThemeKey,
+			theme.theme,
+			{ className, noStyle },
+			noStyle
+		)
+	);
+
+	const handleClick = async function handleClick(
+		e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }
+	) {
+		onclick?.(e);
+		if (e.defaultPrevented) {
+			return;
+		}
+		const { state } = consent;
+		switch (action) {
+			case 'accept-consent':
+				await state.saveConsents('all');
+				return;
+			case 'reject-consent':
+				await state.saveConsents('necessary');
+				return;
+			case 'custom-consent':
+				await state.saveConsents('custom');
+				return;
+			case 'dismiss-notice':
+				await state.dismissNotice();
+				break;
+			case 'open-consent-dialog':
+				state.setActiveUI('dialog');
+				return;
+			case 'set-consent':
+				if (category) {
+					state.setSelectedConsent(category, true);
+				}
+				return;
+			default:
+				return;
+		}
+		if (closeConsentBanner || closeConsentDialog) {
+			state.setActiveUI('none');
+		}
+	};
+</script>
+
+<button
+	type="button"
+	class={[variantClasses, buttonStyle.className].filter(Boolean).join(' ')}
+	data-variant={noStyle ? undefined : variant}
+	data-mode={noStyle ? undefined : mode}
+	data-size={noStyle ? undefined : size}
+	style={buttonStyle.style
+		? Object.entries(buttonStyle.style)
+				.map(([k, v]) => `${k}:${v}`)
+				.join(';')
+		: undefined}
+	{...restProps}
+	onclick={handleClick}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</button>

package/dist/components/action-button.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { AllConsentNames } from '@c15t/core';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLButtonAttributes, 'class'> & {
+    action: 'accept-consent' | 'reject-consent' | 'custom-consent' | 'dismiss-notice' | 'open-consent-dialog' | 'set-consent';
+    variant?: 'primary' | 'neutral';
+    mode?: 'filled' | 'stroke' | 'lighter' | 'ghost';
+    size?: 'medium' | 'small' | 'xsmall' | 'xxsmall';
+    children?: Snippet;
+    closeConsentBanner?: boolean;
+    closeConsentDialog?: boolean;
+    category?: AllConsentNames;
+    noStyle?: boolean;
+    class?: string;
+};
+declare const ActionButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ActionButton = ReturnType<typeof ActionButton>;
+export default ActionButton;

package/dist/components/branding.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { defaultTranslationConfig } from '@c15t/core';
+	import styles from '@c15t/ui/styles/components/branding';
+	import { resolveTranslations } from '@c15t/ui/utils';
+	import { onMount } from 'svelte';
+
+	import { getConsentContext, getThemeContext } from '../context.svelte';
+	import { resolveComponentStyles } from '../utils';
+	import C15TIconOnly from './icons/c15-t-icon-only.svelte';
+	import InthLogo from './icons/inth-logo.svelte';
+
+	type ResolvedBranding = 'c15t' | 'inth' | 'none';
+	type BrandingVariant = 'footer' | 'dialog-tag' | 'banner-tag';
+	type BrandingThemeKey =
+		| 'consentBannerTag'
+		| 'consentDialogTag'
+		| 'consentWidgetTag'
+		| 'iabConsentBannerTag'
+		| 'iabConsentDialogTag';
+
+	let {
+		hideBranding = false,
+		noStyle: localNoStyle,
+		variant = 'footer',
+		themeKey,
+		class: className,
+		'data-testid': testId,
+	}: {
+		hideBranding?: boolean;
+		noStyle?: boolean;
+		variant?: BrandingVariant;
+		themeKey?: BrandingThemeKey;
+		class?: string;
+		'data-testid'?: string;
+	} = $props();
+
+	const consent = getConsentContext();
+	const theme = getThemeContext();
+
+	const noStyle = $derived(localNoStyle ?? theme.noStyle ?? false);
+	const branding = $derived(consent.state.branding);
+	const translations = $derived(
+		resolveTranslations(
+			consent.state.translationConfig,
+			defaultTranslationConfig
+		)
+	);
+
+	const resolveBranding = function resolveBranding(
+		value: string
+	): ResolvedBranding {
+		if (value === 'none') {
+			return 'none';
+		}
+
+		if (value === 'inth' || value === 'consent') {
+			return 'inth';
+		}
+
+		return 'c15t';
+	};
+
+	const resolvedBranding = $derived(resolveBranding(branding));
+	const showBranding = $derived(!hideBranding && resolvedBranding !== 'none');
+	let refHostname = $state('');
+	onMount(() => {
+		refHostname = window.location.hostname;
+	});
+	const refParam = $derived(refHostname ? `?ref=${refHostname}` : '');
+	const brandingHref = $derived(
+		resolvedBranding === 'inth'
+			? `https://inth.com${refParam}`
+			: `https://c15t.com${refParam}`
+	);
+
+	const baseClassName = $derived(
+		[
+			styles.branding,
+			variant === 'footer' ? '' : styles.brandingTag,
+			variant === 'dialog-tag' ? styles.brandingTagDialog : '',
+			variant === 'banner-tag' ? styles.brandingTagBanner : '',
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const brandingStyle = $derived(
+		resolveComponentStyles(
+			themeKey ?? 'consentDialogTag',
+			theme.theme,
+			{
+				baseClassName,
+				className,
+			},
+			noStyle
+		)
+	);
+</script>
+
+{#if showBranding}
+	<!-- No `dir` here: the copy follows the page direction and only the
+	     wordmark below is pinned to LTR. -->
+	<a
+		class={brandingStyle.className || ''}
+		href={brandingHref}
+		data-branding={resolvedBranding}
+		data-variant={variant}
+		data-testid={testId}
+	>
+		<span
+			class={styles.brandingContent || ''}
+			data-slot="tag-content"
+		>
+			<span class={styles.brandingCopy || ''}>
+				<span class={styles.brandingText || ''}
+					>{translations.common.securedBy}</span
+				>
+			</span>
+			{#if resolvedBranding === 'inth'}
+				<span
+					dir="ltr"
+					class={`${styles.brandingWordmark || ''} ${styles.brandingInth || ''}`}
+				>
+					<InthLogo aria-hidden={true} />
+				</span>
+			{:else}
+				<span
+					dir="ltr"
+					class={`${styles.brandingWordmark || ''} ${styles.brandingC15T || ''}`}
+				>
+					<span class={styles.brandingC15TMark || ''}>
+						<C15TIconOnly aria-hidden={true} />
+					</span>
+					<span class={styles.brandingWordmarkLabel || ''}>c15t</span>
+				</span>
+			{/if}
+		</span>
+	</a>
+{/if}

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

@@ -0,0 +1,13 @@
+type BrandingVariant = 'footer' | 'dialog-tag' | 'banner-tag';
+type BrandingThemeKey = 'consentBannerTag' | 'consentDialogTag' | 'consentWidgetTag' | 'iabConsentBannerTag' | 'iabConsentDialogTag';
+type $$ComponentProps = {
+    hideBranding?: boolean;
+    noStyle?: boolean;
+    variant?: BrandingVariant;
+    themeKey?: BrandingThemeKey;
+    class?: string;
+    'data-testid'?: string;
+};
+declare const Branding: import("svelte").Component<$$ComponentProps, {}, "">;
+type Branding = ReturnType<typeof Branding>;
+export default Branding;