From 4678c58ab03a70ff1550e6182195dfbc5ec061f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Wed, 22 Apr 2026 18:05:34 +0400
Subject: [PATCH] Add description to cookie banner preference panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a short description under the preference panel title:
"Choose which cookie categories to allow. Necessary cookies are
always active as they are needed for the site to work."

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 packages/cookie-banner/src/themed-banner/styles.ts  | 12 ++++++++++--
 .../src/themed-banner/themed-banner.ts              | 13 ++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/cookie-banner/src/themed-banner/styles.ts b/packages/cookie-banner/src/themed-banner/styles.ts
index b01f56a95..cf6ee3f48 100644
--- a/packages/cookie-banner/src/themed-banner/styles.ts
+++ b/packages/cookie-banner/src/themed-banner/styles.ts
@@ -164,11 +164,19 @@ export const THEMED_STYLES = `
   }
 
   .panel-header {
+    padding: 24px;
+    border-bottom: 1px solid var(--_border);
+  }
+
+  .panel-header .description {
+    margin: 0;
+  }
+
+  .panel-header-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 24px;
-    border-bottom: 1px solid var(--_border);
+    margin: 0 0 8px;
   }
 
   .panel-close {
diff --git a/packages/cookie-banner/src/themed-banner/themed-banner.ts b/packages/cookie-banner/src/themed-banner/themed-banner.ts
index ffe77d701..f9c603072 100644
--- a/packages/cookie-banner/src/themed-banner/themed-banner.ts
+++ b/packages/cookie-banner/src/themed-banner/themed-banner.ts
@@ -67,12 +67,15 @@ export class ProboThemedBanner extends HTMLElement {
 
         <probo-preference-panel>
           <div class="floating" data-position="${this.esc(position)}">
-            <div class="card" role="dialog" aria-modal="true" aria-labelledby="probo-panel-title">
+            <div class="card" role="dialog" aria-modal="true" aria-labelledby="probo-panel-title" aria-describedby="probo-panel-desc">
               <div class="panel-header">
-                <p class="title" id="probo-panel-title" style="margin:0">Preferences</p>
-                <button class="panel-close" data-action="back" aria-label="Close">
-                  ${CLOSE_ICON}
-                </button>
+                <div class="panel-header-title">
+                  <p class="title" id="probo-panel-title" style="margin:0">Customise Preferences</p>
+                  <button class="panel-close" data-action="back" aria-label="Close">
+                    ${CLOSE_ICON}
+                  </button>
+                </div>
+                <p class="description" id="probo-panel-desc">Choose which cookie categories to allow. Necessary cookies are always active as they are needed for the site to work.</p>
               </div>
               <probo-category-list>
                 <template>