@owlmeans/web-consent 0.1.18-rc.22 → 0.1.18-rc.24

package/README.md

@@ -6,7 +6,7 @@ This package ships embedded agent skills under `agent-meta/`. After installing y
 your project's skill store (`.agents/skills/`):
 
 ```sh
-npx @owlmeans/agent-skills@^0.1.18-rc.28
+npx @owlmeans/agent-skills@^0.1.18-rc.31
 ```
 
 The embedded files are version-matched to this package release. Do not edit them

package/agent-meta/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 2,
   "package": "@owlmeans/web-consent",
-  "version": "0.1.18-rc.22",
-  "generatedAt": "2026-09-17T08:16:11.231Z",
+  "version": "0.1.18-rc.24",
+  "generatedAt": "2026-09-21T21:54:22.962Z",
   "canonicalRepo": "https://github.com/owlmeans/common",
   "entries": [
     {

package/agent-meta/skills/web-consent/SKILL.md

@@ -8,7 +8,7 @@ user-invocable: false
 # @owlmeans/web-consent
 
 **Layer:** Web (React)
-**Install:** `"@owlmeans/web-consent": "^0.1.18-rc.22"` in `dependencies`
+**Install:** `"@owlmeans/web-consent": "^0.1.18-rc.24"` in `dependencies`
 
 The browser components of the consent set. The model — categories, storage, migration, the store,
 Consent Mode signalling — is `@owlmeans/consent`, and this package re-exports a **named selection**
@@ -41,7 +41,7 @@ components — see below.
 | `useConsent(opts?)` | This document's consent state and the actions over it (`UseConsentModel`) — **it also initialises the store on mount**, see below |
 | `useConsentCategory(key)` | Whether one category is granted, for a component gating a single thing |
 | `CookieConsentProps` / `CookiePolicyProps` / `ConsentLink` | The component props |
-| Re-exports from `@owlmeans/consent` | The complete list: `consentStore`, `openConsent`, `isConsented`, `readConsent`, `writeConsent`, `clearConsent`, `migrateConsent`, `applyConsent`, `pushConsentDefaults`, `consentBootstrapScript`, `consentDefaults`, `consentUpdate`, `gtagConsent`, `DEFAULT_CONSENT_CATEGORIES`, `DEFAULT_CONSENT_MESSAGES`, `defaultConsentTranslate`, `interpolate`, `CONSENT_KEY`, `CONSENT_COOKIE_DAYS`, `CONSENT_SCHEMA_VERSION`, `CONSENT_LOCALES`, `CONSENT_ESSENTIAL` / `CONSENT_ANALYTICS` / `CONSENT_MARKETING`, and the types `ConsentCategory`, `ConsentOptions`, `ConsentReason`, `ConsentRecord`, `ConsentSignal`, `ConsentState`, `ConsentStore`, `ConsentLocale` |
+| Re-exports from `@owlmeans/consent` | The complete list: `consentStore`, `openConsent`, `isConsented`, `readConsent`, `writeConsent`, `clearConsent`, `migrateConsent`, `applyConsent`, `pushConsentDefaults`, `consentBootstrapScript`, `consentDefaults`, `consentUpdate`, `gtagConsent`, `DEFAULT_CONSENT_CATEGORIES`, `DEFAULT_CONSENT_MESSAGES`, `defaultConsentTranslate`, `interpolate`, `CONSENT_KEY`, `CONSENT_COOKIE_DAYS`, `CONSENT_SCHEMA_VERSION`, `CONSENT_LOCALES`, `CONSENT_ESSENTIAL` / `CONSENT_ANALYTICS` / `CONSENT_MARKETING`, and the types `ConsentCategory`, `ConsentOptions`, `ConsentReason`, `ConsentRecord`, `ConsentService`, `ConsentSignal`, `ConsentState`, `ConsentStore`, `ConsentLocale` |
 
 ## Mounting the dialog
 
@@ -63,7 +63,7 @@ import { CookieConsent } from '@owlmeans/web-consent'
   goes for `storageKey`, `cookieDays` and `cookieDomain`.
 - `locale` picks the packaged language; leave it unset and English is used, so an app with a
   language of its own passes it (or mounts `PanelCookieConsent`, which does). A region tag is
-  reduced to its base (`pl-PL` → `pl`), and anything outside the seven falls back to English.
+  reduced to its base (`pl-PL` → `pl`), and anything outside `CONSENT_LOCALES` falls back to English.
 - `policyHref` is a plain string, so an app-resolved path, a framework route and a raw href all
   work — the component must not know how its host does routing.
 - `noReopenButton` hides the floating button for an app that offers a footer link instead; that link
@@ -72,8 +72,30 @@ import { CookieConsent } from '@owlmeans/web-consent'
   filled background, no border, no shadow, no hover-scale — `bg-transparent`, dimmed
   (`opacity-70`) at rest and picked out on hover/focus — because it sits on every page of a site
   for as long as a visitor stays and must read as a small fixture rather than compete with the
-  page's own controls. The pictogram itself stays at its original 20px (`h-5 w-5`); only the
-  chrome around it shrank. `[data-consent-reopen]` is still what any test or CSS override keys on.
+  page's own controls. The pictogram is 20px (`h-5 w-5`) inside an invisible 44px hit area
+  (`h-11 w-11`). `[data-consent-reopen]` is what any test or CSS override keys on.
+
+## The look — flat, from the host's tokens
+
+The dialog is the first thing every new visitor of a generated app sees, so it follows the flat
+rule those apps are held to: **no gradient, shadow, glow, glass or `backdrop-filter`** anywhere in
+it. Everything is a theme token, so light and dark follow the host:
+
+| Part | Classes |
+|---|---|
+| Overlay | `bg-black/70`, flat — no blur |
+| Card | `rounded-3xl border border-border bg-background text-foreground`, no shadow or ring |
+| Icon | `rounded-full bg-muted text-primary` |
+| Category row | `rounded-2xl border border-border`; *Required* is plain uppercase muted text, never a badge |
+| Switch | `bg-primary` on / `bg-muted-foreground/40` off, white knob; 44px hit area around the 24×44 track |
+| Accept | the one accent pill — `rounded-full bg-primary text-primary-foreground min-h-11` |
+| Save, policy *Manage preferences* | outlined pill — `rounded-full border-[1.5px] border-foreground bg-transparent`, `hover:bg-muted` |
+| Links | muted, underlined at rest, `min-h-11` |
+
+Every control shows a 3px `outline-ring` focus outline 3px off the element (`outline-3
+outline-offset-3`; the switch draws it on its track through `peer-focus-visible`). An outline, not
+a ring, so a host that zeroes shadows keeps it. Never reintroduce a decorative class here — the
+package tests fail on `bg-gradient`, `backdrop-`, `blur`, `shadow` or `ring-primary` in the dialog.
 - `silent` skips every `dataLayer` and global write. It is for tests and for an app that runs no
   tags at all.
 - The draft is **re-seeded from storage every time the dialog opens**, not from the last render — a
@@ -145,13 +167,35 @@ why it is generated rather than written: a hand-written policy drifts the first
 changes, and nobody notices because nobody reads it until it matters.
 
 ```tsx
-<CookiePolicy operator="Example Sp. z o.o." privacyHref="/legal/privacy" termsHref="/legal/terms" />
+import { googleTagServices } from '@owlmeans/web-gtm'
+
+<CookiePolicy
+  operator="Example Sp. z o.o." privacyHref="/legal/privacy" termsHref="/legal/terms"
+  services={googleTag !== '' ? googleTagServices(googleTag) : undefined}
+/>
 ```
 
 Everything OwlMeans cannot assert on the operator's behalf — who the controller is, the lawful
 basis, how to exercise rights — is deferred to those two links. It also renders a *Manage
 preferences* control, so the policy page is a way back into the decision.
 
+**`services`** (`ConsentService[]`, see the `consent` skill) discloses WHO receives data: each
+service is listed inside the item of the category whose `key` it names — name, provider, purpose,
+cookie names in `<code>`, and a link to the provider's privacy policy (new tab). A service whose
+category is not among `categories` goes into a trailing *Other services* item rather than being
+dropped. Without `services` the page renders exactly as it always has.
+
+The structure stays one `h1` and lists: categories are `li`s, a category's services are a nested
+`ul` named by `aria-label` (*Services — ‹category label›*), each service a `li` holding a `dl`.
+Never add headings for categories or services — they would skip a level under the `h1`. Test and
+CSS hooks: `[data-cookie-policy-category="<key>"]`, `[data-cookie-policy-services]`,
+`[data-cookie-policy-service]`, `[data-cookie-policy-other]`.
+
+The service labels (`policyProvider`, `policyPurpose`, `policyCookies`, `policyServicesOf`,
+`policyServicePrivacy`, `policyOtherServices`, `policyOtherServicesDesc`) go through `translate`
+with English defaults and are in the packaged bundle for every locale; the service's own `name`,
+`provider` and `purpose` are data and render as given.
+
 ## Tailwind — one `@source` line, pointing at `src`
 
 The components emit Tailwind classes that exist nowhere in the consumer's own sources, and
@@ -188,7 +232,13 @@ Describe a glob in words, or keep it out of the comment.
 ## i18n
 
 Given no `translate` prop, the components resolve every string through the packaged bundle for
-`locale` — seven languages, the same set the framework supports. **Once a `translate` prop is given,
+`locale` — every language in `CONSENT_LOCALES` (the framework's seven plus French). The bundle
+lives in `@owlmeans/consent` (`src/i18n/<locale>.json`); a new key goes into every one of them,
+and that package's tests fail on a missing key or a dropped `{{placeholder}}` in any locale.
+This package's `tests/bundle.spec.ts` reads every `t('…')` literal from the components, so a new
+string without an English bundle entry fails there. A JSON-only edit is not re-emitted by an
+incremental `tsc -b` — rebuild `@owlmeans/consent` with `tsc -b --force`, or consumers keep the old
+bundle from `build/i18n`. **Once a `translate` prop is given,
 the packaged bundle is not consulted at all**, so a wrapper that forwards a framework resolver alone
 renders the English default for every key the application has not overridden, in every language. The
 resolver must fall through to `defaultConsentTranslate(locale)` for the default — which is exactly
@@ -207,7 +257,8 @@ caller's, already resolved.
 
 - `consent` — the model: categories, `globalVar`, storage and migration, Consent Mode v2, the
   ordering rule. Read it before changing anything a category means
-- `web-gtm` — the head snippet that carries a stored decision to the tag manager
+- `web-gtm` — the head snippet that carries a stored decision to a Google tag, and
+  `googleTagServices(id)` for this page's `services`
 - `astro` — stamping that snippet from a static site's layout
 - `login-methods` / `login-plugins` — the sign-in precondition that raises this dialog with
   `reason: 'login'`

package/build/consent/component.d.ts

@@ -1,12 +1,4 @@
 import type { FC } from 'react';
 import type { CookieConsentProps } from '../types.js';
-/**
- * The cookie preferences dialog, and the button that brings it back.
- *
- * Deliberately built from raw elements rather than shadcn primitives. One of the three surfaces
- * this serves is an Astro island on a site that vendors its own component library, and requiring a
- * consumer to install a UI family in order to render a consent notice would put the notice out of
- * reach of the site that needs it most.
- */
 export declare const CookieConsent: FC<CookieConsentProps>;
 //# sourceMappingURL=component.d.ts.map

package/build/consent/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/consent/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAS/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkIhD,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/consent/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAS/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAkCrD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+HhD,CAAA"}

package/build/consent/component.js

@@ -12,7 +12,22 @@ import { ConsentToggle } from './toggle.js';
  * this serves is an Astro island on a site that vendors its own component library, and requiring a
  * consumer to install a UI family in order to render a consent notice would put the notice out of
  * reach of the site that needs it most.
+ *
+ * Flat by rule, because it is the first thing every new visitor of a generated app sees: the
+ * surface and every colour come from the host's theme tokens (ground, ink, muted, hairline, one
+ * accent), depth comes from a hairline border and the overlay alone, and nothing paints a
+ * gradient, a shadow, a glow or a `backdrop-filter`. The accept action is the one accent pill,
+ * the others are outlined pills; every control is at least 44px tall and shows a 3px focus ring.
+ */
+/**
+ * The focus ring every control here shows: 3px solid in the theme's ring colour, 3px off the
+ * element. An outline rather than a box-shadow ring, so it survives a host that zeroes shadows.
  */
+const FOCUS = 'focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-ring';
+/** A pill button: 44px tall at minimum, full width on a phone, sharing the row above that. */
+const PILL = cn('inline-flex min-h-11 flex-1 items-center justify-center rounded-full px-6 py-2.5 text-[15px] transition-colors motion-safe:active:scale-[0.98]', FOCUS);
+/** A text link: muted, underlined at rest (colour is never the only signal), 44px tall to tap. */
+const LINK = cn('inline-flex min-h-11 items-center font-semibold underline decoration-1 underline-offset-4 transition-colors hover:text-foreground hover:decoration-2', FOCUS);
 export const CookieConsent = props => {
     const categories = props.categories ?? DEFAULT_CONSENT_CATEGORIES;
     const t = props.translate ?? defaultConsentTranslate(props.locale);
@@ -49,8 +64,8 @@ export const CookieConsent = props => {
     // today. Saying so, and relabelling the primary action, is what makes the interruption make
     // sense rather than look like the page asking twice.
     const gated = consent.reason === 'login';
-    return _jsxs(_Fragment, { children: [consent.open && _jsx("div", { className: "fixed inset-0 z-[999998] flex items-center justify-center overflow-y-auto bg-black/70 px-4 py-6 backdrop-blur-md", "aria-modal": "true", role: "dialog", "aria-labelledby": "cc-title", "aria-describedby": "cc-desc", "data-consent-dialog": true, children: _jsxs("div", { className: cn('relative z-[999999] w-full max-w-lg rounded-2xl border border-border bg-popover/95 p-6 shadow-[0_25px_60px_-12px_rgba(0,0,0,0.5)] ring-1 ring-primary/20 backdrop-blur-xl sm:p-8', props.className), children: [_jsx("div", { className: "absolute inset-x-0 top-0 h-1 rounded-t-2xl bg-gradient-to-r from-primary to-secondary" }), _jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary", children: _jsx(Cookie, { className: "h-5 w-5", "aria-hidden": "true" }) }), _jsx("h2", { id: "cc-title", className: "text-xl font-bold text-popover-foreground sm:text-2xl", children: t('title', 'Cookie Preferences') })] }), _jsx("p", { id: "cc-desc", className: "mb-6 text-sm leading-relaxed text-muted-foreground", children: t('description', 'We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic.') }), _jsx("div", { className: "space-y-3", children: categories.map(category => _jsx(ConsentToggle, { id: `cc-${category.key}`, label: t(category.labelKey, category.key), description: t(category.descriptionKey, ''), checked: draft[category.key] === true, ...(category.required === true ? { required: true } : {}), requiredLabel: t('required', 'Required'), onChange: value => setDraft(current => ({ ...current, [category.key]: value })) }, category.key)) }), gated && _jsx("p", { role: "status", "data-consent-reason": true, className: "mt-4 text-sm text-popover-foreground", children: t('loginReason', 'Signing in stores a session cookie. Accept essential cookies to continue.') }), _jsxs("div", { className: "mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4", children: [_jsx("button", { type: "button", onClick: onSave, "data-consent-save": true, className: "flex-1 rounded-lg border border-border bg-transparent px-4 py-3 text-sm font-semibold text-popover-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: t('savePreferences', 'Save Preferences') }), _jsx("button", { type: "button", onClick: onAcceptAll, "data-consent-accept-all": true, className: "flex-1 rounded-lg bg-primary px-4 py-3 text-sm font-bold text-primary-foreground shadow-lg shadow-primary/25 transition-all hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: gated
+    return _jsxs(_Fragment, { children: [consent.open && _jsx("div", { className: "fixed inset-0 z-[999998] flex items-center justify-center overflow-y-auto bg-black/70 px-4 py-6", "aria-modal": "true", role: "dialog", "aria-labelledby": "cc-title", "aria-describedby": "cc-desc", "data-consent-dialog": true, children: _jsxs("div", { className: cn('relative z-[999999] w-full max-w-lg rounded-3xl border border-border bg-background p-6 text-foreground sm:p-8', props.className), children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted text-primary", children: _jsx(Cookie, { className: "h-5 w-5", "aria-hidden": "true" }) }), _jsx("h2", { id: "cc-title", className: "text-balance text-xl font-extrabold tracking-tight text-foreground sm:text-2xl", children: t('title', 'Cookie Preferences') })] }), _jsx("p", { id: "cc-desc", className: "mb-6 text-pretty text-sm leading-relaxed text-muted-foreground", children: t('description', 'We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic.') }), _jsx("div", { className: "space-y-3", children: categories.map(category => _jsx(ConsentToggle, { id: `cc-${category.key}`, label: t(category.labelKey, category.key), description: t(category.descriptionKey, ''), checked: draft[category.key] === true, ...(category.required === true ? { required: true } : {}), requiredLabel: t('required', 'Required'), onChange: value => setDraft(current => ({ ...current, [category.key]: value })) }, category.key)) }), gated && _jsx("p", { role: "status", "data-consent-reason": true, className: "mt-4 text-sm font-semibold text-foreground", children: t('loginReason', 'Signing in stores a session cookie. Accept essential cookies to continue.') }), _jsxs("div", { className: "mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4", children: [_jsx("button", { type: "button", onClick: onSave, "data-consent-save": true, className: cn(PILL, 'border-[1.5px] border-foreground bg-transparent font-semibold text-foreground hover:bg-muted'), children: t('savePreferences', 'Save Preferences') }), _jsx("button", { type: "button", onClick: onAcceptAll, "data-consent-accept-all": true, className: cn(PILL, 'bg-primary font-bold text-primary-foreground hover:bg-primary/90'), children: gated
                                         ? t('acceptAndContinue', 'Accept & continue')
-                                        : t('acceptAll', 'Accept All') })] }), (props.policyHref != null || props.links != null) && _jsxs("div", { className: "mt-4 flex flex-wrap justify-center gap-3 text-xs text-muted-foreground", children: [props.policyHref != null && _jsx("a", { href: props.policyHref, target: "_blank", rel: "noopener noreferrer", className: "underline underline-offset-2 transition-colors hover:text-popover-foreground", children: t('policyLink', 'Cookie Policy') }), props.links?.map(link => _jsx("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "underline underline-offset-2 transition-colors hover:text-popover-foreground", children: t(link.labelKey, link.defaultLabel) }, link.href))] })] }) }), props.noReopenButton !== true && consent.record != null && !consent.open && _jsx("button", { type: "button", onClick: () => consent.openDialog('reopen'), "aria-label": t('openPreferences', 'Cookie preferences'), "data-consent-reopen": true, className: "fixed bottom-1 left-1 z-[999997] inline-flex items-center justify-center rounded border-0 bg-transparent p-1.5 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(Cookie, { className: "h-5 w-5", "aria-hidden": "true" }) })] });
+                                        : t('acceptAll', 'Accept All') })] }), (props.policyHref != null || props.links != null) && _jsxs("div", { className: "mt-3 flex flex-wrap justify-center gap-x-4 text-[13px] text-muted-foreground", children: [props.policyHref != null && _jsx("a", { href: props.policyHref, target: "_blank", rel: "noopener noreferrer", className: LINK, children: t('policyLink', 'Cookie Policy') }), props.links?.map(link => _jsx("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: LINK, children: t(link.labelKey, link.defaultLabel) }, link.href))] })] }) }), props.noReopenButton !== true && consent.record != null && !consent.open && _jsx("button", { type: "button", onClick: () => consent.openDialog('reopen'), "aria-label": t('openPreferences', 'Cookie preferences'), "data-consent-reopen": true, className: cn('fixed bottom-1 left-1 z-[999997] inline-flex h-11 w-11 items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:text-primary focus-visible:opacity-100', FOCUS), children: _jsx(Cookie, { className: "h-5 w-5", "aria-hidden": "true" }) })] });
 };
 //# sourceMappingURL=component.js.map

package/build/consent/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/consent/component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/consent/component.tsx"],"names":[],"mappings":"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"}

package/build/consent/toggle.d.ts

@@ -9,5 +9,14 @@ export interface ConsentToggleProps {
     requiredLabel: string;
     onChange: (value: boolean) => void;
 }
+/**
+ * One category row: a hairline card with the label, the description and a switch.
+ *
+ * Flat like the dialog it sits in — no tinted fill, no shadow, no badge. `Required` is plain muted
+ * text beside the label, because a required category is disclosure, not a status to decorate. The
+ * switch's hit area is 44px square around the visible 24×44 track, and it shows the dialog's 3px
+ * focus ring when reached from the keyboard (the real checkbox is visually hidden, so the ring is
+ * drawn on the track through `peer-focus-visible`).
+ */
 export declare const ConsentToggle: FC<ConsentToggleProps>;
 //# sourceMappingURL=toggle.d.ts.map

package/build/consent/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAG/B,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgChD,CAAA"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAG/B,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoChD,CAAA"}

package/build/consent/toggle.js

@@ -1,4 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
-export const ConsentToggle = ({ id, label, description, checked, required, requiredLabel, onChange }) => (_jsxs("div", { className: "flex items-start justify-between rounded-lg border border-border/50 bg-muted/30 p-3", children: [_jsxs("div", { className: "flex-1 pr-4", children: [_jsxs("div", { className: "mb-0.5 flex items-center gap-2 text-sm font-semibold text-popover-foreground", children: [label, required === true && _jsx("span", { className: "rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary", children: requiredLabel })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: description })] }), _jsxs("label", { className: cn('relative h-6 w-11 flex-shrink-0', required === true ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [_jsx("input", { id: id, type: "checkbox", className: "sr-only", checked: checked || required === true, disabled: required === true, onChange: event => onChange(event.target.checked) }), _jsx("span", { className: cn('absolute inset-0 rounded-full transition-colors duration-300', checked || required === true ? 'bg-primary' : 'bg-muted-foreground/30') }), _jsx("span", { className: cn('absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-300', checked || required === true ? 'translate-x-5' : 'translate-x-0.5') })] })] }));
+/**
+ * One category row: a hairline card with the label, the description and a switch.
+ *
+ * Flat like the dialog it sits in — no tinted fill, no shadow, no badge. `Required` is plain muted
+ * text beside the label, because a required category is disclosure, not a status to decorate. The
+ * switch's hit area is 44px square around the visible 24×44 track, and it shows the dialog's 3px
+ * focus ring when reached from the keyboard (the real checkbox is visually hidden, so the ring is
+ * drawn on the track through `peer-focus-visible`).
+ */
+export const ConsentToggle = ({ id, label, description, checked, required, requiredLabel, onChange }) => (_jsxs("div", { className: "flex items-center justify-between gap-4 rounded-2xl border border-border p-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-0.5 flex flex-wrap items-center gap-x-2 text-sm font-bold text-foreground", children: [label, required === true && _jsx("span", { className: "text-xs font-bold uppercase tracking-wide text-muted-foreground", children: requiredLabel })] }), _jsx("p", { className: "text-pretty text-xs leading-relaxed text-muted-foreground", children: description })] }), _jsxs("label", { className: cn('relative inline-flex h-11 w-14 flex-shrink-0 items-center justify-center', required === true ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), children: [_jsx("input", { id: id, type: "checkbox", className: "peer sr-only", checked: checked || required === true, disabled: required === true, onChange: event => onChange(event.target.checked) }), _jsx("span", { className: cn('relative h-6 w-11 rounded-full transition-colors duration-300 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-ring', checked || required === true ? 'bg-primary' : 'bg-muted-foreground/40'), children: _jsx("span", { className: cn('absolute top-0.5 left-0 h-5 w-5 rounded-full bg-white transition-transform duration-300', checked || required === true ? 'translate-x-5' : 'translate-x-0.5') }) })] })] }));
 //# sourceMappingURL=toggle.js.map

package/build/consent/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAapC,MAAM,CAAC,MAAM,aAAa,GAA2B,CACnD,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,EACtE,EAAE,CAAC,CACH,eAAK,SAAS,EAAC,qFAAqF,aAClG,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAK,SAAS,EAAC,8EAA8E,aAC1F,KAAK,EACL,QAAQ,KAAK,IAAI,IAAI,eAAM,SAAS,EAAC,kGAAkG,YACrI,aAAa,GACT,IACH,EACN,YAAG,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAK,IAC1D,EACN,iBAAO,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,CAAC,aAC7H,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,OAAO,IAAI,QAAQ,KAAK,IAAI,EACrC,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GACjD,EACF,eAAM,SAAS,EAAE,EAAE,CACjB,8DAA8D,EAC9D,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,wBAAwB,CACvE,GAAI,EACL,eAAM,SAAS,EAAE,EAAE,CACjB,yFAAyF,EACzF,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CACnE,GAAI,IACC,IACJ,CACP,CAAA"}
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAapC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B,CACnD,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,EACtE,EAAE,CAAC,CACH,eAAK,SAAS,EAAC,8EAA8E,aAC3F,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,8EAA8E,aAC1F,KAAK,EACL,QAAQ,KAAK,IAAI,IAAI,eAAM,SAAS,EAAC,iEAAiE,YACpG,aAAa,GACT,IACH,EACN,YAAG,SAAS,EAAC,2DAA2D,YAAE,WAAW,GAAK,IACtF,EACN,iBAAO,SAAS,EAAE,EAAE,CAClB,0EAA0E,EAC1E,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,CACvE,aACC,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,KAAK,IAAI,EACrC,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GACjD,EACF,eAAM,SAAS,EAAE,EAAE,CACjB,gKAAgK,EAChK,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,wBAAwB,CACvE,YACC,eAAM,SAAS,EAAE,EAAE,CACjB,yFAAyF,EACzF,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CACnE,GAAI,GACA,IACD,IACJ,CACP,CAAA"}

package/build/index.d.ts

@@ -5,5 +5,5 @@ export * from './consent/widget.js';
 export * from './consent/toggle.js';
 export * from './policy/component.js';
 export { consentStore, openConsent, isConsented, readConsent, writeConsent, clearConsent, migrateConsent, applyConsent, pushConsentDefaults, consentBootstrapScript, consentDefaults, consentUpdate, gtagConsent, DEFAULT_CONSENT_CATEGORIES, DEFAULT_CONSENT_MESSAGES, defaultConsentTranslate, interpolate, CONSENT_KEY, CONSENT_COOKIE_DAYS, CONSENT_SCHEMA_VERSION, CONSENT_LOCALES, CONSENT_ESSENTIAL, CONSENT_ANALYTICS, CONSENT_MARKETING, } from '@owlmeans/consent';
-export type { ConsentCategory, ConsentOptions, ConsentReason, ConsentRecord, ConsentSignal, ConsentState, ConsentStore, ConsentLocale, } from '@owlmeans/consent';
+export type { ConsentCategory, ConsentOptions, ConsentReason, ConsentRecord, ConsentService, ConsentSignal, ConsentState, ConsentStore, ConsentLocale, } from '@owlmeans/consent';
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,OAAO,EACL,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAC/E,cAAc,EAAE,YAAY,EAAE,mBAAmB,EAAE,sBAAsB,EACzE,eAAe,EAAE,aAAa,EAAE,WAAW,EAC3C,0BAA0B,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,WAAW,EAC1F,WAAW,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,eAAe,EACzE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,GACxD,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EACV,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAC1F,YAAY,EAAE,aAAa,GAC5B,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,OAAO,EACL,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAC/E,cAAc,EAAE,YAAY,EAAE,mBAAmB,EAAE,sBAAsB,EACzE,eAAe,EAAE,aAAa,EAAE,WAAW,EAC3C,0BAA0B,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,WAAW,EAC1F,WAAW,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,eAAe,EACzE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,GACxD,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EACV,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAC5F,YAAY,EAAE,YAAY,EAAE,aAAa,GAC1C,MAAM,mBAAmB,CAAA"}

package/build/policy/component.d.ts

@@ -11,6 +11,12 @@ import type { CookiePolicyProps } from '../types.js';
  *
  * Everything OwlMeans cannot assert on the operator's behalf — who the controller is, what the
  * lawful basis is, how to exercise rights — is deferred to their own privacy policy and terms.
+ *
+ * `services` names WHO receives data under each category. It is the one input the widget cannot
+ * derive, so it comes from whatever added the tag (`googleTagServices(id)` for a Google tag), and
+ * a service is never dropped for want of a matching category: one whose category is not in force
+ * is listed in a trailing group, because a service the page runs and does not disclose is worse
+ * than one disclosed in the wrong place.
  */
 export declare const CookiePolicy: FC<CookiePolicyProps>;
 //# sourceMappingURL=component.d.ts.map

package/build/policy/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/policy/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEpD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAmD9C,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/policy/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAO/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAkDpD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAsE9C,CAAA"}

package/build/policy/component.js

@@ -1,6 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CONSENT_COOKIE_DAYS, CONSENT_KEY, DEFAULT_CONSENT_CATEGORIES, defaultConsentTranslate, interpolate, openConsent, } from '@owlmeans/consent';
 import { cn } from '../lib/utils.js';
+/**
+ * The services one category gates, as a nested list inside that category's item.
+ *
+ * A list and a description list rather than headings: the page's only heading is its `h1`, the
+ * categories are list items, and a service heading below them would either skip a level or
+ * promote a service above the category that governs it.
+ */
+const ServiceList = ({ services, label, category, t }) => _jsx("ul", { "aria-label": interpolate(t('policyServicesOf', 'Services — {{category}}'), { category: label }), "data-cookie-policy-services": category ?? '', children: services.map((service, index) => _jsxs("li", { "data-cookie-policy-service": true, children: [_jsx("strong", { children: service.name }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: t('policyProvider', 'Provider') }), _jsx("dd", { children: service.provider })] }), service.purpose != null && service.purpose !== '' && _jsxs("div", { children: [_jsx("dt", { children: t('policyPurpose', 'Purpose') }), _jsx("dd", { children: service.purpose })] }), service.cookies != null && service.cookies.length > 0 && _jsxs("div", { children: [_jsx("dt", { children: t('policyCookies', 'Cookies') }), _jsx("dd", { children: service.cookies.map((cookie, at) => _jsxs("span", { children: [at > 0 && ', ', _jsx("code", { children: cookie })] }, `${cookie}-${at}`)) })] })] }), service.privacyHref != null && service.privacyHref !== '' && _jsx("a", { href: service.privacyHref, target: "_blank", rel: "noopener noreferrer", children: interpolate(t('policyServicePrivacy', '{{provider}} privacy policy'), { provider: service.provider }) })] }, `${service.name}-${index}`)) });
 /**
  * A cookie policy that states only what this application can actually assert.
  *
@@ -12,12 +20,26 @@ import { cn } from '../lib/utils.js';
  *
  * Everything OwlMeans cannot assert on the operator's behalf — who the controller is, what the
  * lawful basis is, how to exercise rights — is deferred to their own privacy policy and terms.
+ *
+ * `services` names WHO receives data under each category. It is the one input the widget cannot
+ * derive, so it comes from whatever added the tag (`googleTagServices(id)` for a Google tag), and
+ * a service is never dropped for want of a matching category: one whose category is not in force
+ * is listed in a trailing group, because a service the page runs and does not disclose is worse
+ * than one disclosed in the wrong place.
  */
 export const CookiePolicy = props => {
     const categories = props.categories ?? DEFAULT_CONSENT_CATEGORIES;
     const t = props.translate ?? defaultConsentTranslate(props.locale);
     const storageKey = props.storageKey ?? CONSENT_KEY;
     const days = props.cookieDays ?? CONSENT_COOKIE_DAYS;
-    return _jsxs("article", { className: cn('prose prose-sm max-w-2xl', props.className), "data-cookie-policy": true, children: [_jsx("h1", { children: t('policyTitle', 'Cookie Policy') }), _jsx("p", { children: t('policyIntro', 'This page describes the cookies and similar storage this application uses, and how you can control them.') }), _jsx("ul", { children: categories.map(category => _jsxs("li", { children: [_jsx("strong", { children: t(category.labelKey, category.key) }), category.required === true && _jsxs(_Fragment, { children: [" \u2014 ", t('required', 'Required')] }), _jsx("br", {}), t(category.descriptionKey, '')] }, category.key)) }), _jsx("p", { children: interpolate(t('policyStorage', 'Your choice is stored in this browser under "{{key}}", both in local storage and as a cookie.'), { key: storageKey }) }), _jsx("p", { children: interpolate(t('policyRetention', 'The record is kept for {{days}} days, after which you will be asked again.'), { days }) }), props.operator != null && props.operator !== '' && _jsxs("p", { children: [interpolate(t('policyOperator', 'This application is operated by {{operator}}.'), { operator: props.operator }), ' ', t('policyContact', 'See their privacy policy and terms for how they handle your data.')] }), _jsxs("p", { children: [props.privacyHref != null && props.privacyHref !== '' && _jsx("a", { href: props.privacyHref, target: "_blank", rel: "noopener noreferrer", children: t('privacy', 'Privacy Policy') }), props.privacyHref != null && props.termsHref != null && ' · ', props.termsHref != null && props.termsHref !== '' && _jsx("a", { href: props.termsHref, target: "_blank", rel: "noopener noreferrer", children: t('terms', 'Terms & Conditions') })] }), _jsx("p", { children: _jsx("button", { type: "button", onClick: () => openConsent('reopen'), "data-cookie-policy-manage": true, children: t('manage', 'Manage preferences') }) })] });
+    const services = props.services ?? [];
+    const keys = new Set(categories.map(category => category.key));
+    const other = services.filter(service => !keys.has(service.category));
+    const otherLabel = t('policyOtherServices', 'Other services');
+    return _jsxs("article", { className: cn('prose prose-sm max-w-2xl', props.className), "data-cookie-policy": true, children: [_jsx("h1", { children: t('policyTitle', 'Cookie Policy') }), _jsx("p", { children: t('policyIntro', 'This page describes the cookies and similar storage this application uses, and how you can control them.') }), _jsxs("ul", { children: [categories.map(category => {
+                        const label = t(category.labelKey, category.key);
+                        const gated = services.filter(service => service.category === category.key);
+                        return _jsxs("li", { "data-cookie-policy-category": category.key, children: [_jsx("strong", { children: label }), category.required === true && _jsxs(_Fragment, { children: [" \u2014 ", t('required', 'Required')] }), _jsx("br", {}), t(category.descriptionKey, ''), gated.length > 0 && _jsx(ServiceList, { services: gated, label: label, category: category.key, t: t })] }, category.key);
+                    }), other.length > 0 && _jsxs("li", { "data-cookie-policy-other": true, children: [_jsx("strong", { children: otherLabel }), _jsx("br", {}), t('policyOtherServicesDesc', 'Services this application runs outside the categories above.'), _jsx(ServiceList, { services: other, label: otherLabel, t: t })] }, " other")] }), _jsx("p", { children: interpolate(t('policyStorage', 'Your choice is stored in this browser under "{{key}}", both in local storage and as a cookie.'), { key: storageKey }) }), _jsx("p", { children: interpolate(t('policyRetention', 'The record is kept for {{days}} days, after which you will be asked again.'), { days }) }), props.operator != null && props.operator !== '' && _jsxs("p", { children: [interpolate(t('policyOperator', 'This application is operated by {{operator}}.'), { operator: props.operator }), ' ', t('policyContact', 'See their privacy policy and terms for how they handle your data.')] }), _jsxs("p", { children: [props.privacyHref != null && props.privacyHref !== '' && _jsx("a", { href: props.privacyHref, target: "_blank", rel: "noopener noreferrer", children: t('privacy', 'Privacy Policy') }), props.privacyHref != null && props.termsHref != null && ' · ', props.termsHref != null && props.termsHref !== '' && _jsx("a", { href: props.termsHref, target: "_blank", rel: "noopener noreferrer", children: t('terms', 'Terms & Conditions') })] }), _jsx("p", { children: _jsx("button", { type: "button", onClick: () => openConsent('reopen'), "data-cookie-policy-manage": true, className: "not-prose inline-flex min-h-11 items-center justify-center rounded-full border-[1.5px] border-foreground bg-transparent px-6 py-2.5 text-[15px] font-semibold text-foreground transition-colors hover:bg-muted focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-ring", children: t('manage', 'Manage preferences') }) })] });
 };
 //# sourceMappingURL=component.js.map

package/build/policy/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/policy/component.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,mBAAmB,EAAE,WAAW,EAAE,0BAA0B,EAC5D,uBAAuB,EAAE,WAAW,EAAE,WAAW,GAClD,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAGpC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAA0B,KAAK,CAAC,EAAE;IACzD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,0BAA0B,CAAA;IACjE,MAAM,CAAC,GAAG,KAAK,CAAC,SAAS,IAAI,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAClE,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,WAAW,CAAA;IAClD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,IAAI,mBAAmB,CAAA;IAEpD,OAAO,mBAAS,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,yCACxE,uBAAK,CAAC,CAAC,aAAa,EAAE,eAAe,CAAC,GAAM,EAC5C,sBAAI,CAAC,CAAC,aAAa,EAAE,0GAA0G,CAAC,GAAK,EAErI,uBACG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,yBAC1B,2BAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAU,EACpD,QAAQ,CAAC,QAAQ,KAAK,IAAI,IAAI,0CAAM,CAAC,CAAC,UAAU,EAAE,UAAU,CAAC,IAAI,EAClE,cAAM,EACL,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC,KAJI,QAAQ,CAAC,GAAG,CAK5C,CAAC,GACH,EAEL,sBAAI,WAAW,CACb,CAAC,CAAC,eAAe,EAAE,+FAA+F,CAAC,EACnH,EAAE,GAAG,EAAE,UAAU,EAAE,CACpB,GAAK,EACN,sBAAI,WAAW,CACb,CAAC,CAAC,iBAAiB,EAAE,4EAA4E,CAAC,EAClG,EAAE,IAAI,EAAE,CACT,GAAK,EAEL,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,IAAI,wBACjD,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,+CAA+C,CAAC,EAC/E,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,EAC9B,GAAG,EACH,CAAC,CAAC,eAAe,EAAE,mEAAmE,CAAC,IACtF,EAEJ,wBACG,KAAK,CAAC,WAAW,IAAI,IAAI,IAAI,KAAK,CAAC,WAAW,KAAK,EAAE,IAAI,YACxD,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,YAClE,CAAC,CAAC,SAAS,EAAE,gBAAgB,CAAC,GAAK,EACpC,KAAK,CAAC,WAAW,IAAI,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,IAAI,IAAI,KAAK,EAC7D,KAAK,CAAC,SAAS,IAAI,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,EAAE,IAAI,YACpD,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,YAChE,CAAC,CAAC,OAAO,EAAE,oBAAoB,CAAC,GAAK,IACrC,EAEJ,sBACE,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,+CACvD,CAAC,CAAC,QAAQ,EAAE,oBAAoB,CAAC,GAC3B,GACP,IACI,CAAA;AACZ,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/policy/component.tsx"],"names":[],"mappings":"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"}

package/build/types.d.ts

@@ -1,4 +1,4 @@
-import type { ConsentCategory, ConsentReason, ConsentRecord } from '@owlmeans/consent';
+import type { ConsentCategory, ConsentReason, ConsentRecord, ConsentService } from '@owlmeans/consent';
 export interface ConsentLink {
     href: string;
     labelKey: string;
@@ -34,6 +34,13 @@ export interface CookiePolicyProps {
     termsHref?: string;
     storageKey?: string;
     cookieDays?: number;
+    /**
+     * The third-party services the site runs, each listed under the category that gates it —
+     * name, provider, purpose, cookie names and the provider's privacy policy. A service whose
+     * category is not among `categories` is listed in a trailing "Other services" group rather than
+     * dropped. `@owlmeans/web-gtm`'s `googleTagServices(id)` supplies the entries for a Google tag.
+     */
+    services?: ConsentService[];
     className?: string;
 }
 export interface ConsentMenuWidgetProps {

package/build/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAAE,aAAa,EAAE,aAAa,EAC9C,MAAM,mBAAmB,CAAA;AAE1B,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,uFAAuF;IACvF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAA;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wFAAwF;IACxF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAA;IACzD,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uFAAuF;IACvF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAA;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IACjC,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAC9D,MAAM,mBAAmB,CAAA;AAE1B,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,uFAAuF;IACvF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAA;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wFAAwF;IACxF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAA;IACzD,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uFAAuF;IACvF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAA;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IACjC,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/web-consent",
-  "version": "0.1.18-rc.22",
+  "version": "0.1.18-rc.24",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@owlmeans/consent": "^0.1.18-rc.4"
+    "@owlmeans/consent": "^0.1.18-rc.5"
   },
   "peerDependencies": {
     "clsx": "*",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@owlmeans/dep-config": "workspace:*",
-    "@owlmeans/test-ui": "^0.1.18-rc.30",
+    "@owlmeans/test-ui": "^0.1.18-rc.32",
     "@tailwindcss/vite": "^4.0.0",
     "@types/bun": "^1.4.0",
     "@types/react": "^19.2.17",

package/src/consent/component.tsx

@@ -17,7 +17,31 @@ import type { CookieConsentProps } from '../types.js'
  * this serves is an Astro island on a site that vendors its own component library, and requiring a
  * consumer to install a UI family in order to render a consent notice would put the notice out of
  * reach of the site that needs it most.
+ *
+ * Flat by rule, because it is the first thing every new visitor of a generated app sees: the
+ * surface and every colour come from the host's theme tokens (ground, ink, muted, hairline, one
+ * accent), depth comes from a hairline border and the overlay alone, and nothing paints a
+ * gradient, a shadow, a glow or a `backdrop-filter`. The accept action is the one accent pill,
+ * the others are outlined pills; every control is at least 44px tall and shows a 3px focus ring.
+ */
+/**
+ * The focus ring every control here shows: 3px solid in the theme's ring colour, 3px off the
+ * element. An outline rather than a box-shadow ring, so it survives a host that zeroes shadows.
  */
+const FOCUS = 'focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-ring'
+
+/** A pill button: 44px tall at minimum, full width on a phone, sharing the row above that. */
+const PILL = cn(
+  'inline-flex min-h-11 flex-1 items-center justify-center rounded-full px-6 py-2.5 text-[15px] transition-colors motion-safe:active:scale-[0.98]',
+  FOCUS
+)
+
+/** A text link: muted, underlined at rest (colour is never the only signal), 44px tall to tap. */
+const LINK = cn(
+  'inline-flex min-h-11 items-center font-semibold underline decoration-1 underline-offset-4 transition-colors hover:text-foreground hover:decoration-2',
+  FOCUS
+)
+
 export const CookieConsent: FC<CookieConsentProps> = props => {
   const categories = props.categories ?? DEFAULT_CONSENT_CATEGORIES
   const t = props.translate ?? defaultConsentTranslate(props.locale)
@@ -66,26 +90,24 @@ export const CookieConsent: FC<CookieConsentProps> = props => {
 
   return <>
     {consent.open && <div
-      className="fixed inset-0 z-[999998] flex items-center justify-center overflow-y-auto bg-black/70 px-4 py-6 backdrop-blur-md"
+      className="fixed inset-0 z-[999998] flex items-center justify-center overflow-y-auto bg-black/70 px-4 py-6"
       aria-modal="true" role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc"
       data-consent-dialog
     >
       <div className={cn(
-        'relative z-[999999] w-full max-w-lg rounded-2xl border border-border bg-popover/95 p-6 shadow-[0_25px_60px_-12px_rgba(0,0,0,0.5)] ring-1 ring-primary/20 backdrop-blur-xl sm:p-8',
+        'relative z-[999999] w-full max-w-lg rounded-3xl border border-border bg-background p-6 text-foreground sm:p-8',
         props.className
       )}>
-        <div className="absolute inset-x-0 top-0 h-1 rounded-t-2xl bg-gradient-to-r from-primary to-secondary" />
-
         <div className="mb-4 flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted text-primary">
             <Cookie className="h-5 w-5" aria-hidden="true" />
           </div>
-          <h2 id="cc-title" className="text-xl font-bold text-popover-foreground sm:text-2xl">
+          <h2 id="cc-title" className="text-balance text-xl font-extrabold tracking-tight text-foreground sm:text-2xl">
             {t('title', 'Cookie Preferences')}
           </h2>
         </div>
 
-        <p id="cc-desc" className="mb-6 text-sm leading-relaxed text-muted-foreground">
+        <p id="cc-desc" className="mb-6 text-pretty text-sm leading-relaxed text-muted-foreground">
           {t('description', 'We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic.')}
         </p>
 
@@ -102,31 +124,29 @@ export const CookieConsent: FC<CookieConsentProps> = props => {
           />)}
         </div>
 
-        {gated && <p role="status" data-consent-reason className="mt-4 text-sm text-popover-foreground">
+        {gated && <p role="status" data-consent-reason className="mt-4 text-sm font-semibold text-foreground">
           {t('loginReason', 'Signing in stores a session cookie. Accept essential cookies to continue.')}
         </p>}
 
         <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
           <button
             type="button" onClick={onSave} data-consent-save
-            className="flex-1 rounded-lg border border-border bg-transparent px-4 py-3 text-sm font-semibold text-popover-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className={cn(PILL, 'border-[1.5px] border-foreground bg-transparent font-semibold text-foreground hover:bg-muted')}
           >{t('savePreferences', 'Save Preferences')}</button>
           <button
             type="button" onClick={onAcceptAll} data-consent-accept-all
-            className="flex-1 rounded-lg bg-primary px-4 py-3 text-sm font-bold text-primary-foreground shadow-lg shadow-primary/25 transition-all hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            className={cn(PILL, 'bg-primary font-bold text-primary-foreground hover:bg-primary/90')}
           >{gated
             ? t('acceptAndContinue', 'Accept & continue')
             : t('acceptAll', 'Accept All')}</button>
         </div>
 
-        {(props.policyHref != null || props.links != null) && <div className="mt-4 flex flex-wrap justify-center gap-3 text-xs text-muted-foreground">
+        {(props.policyHref != null || props.links != null) && <div className="mt-3 flex flex-wrap justify-center gap-x-4 text-[13px] text-muted-foreground">
           {props.policyHref != null && <a
-            href={props.policyHref} target="_blank" rel="noopener noreferrer"
-            className="underline underline-offset-2 transition-colors hover:text-popover-foreground"
+            href={props.policyHref} target="_blank" rel="noopener noreferrer" className={LINK}
           >{t('policyLink', 'Cookie Policy')}</a>}
           {props.links?.map(link => <a
-            key={link.href} href={link.href} target="_blank" rel="noopener noreferrer"
-            className="underline underline-offset-2 transition-colors hover:text-popover-foreground"
+            key={link.href} href={link.href} target="_blank" rel="noopener noreferrer" className={LINK}
           >{t(link.labelKey, link.defaultLabel)}</a>)}
         </div>}
       </div>
@@ -137,13 +157,14 @@ export const CookieConsent: FC<CookieConsentProps> = props => {
       * stays, on every page of the site, so it must read as a small fixture rather than as a
       * floating action button competing with the page's own controls. No border, no filled
       * background, no shadow and no hover-scale — only the pictogram, dimmed at rest and picked
-      * out on hover/focus, at the exact size (`h-5 w-5`) it always was.
+      * out on hover/focus, at the exact size (`h-5 w-5`) it always was. The invisible hit area
+      * around it is 44px, the smallest target a finger can reliably press.
       */}
     {props.noReopenButton !== true && consent.record != null && !consent.open && <button
       type="button" onClick={() => consent.openDialog('reopen')}
       aria-label={t('openPreferences', 'Cookie preferences')}
       data-consent-reopen
-      className="fixed bottom-1 left-1 z-[999997] inline-flex items-center justify-center rounded border-0 bg-transparent p-1.5 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className={cn('fixed bottom-1 left-1 z-[999997] inline-flex h-11 w-11 items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:text-primary focus-visible:opacity-100', FOCUS)}
     >
       <Cookie className="h-5 w-5" aria-hidden="true" />
     </button>}

package/src/consent/toggle.tsx

@@ -12,36 +12,49 @@ export interface ConsentToggleProps {
   onChange: (value: boolean) => void
 }
 
+/**
+ * One category row: a hairline card with the label, the description and a switch.
+ *
+ * Flat like the dialog it sits in — no tinted fill, no shadow, no badge. `Required` is plain muted
+ * text beside the label, because a required category is disclosure, not a status to decorate. The
+ * switch's hit area is 44px square around the visible 24×44 track, and it shows the dialog's 3px
+ * focus ring when reached from the keyboard (the real checkbox is visually hidden, so the ring is
+ * drawn on the track through `peer-focus-visible`).
+ */
 export const ConsentToggle: FC<ConsentToggleProps> = (
   { id, label, description, checked, required, requiredLabel, onChange }
 ) => (
-  <div className="flex items-start justify-between rounded-lg border border-border/50 bg-muted/30 p-3">
-    <div className="flex-1 pr-4">
-      <div className="mb-0.5 flex items-center gap-2 text-sm font-semibold text-popover-foreground">
+  <div className="flex items-center justify-between gap-4 rounded-2xl border border-border p-4">
+    <div className="min-w-0 flex-1">
+      <div className="mb-0.5 flex flex-wrap items-center gap-x-2 text-sm font-bold text-foreground">
         {label}
-        {required === true && <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary">
+        {required === true && <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
           {requiredLabel}
         </span>}
       </div>
-      <p className="text-xs text-muted-foreground">{description}</p>
+      <p className="text-pretty text-xs leading-relaxed text-muted-foreground">{description}</p>
     </div>
-    <label className={cn('relative h-6 w-11 flex-shrink-0', required === true ? 'cursor-not-allowed opacity-70' : 'cursor-pointer')}>
+    <label className={cn(
+      'relative inline-flex h-11 w-14 flex-shrink-0 items-center justify-center',
+      required === true ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+    )}>
       <input
         id={id}
         type="checkbox"
-        className="sr-only"
+        className="peer sr-only"
         checked={checked || required === true}
         disabled={required === true}
         onChange={event => onChange(event.target.checked)}
       />
       <span className={cn(
-        'absolute inset-0 rounded-full transition-colors duration-300',
-        checked || required === true ? 'bg-primary' : 'bg-muted-foreground/30'
-      )} />
-      <span className={cn(
-        'absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-300',
-        checked || required === true ? 'translate-x-5' : 'translate-x-0.5'
-      )} />
+        'relative h-6 w-11 rounded-full transition-colors duration-300 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-ring',
+        checked || required === true ? 'bg-primary' : 'bg-muted-foreground/40'
+      )}>
+        <span className={cn(
+          'absolute top-0.5 left-0 h-5 w-5 rounded-full bg-white transition-transform duration-300',
+          checked || required === true ? 'translate-x-5' : 'translate-x-0.5'
+        )} />
+      </span>
     </label>
   </div>
 )

package/src/index.ts

@@ -14,6 +14,6 @@ export {
   CONSENT_ESSENTIAL, CONSENT_ANALYTICS, CONSENT_MARKETING,
 } from '@owlmeans/consent'
 export type {
-  ConsentCategory, ConsentOptions, ConsentReason, ConsentRecord, ConsentSignal, ConsentState,
-  ConsentStore, ConsentLocale,
+  ConsentCategory, ConsentOptions, ConsentReason, ConsentRecord, ConsentService, ConsentSignal,
+  ConsentState, ConsentStore, ConsentLocale,
 } from '@owlmeans/consent'

package/src/policy/component.tsx

@@ -3,9 +3,58 @@ import {
   CONSENT_COOKIE_DAYS, CONSENT_KEY, DEFAULT_CONSENT_CATEGORIES,
   defaultConsentTranslate, interpolate, openConsent,
 } from '@owlmeans/consent'
+import type { ConsentService } from '@owlmeans/consent'
 import { cn } from '../lib/utils.js'
 import type { CookiePolicyProps } from '../types.js'
 
+type Translate = (key: string, defaultValue: string) => string
+
+interface ServiceListProps {
+  services: ConsentService[]
+  /** The category's own label, already resolved — it names the list for assistive technology. */
+  label: string
+  /** The category key, for tests and CSS; absent for the trailing group of unmatched services. */
+  category?: string
+  t: Translate
+}
+
+/**
+ * The services one category gates, as a nested list inside that category's item.
+ *
+ * A list and a description list rather than headings: the page's only heading is its `h1`, the
+ * categories are list items, and a service heading below them would either skip a level or
+ * promote a service above the category that governs it.
+ */
+const ServiceList: FC<ServiceListProps> = ({ services, label, category, t }) =>
+  <ul
+    aria-label={interpolate(t('policyServicesOf', 'Services — {{category}}'), { category: label })}
+    data-cookie-policy-services={category ?? ''}
+  >
+    {services.map((service, index) => <li key={`${service.name}-${index}`} data-cookie-policy-service>
+      <strong>{service.name}</strong>
+      <dl>
+        <div>
+          <dt>{t('policyProvider', 'Provider')}</dt>
+          <dd>{service.provider}</dd>
+        </div>
+        {service.purpose != null && service.purpose !== '' && <div>
+          <dt>{t('policyPurpose', 'Purpose')}</dt>
+          <dd>{service.purpose}</dd>
+        </div>}
+        {service.cookies != null && service.cookies.length > 0 && <div>
+          <dt>{t('policyCookies', 'Cookies')}</dt>
+          <dd>{service.cookies.map((cookie, at) => <span key={`${cookie}-${at}`}>
+            {at > 0 && ', '}<code>{cookie}</code>
+          </span>)}</dd>
+        </div>}
+      </dl>
+      {service.privacyHref != null && service.privacyHref !== '' && <a
+        href={service.privacyHref} target="_blank" rel="noopener noreferrer"
+      >{interpolate(t('policyServicePrivacy', '{{provider}} privacy policy'),
+        { provider: service.provider })}</a>}
+    </li>)}
+  </ul>
+
 /**
  * A cookie policy that states only what this application can actually assert.
  *
@@ -17,24 +66,46 @@ import type { CookiePolicyProps } from '../types.js'
  *
  * Everything OwlMeans cannot assert on the operator's behalf — who the controller is, what the
  * lawful basis is, how to exercise rights — is deferred to their own privacy policy and terms.
+ *
+ * `services` names WHO receives data under each category. It is the one input the widget cannot
+ * derive, so it comes from whatever added the tag (`googleTagServices(id)` for a Google tag), and
+ * a service is never dropped for want of a matching category: one whose category is not in force
+ * is listed in a trailing group, because a service the page runs and does not disclose is worse
+ * than one disclosed in the wrong place.
  */
 export const CookiePolicy: FC<CookiePolicyProps> = props => {
   const categories = props.categories ?? DEFAULT_CONSENT_CATEGORIES
   const t = props.translate ?? defaultConsentTranslate(props.locale)
   const storageKey = props.storageKey ?? CONSENT_KEY
   const days = props.cookieDays ?? CONSENT_COOKIE_DAYS
+  const services = props.services ?? []
+  const keys = new Set(categories.map(category => category.key))
+  const other = services.filter(service => !keys.has(service.category))
+  const otherLabel = t('policyOtherServices', 'Other services')
 
   return <article className={cn('prose prose-sm max-w-2xl', props.className)} data-cookie-policy>
     <h1>{t('policyTitle', 'Cookie Policy')}</h1>
     <p>{t('policyIntro', 'This page describes the cookies and similar storage this application uses, and how you can control them.')}</p>
 
     <ul>
-      {categories.map(category => <li key={category.key}>
-        <strong>{t(category.labelKey, category.key)}</strong>
-        {category.required === true && <> — {t('required', 'Required')}</>}
+      {categories.map(category => {
+        const label = t(category.labelKey, category.key)
+        const gated = services.filter(service => service.category === category.key)
+
+        return <li key={category.key} data-cookie-policy-category={category.key}>
+          <strong>{label}</strong>
+          {category.required === true && <> — {t('required', 'Required')}</>}
+          <br />
+          {t(category.descriptionKey, '')}
+          {gated.length > 0 && <ServiceList services={gated} label={label} category={category.key} t={t} />}
+        </li>
+      })}
+      {other.length > 0 && <li key=" other" data-cookie-policy-other>
+        <strong>{otherLabel}</strong>
         <br />
-        {t(category.descriptionKey, '')}
-      </li>)}
+        {t('policyOtherServicesDesc', 'Services this application runs outside the categories above.')}
+        <ServiceList services={other} label={otherLabel} t={t} />
+      </li>}
     </ul>
 
     <p>{interpolate(
@@ -64,7 +135,10 @@ export const CookiePolicy: FC<CookiePolicyProps> = props => {
     </p>
 
     <p>
-      <button type="button" onClick={() => openConsent('reopen')} data-cookie-policy-manage>
+      <button
+        type="button" onClick={() => openConsent('reopen')} data-cookie-policy-manage
+        className="not-prose inline-flex min-h-11 items-center justify-center rounded-full border-[1.5px] border-foreground bg-transparent px-6 py-2.5 text-[15px] font-semibold text-foreground transition-colors hover:bg-muted focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-ring"
+      >
         {t('manage', 'Manage preferences')}
       </button>
     </p>

package/src/types.ts

@@ -1,5 +1,5 @@
 import type {
-  ConsentCategory, ConsentReason, ConsentRecord,
+  ConsentCategory, ConsentReason, ConsentRecord, ConsentService,
 } from '@owlmeans/consent'
 
 export interface ConsentLink {
@@ -39,6 +39,13 @@ export interface CookiePolicyProps {
   termsHref?: string
   storageKey?: string
   cookieDays?: number
+  /**
+   * The third-party services the site runs, each listed under the category that gates it —
+   * name, provider, purpose, cookie names and the provider's privacy policy. A service whose
+   * category is not among `categories` is listed in a trailing "Other services" group rather than
+   * dropped. `@owlmeans/web-gtm`'s `googleTagServices(id)` supplies the entries for a Google tag.
+   */
+  services?: ConsentService[]
   className?: string
 }
 

package/tests/bundle.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'bun:test'
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { DEFAULT_CONSENT_CATEGORIES, DEFAULT_CONSENT_MESSAGES } from '@owlmeans/consent'
+
+const src = resolve(dirname(fileURLToPath(import.meta.url)), '../src')
+
+const sources = (dir: string): string[] => readdirSync(dir).flatMap(name => {
+  const path = join(dir, name)
+
+  return statSync(path).isDirectory() ? sources(path) : /\.tsx?$/.test(name) ? [path] : []
+})
+
+describe('@owlmeans/web-consent — the packaged bundle', () => {
+  test('every key a component reads has a bundle entry', () => {
+    // A key with no entry does not fail: it renders its English default in every language, and
+    // the page looks translated everywhere except that one line. The privacy and terms link
+    // labels shipped that way — so the keys are read from the components themselves, and a new
+    // `t('…')` without an entry fails here instead of in a reader's language.
+    const read = new Set<string>()
+    for (const file of sources(src)) {
+      for (const match of readFileSync(file, 'utf8').matchAll(/\bt\('([A-Za-z]+)'/g)) {
+        read.add(match[1])
+      }
+    }
+    for (const category of DEFAULT_CONSENT_CATEGORIES) {
+      read.add(category.labelKey)
+      read.add(category.descriptionKey)
+    }
+
+    expect(read.size).toBeGreaterThan(20)
+    const missing = [...read].filter(key => DEFAULT_CONSENT_MESSAGES.en[key] == null)
+    expect(missing).toEqual([])
+  })
+})

package/tests/consent.spec.ts

@@ -212,6 +212,43 @@ describe('@owlmeans/web-consent — the dialog', () => {
     }
   }, TIMEOUT)
 
+  test('the dialog is flat: theme tokens, hairlines and pills — no gradient, shadow or blur', async () => {
+    // It is the first thing every new visitor of a generated app sees, and that app's rule is no
+    // gradient, glow, shadow or backdrop-filter anywhere. Asserted on the class lists for the same
+    // reason as the re-open button below: the harness compiles no stylesheet.
+    const { page, close } = await mountComponent({ url: `${base}/` })
+    try {
+      const dialog = page.locator('[data-consent-dialog]')
+      await dialog.waitFor()
+      const classes = await dialog.evaluate(root => [root, ...Array.from(root.querySelectorAll('*'))]
+        .map(element => element.getAttribute('class') ?? '').join(' '))
+
+      expect(classes).not.toMatch(/\b(?:bg-gradient|from-|to-secondary|backdrop-|blur|shadow|ring-primary)/)
+      // The overlay is a flat translucent black, and the card sits on the ground token.
+      expect(await dialog.getAttribute('class')).toContain('bg-black/70')
+      const card = dialog.locator(':scope > div')
+      expect(await card.getAttribute('class')).toMatch(/\bbg-background\b/)
+      expect(await card.getAttribute('class')).toMatch(/\bborder-border\b/)
+      expect(await card.getAttribute('class')).toMatch(/\brounded-3xl\b/)
+
+      // One accent pill for accepting, an outlined pill for the rest; both a 44px target with a
+      // visible focus ring.
+      const accept = await page.locator('[data-consent-accept-all]').getAttribute('class') ?? ''
+      const save = await page.locator('[data-consent-save]').getAttribute('class') ?? ''
+      expect(accept).toMatch(/\bbg-primary\b/)
+      expect(accept).toMatch(/\btext-primary-foreground\b/)
+      expect(save).not.toMatch(/\bbg-primary\b/)
+      expect(save).toMatch(/\bborder-foreground\b/)
+      for (const cls of [accept, save]) {
+        expect(cls).toMatch(/\brounded-full\b/)
+        expect(cls).toMatch(/\bmin-h-11\b/)
+        expect(cls).toContain('focus-visible:outline-ring')
+      }
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
   test('the re-open button brings the dialog back with a reason', async () => {
     const { page, close } = await seeded({ essential: true, analytics: false, marketing: false, v: CONSENT_SCHEMA_VERSION })
     try {
@@ -263,6 +300,92 @@ describe('@owlmeans/web-consent — the policy page', () => {
     }
   }, TIMEOUT)
 
+  test('each service is disclosed under the category that gates it', async () => {
+    // "Analytics cookies" says why something is stored, never who receives it — the service row is
+    // the part a regulator actually reads, so it must sit inside ITS category, not in a list of
+    // its own where nothing ties it to the switch that governs it.
+    const { page, close } = await mountComponent({ url: `${base}/?view=policy&services=1` })
+    try {
+      const analytics = page.locator('[data-cookie-policy-category="analytics"]')
+      await analytics.waitFor()
+      const text = await analytics.innerText()
+
+      expect(text).toContain('Example Analytics')
+      expect(text).toContain('Example Corp')
+      expect(text).toContain('Counts page views.')
+      expect(text).toContain('_ex_1')
+      expect(await analytics.locator('a[href="https://example.test/vendor-privacy"]').innerText())
+        .toContain('Example Corp')
+      // The list is named for assistive technology by the category it belongs to.
+      expect(await analytics.locator('ul').getAttribute('aria-label')).toContain('Analytics')
+
+      // Nothing leaked into a category that does not gate it.
+      expect(await page.locator('[data-cookie-policy-category="marketing"]').innerText())
+        .not.toContain('Example Analytics')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a service whose category is not in force is still disclosed, never dropped', async () => {
+    const { page, close } = await mountComponent({ url: `${base}/?view=policy&services=1` })
+    try {
+      const other = page.locator('[data-cookie-policy-other]')
+      await other.waitFor()
+
+      expect(await other.innerText()).toContain('Orphan Pixel')
+      // Still one heading: services are list items, never headings that would skip a level.
+      expect(await page.locator('[data-cookie-policy] h1').count()).toBe(1)
+      expect(await page.locator('[data-cookie-policy] h2, [data-cookie-policy] h3').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('with no services the page renders exactly as before', async () => {
+    const { page, close } = await mountComponent({ url: `${base}/?view=policy` })
+    try {
+      await page.locator('[data-cookie-policy]').waitFor()
+
+      expect(await page.locator('[data-cookie-policy-service]').count()).toBe(0)
+      expect(await page.locator('[data-cookie-policy-other]').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the service labels follow the locale', async () => {
+    const { page, close } = await mountComponent({ url: `${base}/?view=policy&services=1&locale=de` })
+    try {
+      const analytics = page.locator('[data-cookie-policy-category="analytics"]')
+      await analytics.waitFor()
+      const text = await analytics.innerText()
+
+      expect(text).toContain(defaultConsentTranslate('de')('policyProvider', ''))
+      expect(text).toContain(defaultConsentTranslate('de')('policyPurpose', ''))
+      expect(defaultConsentTranslate('de')('policyProvider', '')).not.toBe('Provider')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the privacy and terms links follow the locale', async () => {
+    const { page, close } = await mountComponent({ url: `${base}/?view=policy&locale=de` })
+    try {
+      const policy = page.locator('[data-cookie-policy]')
+      await policy.waitFor()
+      const de = defaultConsentTranslate('de')
+
+      expect(await policy.locator('a[href="https://example.test/privacy"]').innerText())
+        .toBe(de('privacy', ''))
+      expect(await policy.locator('a[href="https://example.test/terms"]').innerText())
+        .toBe(de('terms', ''))
+      expect(de('privacy', '')).not.toBe('Privacy Policy')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
   test('it offers a way back to the decision', async () => {
     const { page, close } = await mountComponent({ url: `${base}/?view=policy` })
     try {

package/tests/harness/mount.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { CookieConsent, CookiePolicy, DEFAULT_CONSENT_CATEGORIES } from '../../src/index.js'
-import type { ConsentCategory } from '../../src/index.js'
+import type { ConsentCategory, ConsentService } from '../../src/index.js'
 
 /**
  * The harness renders whatever the query string asks for, so a spec chooses its case by URL and
@@ -11,6 +11,7 @@ import type { ConsentCategory } from '../../src/index.js'
  * - `?locale=<lng>` — render the dialog in that language.
  * - `?categories=custom` — a category set that is NOT the default, with its own global var.
  * - `?view=policy` — the cookie-policy page instead of the dialog.
+ * - `?services=1` — with `view=policy`, disclose {@link SERVICES} on it.
  */
 const params = new URLSearchParams(window.location.search)
 
@@ -34,6 +35,19 @@ const CUSTOM: ConsentCategory[] = [
 
 const categories = params.get('categories') === 'custom' ? CUSTOM : DEFAULT_CONSENT_CATEGORIES
 
+/**
+ * One service under a category in force, and one under a category that is not — the second is
+ * what proves a service is never silently dropped for want of a matching category.
+ */
+const SERVICES: ConsentService[] = [
+  {
+    name: 'Example Analytics', provider: 'Example Corp', category: 'analytics',
+    purpose: 'Counts page views.', cookies: ['_ex', '_ex_1'],
+    privacyHref: 'https://example.test/vendor-privacy',
+  },
+  { name: 'Orphan Pixel', provider: 'Orphan Ltd', category: 'nowhere' },
+]
+
 const translate = params.get('categories') === 'custom'
   // Only the custom keys need wording; everything else falls through to the packaged bundle,
   // which is exactly how a consumer with one extra category is expected to wire it.
@@ -57,6 +71,7 @@ const App: FC = () => {
       operator="Acme"
       privacyHref="https://example.test/privacy"
       termsHref="https://example.test/terms"
+      services={params.get('services') != null ? SERVICES : undefined}
     />}
     {/*
       Mounted in EVERY view, including alongside the policy page — that is how an application