@madgex/design-system 14.1.0 → 14.2.0

package/src/components/consent-gate/consent-gate.js

@@ -0,0 +1,289 @@
+/* eslint-disable n/no-unsupported-features/node-builtins -- browser-only module */
+/**
+ * `<mds-consent-gate>` — generic consent gate for any third-party content.
+ *
+ * Wraps arbitrary HTML in a `<template>` and keeps it inert until the user
+ * explicitly grants consent for the given `category`. On grant, the template
+ * is cloned into the mount point. On revoke, the clone is removed (killing
+ * any active network connections such as iframes).
+ *
+ * Integrates with any CMP (e.g. OneTrust) via `setConsentAdapter()`.
+ *
+ * Public attribute → state attribute mapping is collapsed onto a single
+ * `data-state` host attribute so all visibility is driven from CSS:
+ *   absent             — pre-mount / not-yet-upgraded (no-JS fallback)
+ *   "error"            — config error; only [slot=fallback] visible
+ *   "placeholder"      — awaiting consent; placeholder UI visible
+ *   "consented"        — content cloned into [part=content]
+ */
+import { has, grant, subscribe } from './consent-store.js';
+export { setConsentAdapter } from './consent-store.js';
+
+const DEFAULT_I18N = Object.freeze({
+  acceptLabel: 'Load content',
+  consentMessage: 'Loads content from a third-party provider, which may set cookies and collect personal data.',
+});
+
+const STYLE_HOOK_PROPS = {
+  'aspect-ratio': '--mds-consent-gate-aspect-ratio',
+  'preview-image': '--mds-consent-gate-preview-image',
+};
+const STYLE_ATTRS = Object.keys(STYLE_HOOK_PROPS);
+
+/** Direct-child element types that load network resources and must be wrapped in <template>. */
+const BARE_CONTENT_SELECTOR = ':scope > iframe, :scope > embed, :scope > object, :scope > script[src]';
+
+let nextId = 0;
+
+function isPlainObject(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+/** @returns {Record<string, unknown>} */
+function parsedI18nFromAttribute(raw) {
+  if (raw == null || raw === '') return {};
+  try {
+    const value = JSON.parse(raw);
+    return isPlainObject(value) ? value : {};
+  } catch {
+    return {};
+  }
+}
+
+export class MdsConsentGate extends HTMLElement {
+  static observedAttributes = ['category', 'i18n', ...STYLE_ATTRS];
+
+  #placeholder = null;
+  #message = null;
+  #accept = null;
+  #content = null;
+  #headingWrap = null;
+  #unsubscribe = null;
+  #connected = false;
+
+  get #mountPoint() {
+    return this.shadowRoot ?? this;
+  }
+
+  constructor() {
+    super();
+    this.#buildPlaceholder();
+  }
+
+  // ─── Lifecycle ─────────────────────────────────────────────────────────────
+
+  connectedCallback() {
+    // Re-parent the authored [slot="heading"] element into the wrapper so both
+    // light and shadow DOM paths share the same [part="heading-wrap"] CSS selectors.
+    const heading = this.querySelector(':scope > [slot="heading"]');
+    if (heading) this.#headingWrap.append(heading);
+    this.#applyStyleHooks();
+    this.#applyText();
+    this.#mountPoint.append(this.#headingWrap, this.#placeholder, this.#content);
+    this.#mountPoint.addEventListener('click', this.#onClick);
+    this.#unsubscribe = subscribe(this.#onConsentChange);
+    this.#checkBareContent();
+    this.#connected = true;
+    this.#syncState();
+  }
+
+  disconnectedCallback() {
+    this.#mountPoint.removeEventListener('click', this.#onClick);
+    this.#unsubscribe?.();
+    this.#unsubscribe = null;
+    this.append(...this.#headingWrap.children);
+    this.#headingWrap.remove();
+    this.#placeholder.remove();
+    this.#content.replaceChildren();
+    this.#content.remove();
+    delete this.dataset.state;
+    this.#connected = false;
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#connected) return;
+    if (STYLE_ATTRS.includes(name)) {
+      this.#applyStyleHook(name, newValue);
+      return;
+    }
+    if (name === 'i18n') {
+      this.#applyText();
+      return;
+    }
+    if (name === 'category') {
+      this.#content.replaceChildren();
+      this.#syncState();
+    }
+  }
+
+  // ─── DOM scaffolding ───────────────────────────────────────────────────────
+
+  #buildPlaceholder() {
+    const descId = `mds-consent-gate-msg-${++nextId}`;
+
+    this.#placeholder = document.createElement('div');
+    this.#placeholder.setAttribute('part', 'placeholder');
+
+    this.#message = document.createElement('p');
+    this.#message.id = descId;
+    this.#message.setAttribute('part', 'consent-message');
+
+    this.#accept = document.createElement('button');
+    this.#accept.type = 'button';
+    this.#accept.className = 'mds-button';
+    this.#accept.setAttribute('part', 'accept');
+    this.#accept.setAttribute('aria-describedby', descId);
+
+    const overlay = document.createElement('div');
+    overlay.setAttribute('part', 'consent-overlay');
+    overlay.append(this.#message, this.#accept);
+
+    this.#placeholder.append(overlay);
+
+    this.#content = document.createElement('div');
+    this.#content.setAttribute('part', 'content');
+
+    this.#headingWrap = document.createElement('div');
+    this.#headingWrap.setAttribute('part', 'heading-wrap');
+  }
+
+  // ─── State ─────────────────────────────────────────────────────────────────
+
+  #syncState() {
+    const category = this.getAttribute('category');
+    if (!category) {
+      this.#setError('no-category');
+      return;
+    }
+
+    const template = this.#getTemplate();
+    if (!template) {
+      this.#setError('no-template');
+      return;
+    }
+
+    if (has(category)) {
+      this.#cloneInto(category, template);
+    } else {
+      this.dataset.state = 'placeholder';
+    }
+  }
+
+  #setError(reason) {
+    this.dataset.state = 'error';
+    this.#dispatch('mds-consent-gate:error', { reason });
+  }
+
+  #cloneInto(category, template) {
+    const fragment = template.content.cloneNode(true);
+    rehydrateScripts(fragment);
+    this.#content.replaceChildren(fragment);
+    this.dataset.state = 'consented';
+    this.#dispatch('mds-consent-gate:grant', { category, container: this.#content });
+  }
+
+  // ─── Style hooks / text ────────────────────────────────────────────────────
+
+  #applyStyleHook(name, value) {
+    const property = STYLE_HOOK_PROPS[name];
+    if (!property) return;
+    if (value === null) {
+      this.style.removeProperty(property);
+      return;
+    }
+    this.style.setProperty(property, name === 'preview-image' ? `url("${value}")` : value);
+  }
+
+  #applyStyleHooks() {
+    for (const name of STYLE_ATTRS) {
+      this.#applyStyleHook(name, this.getAttribute(name));
+    }
+  }
+
+  #applyText() {
+    const { acceptLabel, consentMessage } = this.#resolvedI18nStrings();
+    this.#message.textContent = consentMessage;
+    this.#accept.textContent = acceptLabel;
+  }
+
+  /**
+   * Reads `i18n` JSON from host; merges with defaults.
+   * Non-object parse results, non-string values, and empty strings fall back per field.
+   */
+  #resolvedI18nStrings() {
+    const parsed = parsedI18nFromAttribute(this.getAttribute('i18n'));
+    /** @type {Record<string, string>} */
+    const out = {};
+    for (const key of Object.keys(DEFAULT_I18N)) {
+      const v = parsed[key];
+      out[key] = typeof v === 'string' && v.length > 0 ? v : DEFAULT_I18N[key];
+    }
+    return out;
+  }
+
+  // ─── Authoring guards ──────────────────────────────────────────────────────
+
+  #getTemplate() {
+    return this.querySelector(':scope > template');
+  }
+
+  #checkBareContent() {
+    if (!this.querySelector(BARE_CONTENT_SELECTOR)) return;
+    console.warn(
+      '[mds-consent-gate] Direct child <iframe>, <script src>, <embed> or <object> found outside ' +
+        '<template>. Content has already loaded — wrap in <template> for VPPA/GDPR compliance.',
+    );
+    this.#dispatch('mds-consent-gate:error', { reason: 'unwrapped-content' });
+  }
+
+  // ─── Events ────────────────────────────────────────────────────────────────
+
+  #dispatch(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+  }
+
+  #onClick = (event) => {
+    const category = this.getAttribute('category');
+    if (!category) return;
+    if (event.target.closest('[part="accept"]')) {
+      grant(category);
+    }
+  };
+
+  #onConsentChange = (category, granted) => {
+    const current = this.getAttribute('category');
+    if (category !== current) return;
+
+    const isConsented = this.dataset.state === 'consented';
+
+    if (granted && !isConsented) {
+      const template = this.#getTemplate();
+      if (template) this.#cloneInto(current, template);
+      return;
+    }
+
+    if (!granted && isConsented) {
+      this.#content.replaceChildren();
+      this.dataset.state = 'placeholder';
+      this.#dispatch('mds-consent-gate:revoke', { category: current });
+    }
+  };
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Replace <script> elements in a DocumentFragment with fresh ones so they
+ * execute when inserted. Cloned template scripts have their "already started"
+ * flag set per spec and do not execute otherwise.
+ */
+function rehydrateScripts(fragment) {
+  for (const script of [...fragment.querySelectorAll('script')]) {
+    const fresh = document.createElement('script');
+    for (const { name, value } of script.attributes) {
+      fresh.setAttribute(name, value);
+    }
+    fresh.textContent = script.textContent;
+    script.replaceWith(fresh);
+  }
+}

package/src/components/consent-gate/consent-gate.njk

@@ -0,0 +1,203 @@
+<script type="module" src="/js/components/mds-consent-gate-standalone.js"></script>
+
+<style>
+  .revoke-row { margin-top: 12px; }
+
+  /* Intentionally gross styles to demonstrate shadow DOM isolation. */
+  .isolation-demo [part='consent-message'] {
+    background: hotpink !important;
+    color: yellow !important;
+    font-family: 'Comic Sans MS', cursive !important;
+    font-size: 1.5em !important;
+    transform: rotate(-3deg) !important;
+  }
+  .isolation-demo [part='accept'] {
+    background: lime !important;
+    color: red !important;
+    border: 4px dashed blue !important;
+    transform: rotate(3deg) !important;
+  }
+</style>
+
+{# ── YouTube ─────────────────────────────────────────────────────────────── #}
+<h2>YouTube embed</h2>
+<p>Category: <code>youtube</code>. Defers the YouTube embed and tracking requests until consent.</p>
+<mds-consent-gate category="youtube" aspect-ratio="16 / 9">
+  <span slot="heading">Big Buck Bunny (Blender Foundation)</span>
+  <template>
+    <iframe
+      src="https://www.youtube.com/embed/aqz-KE-bpKQ"
+      title="Big Buck Bunny (Blender Foundation)"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+      allowfullscreen
+      style="width:100%;height:100%;border:0"
+    ></iframe>
+  </template>
+  <a slot="fallback" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">Watch on YouTube</a>
+</mds-consent-gate>
+
+{# ── YouTube with preview image ──────────────────────────────────────────── #}
+<h2>YouTube (nocookie) with self-hosted preview image (4:3 aspect ratio)</h2>
+<p>
+  A self-hosted thumbnail avoids any third-party request before consent. Use a locally-stored
+  screenshot or video thumbnail exported from your CMS.
+</p>
+<mds-consent-gate
+  category="youtube"
+  aspect-ratio="4 / 3"
+  preview-image="/assets/images/image-cropper-example-wide.jpg"
+>
+  <span slot="heading">Big Buck Bunny (Blender Foundation)</span>
+  <template>
+    <iframe
+      src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ"
+      title="Big Buck Bunny (Blender Foundation)"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+      allowfullscreen
+      style="width:100%;height:100%;border:0"
+    ></iframe>
+  </template>
+  <a slot="fallback" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">Watch on YouTube</a>
+</mds-consent-gate>
+
+<p class="revoke-row">
+  <button type="button" data-revoke-category="youtube">Revoke YouTube consent</button>
+</p>
+
+{# ── Vimeo ───────────────────────────────────────────────────────────────── #}
+<h2>Vimeo embed</h2>
+<p>Category: <code>vimeo</code>. Use <code>?dnt=1</code> on the embed URL to opt out of Vimeo tracking.</p>
+<mds-consent-gate category="vimeo" aspect-ratio="16 / 9">
+  <span slot="heading">The Mountain (Terje Sorgjerd)</span>
+  <template>
+    <iframe
+      src="https://player.vimeo.com/video/76979871?dnt=1"
+      title="The Mountain (Terje Sorgjerd)"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+      allowfullscreen
+      style="width:100%;height:100%;border:0"
+    ></iframe>
+  </template>
+  <a slot="fallback" href="https://vimeo.com/76979871">Watch on Vimeo</a>
+</mds-consent-gate>
+
+<p class="revoke-row">
+  <button type="button" data-revoke-category="vimeo">Revoke Vimeo consent</button>
+</p>
+
+{# ── Google Maps ─────────────────────────────────────────────────────────── #}
+<h2>Google Maps embed</h2>
+<p>Category: <code>google-maps</code>. Defers the Maps tile/tracking requests until consent.</p>
+<mds-consent-gate
+  category="google-maps"
+  aspect-ratio="16 / 9"
+  preview-image="/assets/images/royal-pavilion-brighton.jpg"
+>
+  <span slot="heading">Brighton Royal Pavilion</span>
+  <template>
+    <iframe
+      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2519.8796057891!2d-0.1383!3d50.8218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4875850af1a46c71%3A0xde3e07af1ef5d8cb!2sBrighton%20Royal%20Pavilion!5e0!3m2!1sen!2suk!4v1700000000000!5m2!1sen!2suk"
+      title="Brighton Royal Pavilion on Google Maps"
+      loading="lazy"
+      referrerpolicy="no-referrer-when-downgrade"
+      allowfullscreen
+      style="width:100%;height:100%;border:0"
+    ></iframe>
+  </template>
+  <a slot="fallback" href="https://maps.google.com/?q=Brighton+Royal+Pavilion">View on Google Maps</a>
+</mds-consent-gate>
+
+<p class="revoke-row">
+  <button type="button" data-revoke-category="google-maps">Revoke Google Maps consent</button>
+</p>
+
+{# ── Internationalisation ────────────────────────────────────────────────── #}
+<h2>Internationalisation (French)</h2>
+<p>
+  Localise the placeholder with the <code>i18n</code> attribute (JSON object with
+  <code>acceptLabel</code> and <code>consentMessage</code>). The host language
+  (e.g. via <code>&lt;html lang&gt;</code>) is left to the page.
+</p>
+<mds-consent-gate
+  category="youtube-fr"
+  aspect-ratio="16 / 9"
+  i18n='{"acceptLabel":"Charger le contenu","consentMessage":"Charge un contenu d’un fournisseur tiers, qui peut déposer des cookies et collecter des données personnelles."}'
+  lang="fr"
+>
+  <span slot="heading">Big Buck Bunny (Fondation Blender)</span>
+  <template>
+    <iframe
+      src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?hl=fr&cc_lang_pref=fr"
+      title="Big Buck Bunny (Fondation Blender)"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+      allowfullscreen
+      style="width:100%;height:100%;border:0"
+    ></iframe>
+  </template>
+  <a slot="fallback" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">Voir sur YouTube</a>
+</mds-consent-gate>
+
+<p class="revoke-row">
+  <button type="button" data-revoke-category="youtube-fr">Revoke demo consent</button>
+</p>
+
+{# ── Style isolation demo ────────────────────────────────────────────────── #}
+<h2>Style isolation: light DOM vs standalone</h2>
+<p>
+  This page has intentionally gross CSS rules targeting <code>[part='consent-message']</code>
+  and <code>[part='accept']</code>. The light-DOM version inherits them; the standalone version
+  is isolated inside its shadow root and should be unaffected.
+</p>
+
+<div class="isolation-demo" style="display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;">
+  <div>
+    <h3>Light DOM <code>&lt;mds-consent-gate&gt;</code></h3>
+    <p>Inherits page CSS — gross styles visible.</p>
+    <mds-consent-gate category="youtube-isolation-demo" aspect-ratio="16 / 9">
+      <span slot="heading">Light DOM</span>
+      <template>
+        <iframe
+          src="https://www.youtube.com/embed/aqz-KE-bpKQ"
+          title="Big Buck Bunny"
+          style="width:100%;height:100%;border:0"
+        ></iframe>
+      </template>
+      <a slot="fallback" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">Watch on YouTube</a>
+    </mds-consent-gate>
+  </div>
+  <div>
+    <h3>Standalone <code>&lt;mds-consent-gate-standalone&gt;</code></h3>
+    <p>Shadow DOM isolated — gross styles should not apply.</p>
+    <mds-consent-gate-standalone category="youtube-isolation-demo" aspect-ratio="16 / 9">
+      <span slot="heading">Standalone</span>
+      <template>
+        <iframe
+          src="https://www.youtube.com/embed/aqz-KE-bpKQ"
+          title="Big Buck Bunny"
+          style="width:100%;height:100%;border:0"
+        ></iframe>
+      </template>
+      <a slot="fallback" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">Watch on YouTube</a>
+    </mds-consent-gate-standalone>
+  </div>
+</div>
+
+<p class="revoke-row">
+  <button type="button" data-revoke-category="youtube-isolation-demo">Revoke isolation demo consent</button>
+</p>
+
+<script type="module">
+  import { revoke } from '/js/components/mds-consent-gate-standalone.js';
+  document.addEventListener('click', (event) => {
+    const btn = event.target.closest('[data-revoke-category]');
+    if (btn) revoke(btn.dataset.revokeCategory);
+  });
+</script>

package/src/components/consent-gate/consent-gate.scss

@@ -0,0 +1,138 @@
+/* `<mds-consent-gate>` styles.
+ *
+ * Two parallel selector tracks share one stylesheet:
+ *   - `:where(mds-consent-gate, mds-consent-gate-standalone)` — the light-DOM
+ *     bundle path, where the custom element host *is* the styled box.
+ *   - `:host` / `::slotted(...)` — adopted into the standalone variant's
+ *     shadow root. Inert when the same stylesheet is loaded from the main DS
+ *     bundle (no shadow context, no slotted content).
+ *
+ * Visibility is driven entirely by a single host data-state attribute:
+ *   absent             — pre-mount / no-JS: only [slot=fallback] visible
+ *   "error"            — config error: only [slot=fallback] visible
+ *   "placeholder"      — awaiting consent: heading + placeholder + fallback
+ *   "consented"        — content cloned: only [part=content] visible
+ */
+
+/* ─── Frame (placeholder + error states) ─────────────────────────────────── */
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='placeholder'],
+:host([data-state='placeholder']) {
+  --mds-consent-gate-bg: var(--mds-color-neutral-darkest, #000);
+  --mds-consent-gate-overlay-bg: rgb(0 0 0 / 0.65);
+
+  display: block;
+  position: relative;
+  aspect-ratio: var(--mds-consent-gate-aspect-ratio);
+  background-color: var(--mds-consent-gate-bg);
+  background-image: var(--mds-consent-gate-preview-image, none);
+  background-size: cover;
+  background-position: center;
+  color: var(--mds-color-text-invert, #fff);
+  overflow: hidden;
+}
+
+/* ─── Pre-mount / error: collapse, fallback link only ────────────────────── */
+:where(mds-consent-gate, mds-consent-gate-standalone):not([data-state]),
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='error'],
+:host(:not([data-state])),
+:host([data-state='error']) {
+  display: contents;
+}
+
+:where(mds-consent-gate, mds-consent-gate-standalone):not([data-state]) > :not([slot='fallback']),
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='error'] > :not([slot='fallback']) {
+  display: none;
+}
+
+:where(mds-consent-gate, mds-consent-gate-standalone):not([data-state]) > [slot='fallback'],
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='error'] > [slot='fallback'] {
+  all: revert;
+}
+
+/* In shadow context the only authored children are slotted; everything in the
+   shadow tree (placeholder, content, heading slot) gets hidden via the wrapping
+   `display: contents` above. The fallback slot still projects. */
+
+/* ─── Consented: show only content ───────────────────────────────────────── */
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='consented'],
+:host([data-state='consented']) {
+  display: block;
+}
+
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='consented'] > [slot='heading'],
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='consented'] > [slot='fallback'],
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='consented'] > template,
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='consented'] > [part='placeholder'],
+:host([data-state='consented']) [part='heading-wrap'],
+:host([data-state='consented']) ::slotted([slot='fallback']),
+:host([data-state='consented']) [part='placeholder'] {
+  display: none;
+}
+
+/* ─── Placeholder UI (only painted when [data-state=placeholder]) ────────── */
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='placeholder']
+  > :not([part='placeholder']):not([part='heading-wrap']):not([slot='heading']):not([slot='fallback']),
+:host([data-state='placeholder']) [part='content'] {
+  display: none;
+}
+
+[part='placeholder'] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mds-size-spacing-base, 1rem);
+  text-align: center;
+}
+
+/* ─── Shared overlay backdrop (consent-overlay, heading, fallback) ──────── */
+[part='consent-overlay'],
+[part='heading-wrap'],
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='placeholder'] > [slot='fallback'],
+:host([data-state='placeholder']) ::slotted([slot='fallback']) {
+  padding: 0.625rem 1rem;
+  background: var(--mds-consent-gate-overlay-bg);
+  border-radius: var(--mds-size-border-radius-base, 4px);
+}
+
+[part='consent-overlay'] {
+  max-width: 40ch;
+  z-index: 1;
+}
+
+[part='consent-message'] {
+  margin: 0 0 0.75rem;
+}
+
+/* ─── Authored heading / fallback positioning ────────────────────────────── */
+[part='heading-wrap'] {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  z-index: 1;
+  display: block;
+  margin: 0;
+  font-weight: var(--mds-font-weight-heading-3);
+}
+
+:where(mds-consent-gate, mds-consent-gate-standalone)[data-state='placeholder'] > [slot='fallback'],
+::slotted([slot='fallback']) {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  z-index: 1;
+  color: inherit;
+  font-size: var(--mds-font-type-s-1-size);
+  line-height: var(--mds-font-type-s-1-line-height);
+}
+
+/* ─── Content frame (consented state) ────────────────────────────────────── */
+[part='content'] {
+  display: block;
+  width: 100%;
+  aspect-ratio: var(--mds-consent-gate-aspect-ratio);
+  position: relative;
+  overflow: hidden;
+}