@owlmeans/web-consent 0.1.18-rc.44 → 0.1.18-rc.46

package/README.md

@@ -14,7 +14,7 @@ The `web-consent` skill covers the components, the `consent` skill the model beh
 ## Installation
 
 ```bash
-bun add @owlmeans/web-consent@^0.1.18-rc.44
+bun add @owlmeans/web-consent@^0.1.18-rc.46
 ```
 
 Peer dependencies the app provides: `react`, `tailwindcss`, `tailwind-merge`, `clsx`, `lucide-react`.
@@ -49,7 +49,7 @@ Tailwind entry must scan the package's `src`:
 
 At the application root or layout. It opens itself when no decision is stored and renders only the
 re-open button once one is. A first-time visitor is asked with a tall bar across the bottom of a
-transparent overlay — "Cookie preferences", "Accept only mandatory", "Accept all" — and every later
+dimmed overlay — "Cookie preferences", "Accept only mandatory", "Accept all" — and every later
 opening is the preferences window; `mode="window"` asks with the window straight away.
 
 ```tsx
@@ -186,7 +186,7 @@ re-exported; import them from `@owlmeans/consent`.
 | Selector | Element |
 |---|---|
 | `[data-consent-dialog]` | whichever surface asks — the bar or the window (`data-consent-mode="bar\|window"`) |
-| `[data-consent-bar]`, `[data-consent-overlay]` | the bar, and the transparent overlay it sits on |
+| `[data-consent-bar]`, `[data-consent-overlay]` | the bar, and the dimmed overlay it sits on |
 | `[data-consent-preferences]`, `[data-consent-mandatory]`, `[data-consent-accept-all]` | the bar's three answers |
 | `[data-consent-save]`, `[data-consent-accept-all]` | the window's two actions |
 | `[data-consent-locating="first"]`, `[data-consent-spinner]` | the locating overlay and its spinner |
@@ -230,7 +230,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.52
+npx @owlmeans/agent-skills@^0.1.18-rc.55
 ```
 
 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.44",
-  "generatedAt": "2026-10-08T21:27:54.304Z",
+  "version": "0.1.18-rc.46",
+  "generatedAt": "2026-10-16T22:27:59.065Z",
   "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.44"` in `dependencies`
+**Install:** `"@owlmeans/web-consent": "^0.1.18-rc.46"` 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**
@@ -108,8 +108,8 @@ import { CookieConsent } from '@owlmeans/web-consent'
 
 ## The bar
 
-A tall bar across the bottom of a **transparent** overlay (`[data-consent-overlay]`,
-`fixed inset-0 bg-transparent`): the page stays in sight and scrolls, but nothing on it can be
+A tall bar across the bottom of a **dimmed** overlay (`[data-consent-overlay]`,
+`fixed inset-0 bg-black/70`): the page stays in sight and scrolls, but nothing on it can be
 pressed until the visitor answers. The bar (`fixed inset-x-0 bottom-0 max-h-[85vh] border-t
 bg-background`) holds, left to right on a wide screen and stacked on a phone:
 
@@ -140,7 +140,8 @@ follow the flat rule those apps are held to: **no gradient, shadow, glow, glass
 
 | Part | Classes |
 |---|---|
-| Bar overlay, locating overlay | `bg-transparent` — the page stays in sight |
+| Bar overlay | `bg-black/70`, matching the preferences window — the page is dimmed beneath the opaque bar |
+| Locating overlay | `bg-transparent` — a quick region lookup flashes no backdrop |
 | Bar | `border-t border-border bg-background text-foreground`, no shadow |
 | Bar answers | "Accept only mandatory" and "Accept All" both the accent pill; "Cookie preferences" outlined |
 | Spinner | `text-muted-foreground motion-safe:animate-spin` |

package/build/consent/bar.d.ts

@@ -3,7 +3,7 @@ import type { ConsentBarProps } from './types.local.js';
 /**
  * The first question a visitor is asked, as a tall bar across the bottom of the page.
  *
- * It sits on a TRANSPARENT overlay: the page stays in sight and scrolls, but nothing on it can be
+ * It sits on a dimmed overlay: the page stays in sight and scrolls, but nothing on it can be
  * pressed until the visitor answers. The text says what the essential cookies do, names the
  * optional categories in force (as a list after a colon, so no language has to decline a label),
  * that they stay off until allowed, and that the choice can be changed or withdrawn — then the

package/build/consent/bar.js

@@ -9,7 +9,7 @@ import { ConsentLinks } from './links.js';
 /**
  * The first question a visitor is asked, as a tall bar across the bottom of the page.
  *
- * It sits on a TRANSPARENT overlay: the page stays in sight and scrolls, but nothing on it can be
+ * It sits on a dimmed overlay: the page stays in sight and scrolls, but nothing on it can be
  * pressed until the visitor answers. The text says what the essential cookies do, names the
  * optional categories in force (as a list after a colon, so no language has to decline a label),
  * that they stay off until allowed, and that the choice can be changed or withdrawn — then the
@@ -32,6 +32,6 @@ export const ConsentBar = props => {
     const description = optional.length > 0
         ? consentI18nHelper.interpolate(t('barDescription', 'We use essential cookies to make this site work — for signing in, security and remembering your choices. With your consent we would also use these optional cookies: {{categories}}. They stay off until you allow them, and you can change or withdraw your choice at any time in the cookie preferences.'), { categories: optional.map(category => t(category.labelKey, category.key)).join(', ') })
         : t('barDescriptionEssential', 'This site uses only essential cookies — for signing in, security and remembering your choices. They need no consent and cannot be switched off.');
-    return _jsx("div", { className: "fixed inset-0 z-[999998] bg-transparent", "data-consent-overlay": true, children: _jsx("div", { ref: surface, tabIndex: -1, className: webConsentUtils.cn('fixed inset-x-0 bottom-0 z-[999999] max-h-[85vh] overflow-y-auto border-t border-border bg-background text-foreground outline-none', props.barClassName), role: "dialog", "aria-modal": "true", "aria-labelledby": "cc-bar-title", "aria-describedby": domains.length > 1 ? 'cc-bar-desc cc-bar-domains' : 'cc-bar-desc', "data-consent-dialog": true, "data-consent-bar": true, "data-consent-mode": "bar", children: _jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-6 px-4 py-6 sm:px-8 sm:py-8 lg:flex-row lg:items-end lg:gap-10", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-3 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-bar-title", className: "text-balance text-lg font-extrabold tracking-tight text-foreground sm:text-xl", children: t('barTitle', 'Cookies on this site') })] }), _jsx("p", { id: "cc-bar-desc", className: "text-pretty text-sm leading-relaxed text-muted-foreground", children: description }), domains.length > 1 && _jsx("p", { id: "cc-bar-domains", "data-consent-domains": true, className: "mt-2 text-pretty text-xs text-muted-foreground", children: consentI18nHelper.interpolate(t('domains', 'This choice applies to {{domains}}.'), { domains: domains.join(', ') }) }), _jsx(ConsentLinks, { t: t, policyHref: props.policyHref, links: props.links, className: "mt-1" })] }), _jsxs("div", { className: "flex w-full flex-col gap-3 sm:flex-row sm:flex-wrap sm:justify-end lg:w-auto lg:max-w-xl lg:flex-shrink-0", children: [_jsx("button", { type: "button", onClick: props.onPreferences, "data-consent-preferences": true, className: webConsentUtils.cn(BAR_PILL, OUTLINED), children: t('openPreferences', 'Cookie preferences') }), optional.length > 0 && _jsx("button", { type: "button", onClick: props.onMandatory, "data-consent-mandatory": true, className: webConsentUtils.cn(BAR_PILL, ACCENT), children: t('acceptMandatory', 'Accept only mandatory') }), _jsx("button", { type: "button", onClick: props.onAcceptAll, "data-consent-accept-all": true, className: webConsentUtils.cn(BAR_PILL, ACCENT), children: t('acceptAll', 'Accept All') })] })] }) }) });
+    return _jsx("div", { className: "fixed inset-0 z-[999998] bg-black/70", "data-consent-overlay": true, children: _jsx("div", { ref: surface, tabIndex: -1, className: webConsentUtils.cn('fixed inset-x-0 bottom-0 z-[999999] max-h-[85vh] overflow-y-auto border-t border-border bg-background text-foreground outline-none', props.barClassName), role: "dialog", "aria-modal": "true", "aria-labelledby": "cc-bar-title", "aria-describedby": domains.length > 1 ? 'cc-bar-desc cc-bar-domains' : 'cc-bar-desc', "data-consent-dialog": true, "data-consent-bar": true, "data-consent-mode": "bar", children: _jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-6 px-4 py-6 sm:px-8 sm:py-8 lg:flex-row lg:items-end lg:gap-10", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-3 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-bar-title", className: "text-balance text-lg font-extrabold tracking-tight text-foreground sm:text-xl", children: t('barTitle', 'Cookies on this site') })] }), _jsx("p", { id: "cc-bar-desc", className: "text-pretty text-sm leading-relaxed text-muted-foreground", children: description }), domains.length > 1 && _jsx("p", { id: "cc-bar-domains", "data-consent-domains": true, className: "mt-2 text-pretty text-xs text-muted-foreground", children: consentI18nHelper.interpolate(t('domains', 'This choice applies to {{domains}}.'), { domains: domains.join(', ') }) }), _jsx(ConsentLinks, { t: t, policyHref: props.policyHref, links: props.links, className: "mt-1" })] }), _jsxs("div", { className: "flex w-full flex-col gap-3 sm:flex-row sm:flex-wrap sm:justify-end lg:w-auto lg:max-w-xl lg:flex-shrink-0", children: [_jsx("button", { type: "button", onClick: props.onPreferences, "data-consent-preferences": true, className: webConsentUtils.cn(BAR_PILL, OUTLINED), children: t('openPreferences', 'Cookie preferences') }), optional.length > 0 && _jsx("button", { type: "button", onClick: props.onMandatory, "data-consent-mandatory": true, className: webConsentUtils.cn(BAR_PILL, ACCENT), children: t('acceptMandatory', 'Accept only mandatory') }), _jsx("button", { type: "button", onClick: props.onAcceptAll, "data-consent-accept-all": true, className: webConsentUtils.cn(BAR_PILL, ACCENT), children: t('acceptAll', 'Accept All') })] })] }) }) });
 };
 //# sourceMappingURL=bar.js.map

package/build/consent/bar.js.map

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

package/build/consent/locating.d.ts

@@ -1,7 +1,7 @@
 import { type FC } from 'react';
 import type { ConsentLocatingProps } from './types.local.js';
 /**
- * While the visitor's country is being found: the same transparent overlay the bar sits on — the
+ * While the visitor's country is being found: a transparent overlay — the
  * page stays in sight and out of reach — with a spinner and no bar. The spinner itself waits
  * `CONSENT_LOCATING_DELAY`, so an answer from the edge in a few milliseconds flashes nothing; the
  * status text is there from the start for assistive technology.

package/build/consent/locating.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { LoaderCircle } from 'lucide-react';
 import { CONSENT_LOCATING_DELAY } from './consts.local.js';
 /**
- * While the visitor's country is being found: the same transparent overlay the bar sits on — the
+ * While the visitor's country is being found: a transparent overlay — the
  * page stays in sight and out of reach — with a spinner and no bar. The spinner itself waits
  * `CONSENT_LOCATING_DELAY`, so an answer from the edge in a few milliseconds flashes nothing; the
  * status text is there from the start for assistive technology.

package/build/types.d.ts

@@ -1,6 +1,6 @@
 import type { ConsentCategory, ConsentGeoOptions, ConsentLinkerOptions, ConsentLocating, ConsentReason, ConsentRecord, ConsentService } from '@owlmeans/consent';
 /**
- * How a first-time visitor is asked: `bar` — a tall bar across the bottom of a transparent overlay
+ * How a first-time visitor is asked: `bar` — a tall bar across the bottom of a dimmed overlay
  * that blocks the page but leaves it in sight, with "Cookie preferences", "Accept only mandatory" and
  * "Accept all" — or `window`, the preferences window straight away. Either way every later opening
  * (the bar's own "Cookie preferences", a footer link, the corner button, the sign-in gate) is the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/web-consent",
-  "version": "0.1.18-rc.44",
+  "version": "0.1.18-rc.46",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@owlmeans/dep-config": "workspace:*",
-    "@owlmeans/test-ui": "^0.1.18-rc.51",
+    "@owlmeans/test-ui": "^0.1.18-rc.53",
     "@tailwindcss/vite": "^4.3.3",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",

package/src/consent/bar.tsx

@@ -10,7 +10,7 @@ import type { ConsentBarProps } from './types.local.js'
 /**
  * The first question a visitor is asked, as a tall bar across the bottom of the page.
  *
- * It sits on a TRANSPARENT overlay: the page stays in sight and scrolls, but nothing on it can be
+ * It sits on a dimmed overlay: the page stays in sight and scrolls, but nothing on it can be
  * pressed until the visitor answers. The text says what the essential cookies do, names the
  * optional categories in force (as a list after a colon, so no language has to decline a label),
  * that they stay off until allowed, and that the choice can be changed or withdrawn — then the
@@ -38,7 +38,7 @@ export const ConsentBar: FC<ConsentBarProps> = props => {
     )
     : t('barDescriptionEssential', 'This site uses only essential cookies — for signing in, security and remembering your choices. They need no consent and cannot be switched off.')
 
-  return <div className="fixed inset-0 z-[999998] bg-transparent" data-consent-overlay>
+  return <div className="fixed inset-0 z-[999998] bg-black/70" data-consent-overlay>
     <div
       ref={surface} tabIndex={-1}
       className={webConsentUtils.cn(

package/src/consent/locating.tsx

@@ -4,7 +4,7 @@ import { CONSENT_LOCATING_DELAY } from './consts.local.js'
 import type { ConsentLocatingProps } from './types.local.js'
 
 /**
- * While the visitor's country is being found: the same transparent overlay the bar sits on — the
+ * While the visitor's country is being found: a transparent overlay — the
  * page stays in sight and out of reach — with a spinner and no bar. The spinner itself waits
  * `CONSENT_LOCATING_DELAY`, so an answer from the edge in a few milliseconds flashes nothing; the
  * status text is there from the start for assistive technology.

package/src/types.ts

@@ -4,7 +4,7 @@ import type {
 } from '@owlmeans/consent'
 
 /**
- * How a first-time visitor is asked: `bar` — a tall bar across the bottom of a transparent overlay
+ * How a first-time visitor is asked: `bar` — a tall bar across the bottom of a dimmed overlay
  * that blocks the page but leaves it in sight, with "Cookie preferences", "Accept only mandatory" and
  * "Accept all" — or `window`, the preferences window straight away. Either way every later opening
  * (the bar's own "Cookie preferences", a footer link, the corner button, the sign-in gate) is the

package/tests/bar.spec.ts

@@ -107,7 +107,7 @@ describe('@owlmeans/web-consent — the bar', () => {
     }
   }, TIMEOUT)
 
-  test('the bar is flat, sits on a transparent overlay, and both answers are equally prominent', async () => {
+  test('the bar is flat, sits on a dimmed overlay, and both answers are equally prominent', async () => {
     const { page, close } = await mountComponent({ url: `${base}/` })
     try {
       const bar = page.locator('[data-consent-bar]')
@@ -117,7 +117,7 @@ describe('@owlmeans/web-consent — the bar', () => {
         .map(element => element.getAttribute('class') ?? '').join(' '))
 
       expect(classes).not.toMatch(/\b(?:bg-gradient|from-|to-secondary|backdrop-|blur|shadow|ring-primary)/)
-      expect(await overlay.getAttribute('class')).toMatch(/\bbg-transparent\b/)
+      expect(await overlay.getAttribute('class')).toContain('bg-black/70')
       expect(await overlay.getAttribute('class')).toMatch(/\binset-0\b/)
       expect(await bar.getAttribute('class')).toMatch(/\bbottom-0\b/)
       expect(await bar.getAttribute('class')).toMatch(/\bbg-background\b/)
@@ -141,8 +141,8 @@ describe('@owlmeans/web-consent — the bar', () => {
     }
   }, TIMEOUT)
 
-  test('styled: the page stays in sight and out of reach, the bar sits at the very bottom', async () => {
-    const { page, close } = await mountComponent({ url: `${base}/?styled=1` })
+  test.each(['light', 'dark'])('styled (%s): the page is dimmed and out of reach, the bar sits at the very bottom', async theme => {
+    const { page, close } = await mountComponent({ url: `${base}/?styled=1&theme=${theme}` })
     try {
       const bar = page.locator('[data-consent-bar]')
       await bar.waitFor()
@@ -153,15 +153,23 @@ describe('@owlmeans/web-consent — the bar', () => {
       expect(Math.round(box.width)).toBe(viewport.width)
       const blocked = await page.evaluate(() => {
         const hit = document.elementFromPoint(10, 10)
+        const canvas = document.createElement('canvas')
+        canvas.width = canvas.height = 1
+        const context = canvas.getContext('2d')!
+        context.fillStyle = hit == null ? 'transparent' : getComputedStyle(hit).backgroundColor
+        context.fillRect(0, 0, 1, 1)
 
         return {
           overlay: hit?.closest('[data-consent-overlay]') != null,
-          background: hit == null ? null : getComputedStyle(hit).backgroundColor,
+          background: Array.from(context.getImageData(0, 0, 1, 1).data),
+          opacity: hit == null ? null : getComputedStyle(hit).opacity,
         }
       })
-      // The page's own top-left corner is covered by the overlay — and the overlay paints nothing.
+      // Dim the page with the same translucent black as the preferences window, in both themes.
       expect(blocked.overlay).toBe(true)
-      expect(blocked.background).toBe('rgba(0, 0, 0, 0)')
+      expect(blocked.background).toEqual([0, 0, 0, 179])
+      expect(blocked.opacity).toBe('1')
+      expect(await bar.evaluate(root => getComputedStyle(root).opacity)).toBe('1')
       // The remount button under the overlay cannot be pressed.
       await expect(page.locator('#remount').click({ timeout: 1_000 })).rejects.toThrow()
     } finally {