---
url: https://docs.consentpro.com/changelog/web-components.md
---
# web-components

## 0.0.11

### Patch Changes

* Updated dependencies \[e7b804d]
  * consentpro-types@1.5.0
  * consentpro-dictionary@0.1.15

## 0.0.10

### Patch Changes

* consentpro-dictionary@0.1.14

## 0.0.9

### Patch Changes

* Updated dependencies \[2a448a5]
  * consentpro-types@1.4.2
  * consentpro-dictionary@0.1.13

## 0.0.8

### Patch Changes

* Updated dependencies \[2006604]
  * consentpro-types@1.4.1
  * consentpro-dictionary@0.1.12

## 0.0.7

### Patch Changes

* Updated dependencies \[0ef3fd1]
  * consentpro-types@1.4.0
  * consentpro-dictionary@0.1.11

## 0.0.6

### Patch Changes

* 3a60e4b: Update vulnerable transitive dependencies to patched versions.
* Updated dependencies \[3dc13a0]
  * consentpro-dictionary@0.1.10

## 0.0.5

### Patch Changes

* ba3ce20: Update Axios and SvelteKit to patched releases and refresh vulnerable transitive dependencies.
* Updated dependencies \[bb844a5]
* Updated dependencies \[c3fe401]
* Updated dependencies \[b821430]
* Updated dependencies \[9518dbb]
* Updated dependencies \[c3fe401]
  * consentpro-types@1.3.2
  * consentpro-dictionary@0.1.9

## 0.0.4

### Patch Changes

* Updated dependencies \[f5911a6]
  * consentpro-types@1.3.1
  * consentpro-dictionary@0.1.8

## 0.0.3

### Patch Changes

* consentpro-dictionary@0.1.7

## 0.0.2

### Patch Changes

* 9a490af: Pick the "Powered by Consent Pro" logo colour from the banner background.

  **consentpro-utils**

  * New `relativeLuminance` and `contrastingMonochrome` helpers: WCAG 2.1 relative luminance, and a black/white pick by contrast ratio against a background.

  **web-components**

  * `ConsentBanner`'s wordmark now reads `--consentpro-color-attribution`, falling back to the banner's own text colour. The wordmark is already `currentColor`, so the variable flips it; the "Powered by" label keeps the banner's text colour.

  **consentpro-v2 / web-app**

  * Both set `--consentpro-color-attribution` from the banner background, so the live banner and the style preview render the same logo.

* 8384efa: Show a placeholder overlay on iframes blocked for want of consent on custom (non-Webflow) sites.

  Custom sites have no pasted `fs-consent-element="placeholder"` markup, so a blocked embed simply lost its `src` and rendered as a blank box. The overlay now ships as a web component that `core/v2` swaps into the blocked iframe itself.

  **web-components**

  * New `<consentpro-placeholder>` custom element, built as its own `placeholder.js` CDN bundle. Like every other component in this package, its props are plain JS properties observed as no attribute, and its buttons dispatch bubbling, composed `consentpro:open-preferences` / `consentpro:allow` events.

  **consentpro-dictionary**

  * `getConsentCopy` returns a `placeholder` block (`message`, `preferencesText`, `acceptAllText`), so the overlay is localized like every other component.

  **server**

  * `GET /v2/cdn/web-components/placeholder.js` serves the new bundle, and `copy.json` carries the `placeholder` strings.

  **consentpro-v2**

  * `new/custom-site/placeholder.ts` builds the blocked iframe's document as a string, which the existing blob path swaps into the iframe's `src`. It is self-contained: the CDN module that registers the element, plus the script that waits for that registration, creates the element and assigns the copy as JS properties. No markup is parsed, mutated or serialized on the way, and the copy is escaped into the script rather than interpolated into HTML.
  * That script tag is pinned with the build-time `sha384` hash, so `placeholder.js` is now SRI-checked like the other component bundles.
  * Blocked iframes wire the overlay's events through `custom-site/events.ts`: the document is a same-origin `blob:`, so the component's `consentpro:*` events reach the consent-state layer directly.
  * A blocked iframe's own `sandbox` is stashed and dropped while the placeholder is shown, then restored verbatim before the original URL loads again. It applies to the untrusted embed, not to our placeholder, and without `allow-scripts` it kept the overlay from ever rendering.
  * `iframe-blocked` now fires once per blocked iframe, carrying the embed's URL. Re-rendering a placeholder whose copy arrived late no longer emits a second event whose `src` had already been replaced.

* d7331e4: Style the preferences toggle and the dialog backdrop from the web app.

  **web-app**

  * The Open preferences colours card now carries Toggle Inactive Track, Toggle Active Track (the former "Preferences Checkbox"), Toggle Circular Handle and Preferences Overlay. Left on their defaults the columns stay `null`, so an existing banner looks exactly as before.
  * `ColorField` takes an `alpha` prop: an opacity track under the hue slider, a checkerboard behind every swatch, and a hex field that accepts `#rrggbbaa`. Only the overlay opts in — a colour that paints a surface has nothing to be translucent over.
  * The overlay starts at no backdrop (`#00000000`). Choosing a colour on a transparent field lands at 20% opacity rather than staying invisible; the opacity track can still take it back to nothing.

  **web-components**

  * `ConsentPreferencesDialog`'s backdrop default drops from 10% black to `transparent`: a dialog washes the page only where a site asks for it. The backdrop box is unchanged otherwise, so click-to-close still works, and any site setting `--consentpro-color-overlay` is unaffected.

  **server / consentpro-types**

  * `checkbox_inactive_color`, `checkbox_handle_color` and `preferences_overlay_color` are read, validated and saved on `banner_settings` and `banner_instances`, and published as `checkboxInactive`, `checkboxHandle` and `preferencesOverlay`. The overlay column validates `#rrggbb` or `#rrggbbaa`; the rest stay six digits.

  **consentpro-v2**

  * Maps those to `--consentpro-color-toggle-off`, `--consentpro-color-toggle-thumb` and `--consentpro-color-overlay`. The handle keeps whatever colour is picked in both switch states — nothing recolours it from the track any more.

* Updated dependencies \[fecdc78]

* Updated dependencies \[fecdc78]

* Updated dependencies \[8384efa]

* Updated dependencies \[d3e426d]

* Updated dependencies \[a580774]

* Updated dependencies \[d7331e4]

* Updated dependencies \[2ebb655]
  * consentpro-types@1.3.0
  * consentpro-dictionary@0.1.6