@c15t/astro 3.0.0-alpha.0

package/docs/upgrade-v3.md

@@ -0,0 +1,334 @@
+---
+title: Upgrade to v3 policies
+description: Migrate policy configuration, consent records, callbacks, and
+  custom transports to the v3 policy system.
+group: reference
+---
+
+## Start with a policy rule
+
+```ts
+import { policyRulePresets } from '@c15t/schema';
+import { offline } from '@c15t/react';
+
+const mode = offline({
+	policyRules: [policyRulePresets.europeOptIn()],
+});
+```
+
+Pass `mode` to `ConsentProvider`. For a backend integration, configure
+`policyRules` on the backend and use `hosted({ url })` in the provider. Follow the
+[React quickstart](https://c15t.com/docs/frameworks/react/quickstart),
+[Next.js quickstart](https://c15t.com/docs/frameworks/next/quickstart), or
+[JavaScript quickstart](https://c15t.com/docs/frameworks/javascript/quickstart) for a complete
+integration.
+
+The CLI no longer offers `offline-add-policy-packs`, which generated v2
+configuration. For offline integrations, configure `offline({ policyRules })`
+as shown above.
+
+Replace legacy `policyPacks` and nested `consent` configuration with rules:
+
+```ts
+import type { PolicyRule } from '@c15t/schema';
+
+const policyRules = [
+	{
+		id: 'default-opt-in',
+		match: { fallback: true },
+		model: 'opt-in',
+		prompt: 'choice',
+		categories: ['measurement', 'marketing'],
+		scopeMode: 'strict',
+	},
+] satisfies PolicyRule[];
+```
+
+`model` controls permission defaults. `prompt` controls whether the visitor must
+make a choice, dismiss a notice, or see no prompt. Opt-in and IAB models require
+`prompt: 'choice'`. Opt-out supports `choice`, `notice`, and `none`. The `none`
+model permits optional categories in scope, allows only `prompt: 'none'`, owes
+no rights, and renders no consent UI. v2's `none` model maps to it directly.
+
+When `categories` selects only some optional categories, you must set
+`scopeMode` explicitly. A strict scope blocks categories outside the rule. A permissive scope allows
+those categories unless another restriction applies. An omitted scope, `['*']`,
+or a list containing only `necessary` expands to the default optional categories.
+`necessary` is always permitted.
+
+`offline()` without `policyRules` resolves `recommendedPolicyRules()`, whose
+Europe rule also matches a visitor with no country. A known US country with a
+missing state uses US opt-out with GPC and persistent preferences; a missing
+Canadian province stays strict opt-in. The last rule is `none` for other known
+unmatched locations. Resolution exposes `matched`, `no-match`,
+`unconfigured`, or `failed`; while nothing has matched, optional categories stay
+denied and no consent surface renders. A missing or malformed policy never grants
+optional permissions by itself.
+
+## Read the state you need
+
+| Purpose                                         | Snapshot field         | React hook                              |
+| ----------------------------------------------- | ---------------------- | --------------------------------------- |
+| Gate scripts and optional features              | `effectivePermissions` | `useConsent(category)`, `useConsents()` |
+| Inspect recorded choices and confirmation times | `explicitChoice`       | `useExplicitChoice()`                   |
+| Decide whether to prompt                        | `promptRequirement`    | `usePromptRequirement()`                |
+| Inspect the resolved rule                       | `policyRule`           | `usePolicyRule()`                       |
+| Inspect matching or failure                     | `resolution`           | `usePolicyResolution()`                 |
+
+An effective permission is not evidence of a grant. Under an opt-out rule it can
+be true before a visitor acts. A notice dismissal updates `noticeDismissal` and
+does not record consent. Global Privacy Control updates privacy signals and
+configured opt-out directives without turning a browser signal into a choice.
+
+## Replace choice callbacks
+
+```tsx
+<ConsentProvider
+	options={{
+		mode,
+		callbacks: {
+			onChoiceRecorded(event) {
+				console.log('Visitor recorded a choice', event);
+			},
+			onPermissionsChanged(event) {
+				console.log('Effective permissions changed', event);
+			},
+		},
+	}}
+>
+	{children}
+</ConsentProvider>
+```
+
+Replace `onConsentSet` with `onChoiceRecorded` for explicit accept, reject, or
+save actions. Use `onPermissionsChanged` for permission changes caused by a
+choice, expiry, policy update, or privacy signal. Provider callbacks no longer
+include `onBannerFetched`; use the resolved policy and pending state to render
+loading UI.
+
+Only `kernel.commands.save()` creates an explicit choice. `save('all')` accepts,
+`save('none')` rejects, and `save({ marketing: false })` confirms only marketing.
+A partial save keeps the other categories' confirmation times. Use
+`commands.dismissNotice()` for the notice action and `kernel.hydrate()` to apply
+validated records without recording an action.
+
+## Keep existing storage
+
+The reader accepts valid v2 storage and translates it into per-category receipts.
+It does not rewrite storage on startup. Existing denials continue to restrict
+permissions; expired or incompatible positive receipts cannot restore grants.
+The next explicit action writes the v3 record. Notice dismissal and privacy
+opt-out directives have separate records.
+
+Pass server-prepared `initialRecords`, `initialPolicyResolution`, and `now`
+through the adapter's prefetch configuration. Do not rebuild consent from a
+boolean `hasConsented` or copy effective permissions into explicit choice records.
+Pending prefetch results cannot restore records after a clear or overwrite a
+newer choice.
+
+## Update custom transports and backend clients
+
+Use `KernelTransport` from `@c15t/core/transports`. Init returns a versioned
+`policyResolution` with a matched rule and fingerprints, or an explicit
+non-matched outcome. Use `mapInitOutputToInitResponse` for an HTTP init payload.
+Do not return legacy `policy` or `policyDecision` fields.
+
+Save requests contain the explicit choice and the categories confirmed by this
+action. Return a `SaveResult` with `ok`; optional identity and record methods
+must preserve the same receipt format. Forward the policy contract headers when
+implementing an HTTP proxy. Keep client, schema, backend, and framework adapters
+on compatible v3 versions.
+
+Use the supplied hosted or manifest transports to capture policy evidence for
+saves and retries. They preserve the action's policy, location, language, and
+privacy signal inputs. A stale policy assertion is an error; it must not silently
+save under a different rule. See the
+[backend endpoint reference](https://c15t.com/docs/self-host/api/endpoints) for wire fields.
+
+## Shared runtime ownership
+
+Astro and SvelteKit can create a runtime outside a component tree with
+`createConsentRuntime` from `@c15t/core/runtime`. Pass that runtime to a
+framework provider with its `runtime` prop. The owner calls `start()` after
+mount and `dispose()` when the page no longer needs it. Borrowing providers
+subscribe to the kernel and render UI without initializing or disposing it.
+
+Runtime construction preserves the prepared server snapshot. Storage reads,
+privacy-signal activation and script loading begin on `start()`. Pass server
+records through `prefetch.initialRecords` with their evaluation time to keep
+the first browser render consistent with the server. `runtime.clearRecords()`
+clears both persisted and in-memory records.
+
+Runtime callbacks use `onChoiceRecorded`, `onPermissionsChanged` and
+`onError`. Hydrating records does not report a new visitor choice.
+
+Astro's serializable offline descriptor accepts `policyRules`, just like the
+other adapters' offline factories. Configure a preset or explicit rules;
+omitting them keeps the conservative fallback.
+
+## Presentation corrections
+
+Use `blocking` for backdrop, scroll locking and focus trapping together.
+Choice banners default to non-blocking, choice walls always block, and notices
+never block. A notice configured as a wall falls back to a floating card.
+Preferences remain centered; `variant` and `position` apply only to prompts.
+
+Replace reads of `uncoveredRights` with `preferenceControls`. The latter is a
+list of additional preferences buttons recommended for the stock UI. It does
+not verify disclosure or persistent access to policy rights.
+
+Notice acknowledgement uses `common.acknowledge`, falling back to
+`common.dismiss` for older translation bundles. It does not record a choice.
+
+## Astro notice acknowledgement
+
+```astro
+---
+import ConsentBanner from '@c15t/astro/components/consent-banner.astro';
+---
+
+<ConsentBanner dismissButtonText="Got it" />
+```
+
+Astro's `ConsentBanner` accepts `dismissButtonText` as an optional string. It
+labels the notice acknowledgement button, which defaults to
+`common.acknowledge` and falls back to `common.dismiss` in older translation
+bundles. Acknowledging a notice preserves the visitor's consent choices.
+
+## IAB blocking behavior
+
+IAB banners and dialogs use the same `presentation.prompt.blocking` and
+`presentation.preferences.blocking` settings as the other consent components.
+A blocking surface shows a backdrop, traps focus and locks page scrolling.
+Explicit `blocking` values take precedence over deprecated `scrollLock` and
+`trapFocus` options. IAB components stay hidden without a matched policy,
+including when a dialog receives `open={true}`.
+
+The React consent dialog still blocks pointer interaction with the page when
+`blocking` is true and you hide its backdrop with `overlay={false}`.
+
+Legacy prompt options now control the whole blocking behavior. For example,
+`scrollLock: true` alone enables a backdrop and focus trapping as well as
+scroll locking. Set `blocking: false` explicitly for a non-modal banner.
+
+Custom dialog backdrops follow the same rule. A dialog resolved as non-blocking
+omits both the default backdrop and a supplied `overlay`. To retain a custom
+backdrop when migrating from `trapFocus: false`, set
+`presentation.preferences.blocking: true` and keep your `overlay` prop.
+
+## Next.js and TanStack Start renames
+
+These names changed without deprecated aliases. `defineConsentConfig`,
+`ConsentConfig` (the URL config) and `ConsentProvider` from `@c15t/react` are
+unchanged.
+
+Next.js (`c15t/next`, `c15t/next/server`, `c15t/next/pages`):
+
+| v2                                                                                            | v3                                                         |
+| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| `ConsentBoundary`                                                                             | `ConsentRoot`                                              |
+| `ConsentBoundaryProps`                                                                        | `ConsentRootProps`                                         |
+| `config={initialConsent}` (the visitor's resolved state)                                      | `state={...}`                                              |
+| `consent={consentConfig}` (the `defineConsentConfig` result)                                  | `config={consentConfig}`                                   |
+| `prefetchInitialConsent(options)`                                                             | `resolveConsent(options)` with `config` or `backendURL`    |
+| `readInitialConsentConfig(options)`                                                           | `resolveConsent(options)` without `config` or `backendURL` |
+| `InitialConsentConfig`, and `KernelConfig` where it named the returned value                  | `ConsentState`                                             |
+| `PrefetchInitialConsentOptions`                                                               | `ResolveConsentOptions`                                    |
+| `ReadInitialConsentConfigOptions`                                                             | `ConsentRequestOptions`                                    |
+| Pages Router `readInitialConsentConfig(req, opts)` and `prefetchInitialConsent({ req, ... })` | `resolveConsent({ req, ... })`                             |
+
+TanStack Start (`c15t/tanstack-start`, `c15t/tanstack-start/server`):
+
+| v2                                    | v3                                             |
+| ------------------------------------- | ---------------------------------------------- |
+| `ConsentBoundary`                     | `ConsentRoot`                                  |
+| `config={config}`                     | `state={state}`                                |
+| `ConsentConfig` (the returned state)  | `ConsentState`                                 |
+| `prefetchInitialConsent`              | `resolveConsent(options)` with `backendURL`    |
+| `readInitialConsentConfig`            | `resolveConsent(options)` without `backendURL` |
+| `createConsentConfigHandler(options)` | `createConsentStateHandler(options)`           |
+| `mergeInitIntoConsentConfig`          | `mergeInitIntoConsentState`                    |
+
+`consentLoaderOptions`, `backendURL`, `initRoute` and `DEFAULT_INIT_ROUTE` are
+unchanged.
+
+## Next.js RSC banner removal
+
+The `@c15t/nextjs/rsc` entry (`c15t/next/rsc`) and its `RscConsentBanner`,
+`RscBannerGate` and `RscBannerActions` exports are gone. Imports of that
+entry now fail to resolve. Use the regular banner for server rendering.
+The retained benchmark results showed slightly faster banner visibility and
+interaction for the experimental shell, so this removal should not be read
+as a performance improvement.
+
+Replace `<RscConsentBanner config={config} />` with `<ConsentBanner />` inside
+the same `ConsentRoot`, importing it from `c15t/next` when you use the
+umbrella package or from `@c15t/nextjs` when you depend on the scoped package
+directly. With an awaited `resolveConsent` result, the server renders
+the banner into the response, which is what the RSC variant was for. Move
+`presentation` to `options.presentation` on `ConsentRoot`.
+
+Two defaults differ from the removed shell. It rendered no branding link, so
+pass `hideBranding` to keep that. It also styled only its root and action row
+(through the stock `ConsentBanner.Root` and `PolicyActions`) and left the
+card, title, description, footer and buttons without base classes, whereas
+`ConsentBanner` merges the stock styles into every part. If that changes a
+custom layout, do not reach for `noStyle` on the whole banner, which also
+drops the root positioning and action-row layout the old shell kept; compose
+the compound parts instead and pass `noStyle` only to the parts you styled
+yourself.
+
+`ConsentBanner` has no `classNames` or `children` props. Move each legacy
+`classNames` key to the `ConsentRoot` `options.components` slots, which take
+`{ className }`:
+
+| `classNames` key                                                   | Replacement                                                                                                                                                                                                           |
+| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `root`, `card`, `title`, `footer`                                  | `components.banner.root`, `.card`, `.title`, `.footer`                                                                                                                                                                |
+| `description`                                                      | `components.description.banner`                                                                                                                                                                                       |
+| `rights`, `rightLink`                                              | `components.banner.rights`, `components.banner.rightLink`                                                                                                                                                             |
+| `acceptButton`, `rejectButton`, `customizeButton`, `dismissButton` | No per-button slot. Use `components.button.primary` / `.secondary` for shared styles, or target `[data-action="accept"]`, `[data-action="reject"]`, `[data-action="customize"]` and `[data-action="dismiss"]` in CSS. |
+
+Custom `children`, and any direct use of `RscBannerGate` or
+`RscBannerActions`, map to the compound parts of `ConsentBanner` in a Client
+Component. `RscBannerGate` becomes `ConsentBanner.Root`, which mounts only
+while the policy owes a prompt and reopens on expiry. Remove the gate
+`prompt` and `model` props; the root derives `data-prompt` and `data-model`
+from the `ConsentRoot` policy. Rename `title` to `aria-label` to preserve its
+accessible label. Keep `children`, `className`, `variant`, `position` and
+`blocking` on the root. Add `disableAnimation` and `trapFocus={false}` to
+retain the old gate defaults.
+
+`RscBannerActions`
+becomes `ConsentBanner.PolicyActions`, which renders the rights links and the
+action row the policy requires; `ConsentBanner.Rights`, `RightLink`, `Footer`,
+`FooterSubGroup` and the four buttons are available for finer control.
+`PolicyActions` takes none of the old `acceptLabel`, `rejectLabel`,
+`customizeLabel`, `dismissLabel`, `rightLabels` or `classNames` props: set
+labels through the provider `i18n` translation overrides (`common.acceptAll`,
+`common.rejectAll`, `common.customize`, `common.acknowledge`, `rights.*`), or
+render `ConsentBanner.AcceptButton` and the other buttons with your own
+children; `renderAction` on `PolicyActions` replaces one button; classes move
+to the `components` slots listed in the table. Place the former `children`
+inside `ConsentBanner.Card`:
+
+```tsx title="components/banner.tsx"
+'use client';
+
+import { ConsentBanner } from 'c15t/next';
+
+export function Banner() {
+  return (
+    <ConsentBanner.Root>
+      <ConsentBanner.Card>
+        <ConsentBanner.Header>
+          <ConsentBanner.Title />
+          <ConsentBanner.Description />
+        </ConsentBanner.Header>
+        <a href="/privacy">Privacy policy</a>
+        <ConsentBanner.PolicyActions />
+      </ConsentBanner.Card>
+    </ConsentBanner.Root>
+  );
+}
+```

package/package.json

@@ -0,0 +1,184 @@
+{
+	"name": "@c15t/astro",
+	"version": "3.0.0-alpha.0",
+	"description": "Astro consent management: server-rendered cookie banner, on-demand Svelte, React or Vue preference-centre islands, geo-aware middleware, and consent-gated script loading.",
+	"keywords": [
+		"astro",
+		"astro-integration",
+		"ccpa",
+		"cmp",
+		"consent",
+		"consent-banner",
+		"consent-management-platform",
+		"cookie-banner",
+		"gdpr",
+		"iab",
+		"islands",
+		"lgpd",
+		"privacy",
+		"react",
+		"ssr",
+		"svelte",
+		"tcf",
+		"typescript",
+		"vue"
+	],
+	"homepage": "https://c15t.com/docs/frameworks/astro/quickstart",
+	"bugs": {
+		"url": "https://github.com/c15t/c15t/issues"
+	},
+	"license": "Apache-2.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/c15t/c15t.git",
+		"directory": "packages/astro"
+	},
+	"files": [
+		"dist",
+		"dist-types",
+		"src/components",
+		"docs",
+		"AGENTS.md",
+		"SKILL.md"
+	],
+	"type": "module",
+	"sideEffects": [
+		"**/*.css"
+	],
+	"main": "./dist/index.js",
+	"types": "./dist-types/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist-types/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./client": {
+			"types": "./dist-types/client.d.ts",
+			"import": "./dist/client.js",
+			"default": "./dist/client.js"
+		},
+		"./middleware": {
+			"types": "./dist-types/middleware.d.ts",
+			"import": "./dist/middleware.js",
+			"default": "./dist/middleware.js"
+		},
+		"./server": {
+			"types": "./dist-types/server.d.ts",
+			"import": "./dist/server.js",
+			"default": "./dist/server.js"
+		},
+		"./api": {
+			"types": "./dist-types/api/index.d.ts",
+			"import": "./dist/api/index.js",
+			"default": "./dist/api/index.js"
+		},
+		"./ui/svelte": {
+			"types": "./dist-types/ui/svelte.d.ts",
+			"import": "./dist/ui/svelte.js",
+			"default": "./dist/ui/svelte.js"
+		},
+		"./ui/react": {
+			"types": "./dist-types/ui/react.d.ts",
+			"import": "./dist/ui/react.js",
+			"default": "./dist/ui/react.js"
+		},
+		"./ui/vue": {
+			"types": "./dist-types/ui/vue.d.ts",
+			"import": "./dist/ui/vue.js",
+			"default": "./dist/ui/vue.js"
+		},
+		"./components/*": "./src/components/*",
+		"./islands/*": {
+			"svelte": "./src/components/islands/*",
+			"default": "./src/components/islands/*"
+		},
+		"./api/init": {
+			"types": "./dist-types/api/init.d.ts",
+			"import": "./dist/api/init.js",
+			"default": "./dist/api/init.js"
+		},
+		"./api/manifest": {
+			"types": "./dist-types/api/manifest.d.ts",
+			"import": "./dist/api/manifest.js",
+			"default": "./dist/api/manifest.js"
+		},
+		"./styles.css": "./dist/styles.css",
+		"./package.json": "./package.json",
+		"./components/consent-banner-deferred.astro": "./src/components/prompt-deferred.astro",
+		"./components/consent-banner.astro": "./src/components/prompt.astro",
+		"./components/consent-dialog-trigger.astro": "./src/components/panel-trigger.astro",
+		"./components/consent-dialog.astro": "./src/components/panel.astro",
+		"./components/iab-consent-banner.astro": "./src/components/iab-prompt.astro",
+		"./components/iab-consent-dialog.astro": "./src/components/iab-panel.astro",
+		"./components/islands/consent-dialog-surface.svelte": "./src/components/islands/panel-surface.svelte",
+		"./islands/consent-dialog-surface.svelte": "./src/components/islands/panel-surface.svelte",
+		"./components/islands/consent-dialog-surface.tsx": "./src/components/islands/panel-surface.tsx",
+		"./islands/consent-dialog-surface.tsx": "./src/components/islands/panel-surface.tsx",
+		"./components/islands/consent-dialog-surface.vue": "./src/components/islands/panel-surface.vue",
+		"./islands/consent-dialog-surface.vue": "./src/components/islands/panel-surface.vue"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "rslib build && bun ../../scripts/normalize-dist-types.mjs",
+		"build:docs": "bun ../../scripts/generate-package-docs.ts @c15t/astro",
+		"check-types": "tsc --noEmit",
+		"dev": "sh -c 'rslib build --no-dts --no-clean && rslib build --watch --no-dts --no-clean'",
+		"fmt": "bun oxfmt .",
+		"lint": "bun oxlint ./src",
+		"prepack": "bun run build:docs && bun ../../scripts/verify-package-artifacts.ts",
+		"test": "vitest run",
+		"test:watch": "vitest"
+	},
+	"dependencies": {
+		"@c15t/core": "3.0.0-alpha.0",
+		"@c15t/iab": "3.0.0-alpha.0",
+		"@c15t/schema": "3.0.0-alpha.0",
+		"@c15t/svelte": "3.0.0-alpha.0",
+		"@c15t/translations": "3.0.0-alpha.0",
+		"@c15t/ui": "3.0.0-alpha.0"
+	},
+	"devDependencies": {
+		"@c15t/conformance": "0.0.1",
+		"@c15t/typescript-config": "0.0.1",
+		"@c15t/vitest-config": "1.0.0",
+		"astro": "^5.16.0",
+		"jsdom": "^25.0.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"svelte": "^5.0.0",
+		"typescript": "6.0.3",
+		"vue": "^3.5.0"
+	},
+	"peerDependencies": {
+		"@c15t/react": "^3.0.0-alpha.0",
+		"@c15t/vue": "^3.0.0-alpha.0",
+		"astro": "^5.0.0",
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0",
+		"svelte": "^5.0.0",
+		"vue": "^3.5.0"
+	},
+	"peerDependenciesMeta": {
+		"@c15t/react": {
+			"optional": true
+		},
+		"@c15t/vue": {
+			"optional": true
+		},
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		},
+		"svelte": {
+			"optional": true
+		},
+		"vue": {
+			"optional": true
+		}
+	}
+}

package/src/components/branding.astro

@@ -0,0 +1,152 @@
+---
+/**
+ * The "Secured by c15t" tag.
+ *
+ * Server-rendered with the same markup, classes and `data-testid` as the
+ * Svelte and React banners, so the shared stylesheet positions it
+ * identically and cross-framework tests compare like with like.
+ *
+ * Rendered by `<ConsentBanner />`; a site turns it off with
+ * `<ConsentBanner hideBranding />`. Which brand it shows comes from the
+ * consent snapshot, not from a prop.
+ */
+import type { ConsentSnapshot } from '@c15t/core';
+import styles from '@c15t/ui/styles/components/branding';
+
+type BrandingVariant = 'footer' | 'dialog-tag' | 'banner-tag';
+
+interface Props {
+	/** Render nothing. */
+	hide?: boolean;
+	/** Ship the DOM without the bundled stylesheet's class names. */
+	noStyle?: boolean;
+	/** Which surface the tag belongs to. */
+	variant?: BrandingVariant;
+	/** The brand the server resolved. */
+	branding: ConsentSnapshot['branding'];
+	/** "Secured by", already resolved from the translation bundle. */
+	securedBy: string;
+	/** The host to attribute the referral to. */
+	hostname?: string;
+	/** Test id, so each surface keeps its own. */
+	'data-testid'?: string;
+}
+
+const {
+	hide = false,
+	noStyle = false,
+	variant = 'banner-tag',
+	branding,
+	securedBy,
+	hostname,
+	'data-testid': testId,
+} = Astro.props;
+
+const resolveBranding = function resolveBranding(
+	value: ConsentSnapshot['branding']
+): 'c15t' | 'inth' | 'none' {
+	if (value === 'none') {
+		return 'none';
+	}
+	if (value === 'inth' || value === 'consent') {
+		return 'inth';
+	}
+	return 'c15t';
+};
+
+const resolved = resolveBranding(branding);
+const show = !hide && resolved !== 'none';
+const refParam = hostname ? `?ref=${hostname}` : '';
+const href =
+	resolved === 'inth'
+		? `https://inth.com${refParam}`
+		: `https://c15t.com${refParam}`;
+
+const className = noStyle
+	? ''
+	: [
+			styles.branding,
+			variant === 'footer' ? '' : styles.brandingTag,
+			variant === 'dialog-tag' ? styles.brandingTagDialog : '',
+			variant === 'banner-tag' ? styles.brandingTagBanner : '',
+		]
+			.filter(Boolean)
+			.join(' ');
+---
+
+{
+	show && (
+		<a
+			class={className}
+			data-branding={resolved}
+			data-testid={testId}
+			data-variant={variant}
+			href={href}
+		>
+			<span class={noStyle ? '' : styles.brandingContent} data-slot="tag-content">
+				<span class={noStyle ? '' : styles.brandingCopy}>
+					<span class={noStyle ? '' : styles.brandingText}>{securedBy}</span>
+				</span>
+				{resolved === 'inth' ? (
+					<span
+						class={
+							noStyle
+								? ''
+								: `${styles.brandingWordmark} ${styles.brandingInth}`
+						}
+						dir="ltr"
+					>
+						<svg
+							aria-hidden="true"
+							aria-labelledby="inth-logo"
+							fill="none"
+							viewBox="0 0 88 90"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<title id="inth-logo">INTH</title>
+							<path
+								d="M40.9164 0V8.26444H27.6933V26.7966H40.9164V35.0608H6.15594V26.7966H19.3788V8.26444H6.15594V0H40.9164Z"
+								fill="currentColor"
+							/>
+							<path
+								d="M72.1149 20.1264V0H80.0343V35.0608H74.2747L54.9798 14.8193V35.0608H47.0604V0H52.964L72.1149 20.1264Z"
+								fill="currentColor"
+							/>
+							<path
+								clip-rule="evenodd"
+								d="M71.36 41.6H88V89.6H0V41.6H61.12V31.04L71.36 41.6ZM6.15594 48.0891V56.4034H19.1784V83.2H27.4428V56.4034H40.5656V48.0891H6.15594ZM47.0603 48.1391V83.2H55.3247V70.2441H71.7531V83.2H80.0675V48.1391H71.7531V61.9797H55.3247V48.1391H47.0603Z"
+								fill="currentColor"
+								fill-rule="evenodd"
+							/>
+						</svg>
+					</span>
+				) : (
+					<span
+						class={
+							noStyle
+								? ''
+								: `${styles.brandingWordmark} ${styles.brandingC15T}`
+						}
+						dir="ltr"
+					>
+						<span class={noStyle ? '' : styles.brandingC15TMark}>
+							<svg
+								aria-hidden="true"
+								aria-labelledby="c15t-icon"
+								viewBox="0 0 446 445"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<title id="c15t-icon">c15t</title>
+								<path
+									d="M223.178.313c39.064 0 70.732 31.668 70.732 70.732-.001 39.064-31.668 70.731-70.732 70.731-12.181 0-23.642-3.079-33.649-8.502l-55.689 55.689a70.267 70.267 0 0 1 5.574 13.441h167.531c8.695-29.217 35.762-50.523 67.804-50.523 39.064 0 70.731 31.668 70.731 70.732s-31.668 70.732-70.731 70.732c-32.042 0-59.108-21.306-67.803-50.523H139.413a70.417 70.417 0 0 1-7.888 17.396l54.046 54.046c10.893-6.851 23.786-10.815 37.605-10.815 39.064 0 70.732 31.669 70.732 70.733 0 39.064-31.668 70.731-70.732 70.731s-70.732-31.667-70.732-70.731c0-10.518 2.296-20.499 6.414-29.471l-57.78-57.78c-8.972 4.117-18.952 6.414-29.47 6.414-39.063 0-70.731-31.668-70.732-70.732 0-39.064 31.669-70.732 70.733-70.732 12.18 0 23.642 3.079 33.649 8.502l55.688-55.688c-5.423-10.007-8.502-21.469-8.502-33.65 0-39.064 31.668-70.733 70.732-70.733Zm0 343.555c-16.742 0-30.314 13.572-30.314 30.314 0 16.741 13.572 30.313 30.314 30.313s30.314-13.572 30.314-30.313c0-16.742-13.572-30.314-30.314-30.314ZM71.611 192.299c-16.742 0-30.315 13.572-30.315 30.314s13.573 30.314 30.315 30.314c16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314Zm303.138 0c-16.729 0-30.294 13.551-30.315 30.275l.001.039-.001.038c.021 16.725 13.586 30.276 30.315 30.276 16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314ZM223.178 40.73c-16.742 0-30.314 13.573-30.314 30.315s13.573 30.313 30.314 30.313c16.742 0 30.313-13.572 30.314-30.313 0-16.742-13.572-30.314-30.314-30.315Z"
+									fill="currentColor"
+								/>
+							</svg>
+						</span>
+						<span class={noStyle ? '' : styles.brandingWordmarkLabel}>c15t</span>
+					</span>
+				)}
+			</span>
+		</a>
+	)
+}