From 25ce2522a530887cb1c55142e3f1101791edffa4 Mon Sep 17 00:00:00 2001
From: Todd Olson <todd@todd.olson>
Date: Sun, 29 Mar 2026 10:16:24 -0400
Subject: [PATCH 1/2] NOVUS-391 Defer custom element registration to consumer

Move all customElements.define() calls out of individual component files
into an exported registerGuideComponents() function. This prevents
NotSupportedError when the plugin script is loaded twice (e.g. staging),
since the consumer controls when registration happens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/elements/pendo-button.js       |  2 --
 src/elements/pendo-close-button.js |  2 --
 src/elements/pendo-divider.js      |  2 --
 src/elements/pendo-guide.js        |  2 --
 src/elements/pendo-image.js        |  2 --
 src/elements/pendo-input.js        |  1 -
 src/elements/pendo-link.js         |  1 -
 src/elements/pendo-list.js         |  2 --
 src/elements/pendo-text.js         |  2 --
 src/elements/pendo-title.js        |  2 --
 src/elements/pendo-video.js        |  2 --
 src/index.js                       |  5 +++-
 src/polls/pendo-emoji-scale.js     |  1 -
 src/polls/pendo-nps.js             |  1 -
 src/polls/pendo-number-scale.js    |  1 -
 src/polls/pendo-open-text.js       |  1 -
 src/polls/pendo-star-rating.js     |  1 -
 src/register.js                    | 48 ++++++++++++++++++++++++++++++
 test/pendo-button.test.js          |  3 ++
 19 files changed, 55 insertions(+), 26 deletions(-)
 create mode 100644 src/register.js

diff --git a/src/elements/pendo-button.js b/src/elements/pendo-button.js
index bb419c3..7fd4e9f 100644
--- a/src/elements/pendo-button.js
+++ b/src/elements/pendo-button.js
@@ -138,6 +138,4 @@ class PendoButton extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-button', PendoButton);
-
 export { PendoButton };
diff --git a/src/elements/pendo-close-button.js b/src/elements/pendo-close-button.js
index 3241dee..0d7135e 100644
--- a/src/elements/pendo-close-button.js
+++ b/src/elements/pendo-close-button.js
@@ -37,6 +37,4 @@ class PendoCloseButton extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-close-button', PendoCloseButton);
-
 export { PendoCloseButton };
diff --git a/src/elements/pendo-divider.js b/src/elements/pendo-divider.js
index 1ce9ecc..89777c5 100644
--- a/src/elements/pendo-divider.js
+++ b/src/elements/pendo-divider.js
@@ -13,6 +13,4 @@ class PendoDivider extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-divider', PendoDivider);
-
 export { PendoDivider };
diff --git a/src/elements/pendo-guide.js b/src/elements/pendo-guide.js
index d126d30..400bd7c 100644
--- a/src/elements/pendo-guide.js
+++ b/src/elements/pendo-guide.js
@@ -118,6 +118,4 @@ class PendoGuide extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-guide', PendoGuide);
-
 export { PendoGuide };
diff --git a/src/elements/pendo-image.js b/src/elements/pendo-image.js
index 4ced0c9..077b425 100644
--- a/src/elements/pendo-image.js
+++ b/src/elements/pendo-image.js
@@ -41,6 +41,4 @@ class PendoImage extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-image', PendoImage);
-
 export { PendoImage };
diff --git a/src/elements/pendo-input.js b/src/elements/pendo-input.js
index 0c0a1bb..f3c02d2 100644
--- a/src/elements/pendo-input.js
+++ b/src/elements/pendo-input.js
@@ -232,4 +232,3 @@ export class PendoInput extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-input', PendoInput);
diff --git a/src/elements/pendo-link.js b/src/elements/pendo-link.js
index edd792c..e1acc5c 100644
--- a/src/elements/pendo-link.js
+++ b/src/elements/pendo-link.js
@@ -40,4 +40,3 @@ export class PendoLink extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-link', PendoLink);
diff --git a/src/elements/pendo-list.js b/src/elements/pendo-list.js
index 04c086a..b10518d 100644
--- a/src/elements/pendo-list.js
+++ b/src/elements/pendo-list.js
@@ -69,5 +69,3 @@ export class PendoListItem extends PendoBaseElement {
     // Content is processed by parent PendoList
 }
 
-customElements.define('pendo-list', PendoList);
-customElements.define('pendo-list-item', PendoListItem);
diff --git a/src/elements/pendo-text.js b/src/elements/pendo-text.js
index 22da89f..e88fee5 100644
--- a/src/elements/pendo-text.js
+++ b/src/elements/pendo-text.js
@@ -12,6 +12,4 @@ class PendoText extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-text', PendoText);
-
 export { PendoText };
diff --git a/src/elements/pendo-title.js b/src/elements/pendo-title.js
index 73ce3b3..63f7609 100644
--- a/src/elements/pendo-title.js
+++ b/src/elements/pendo-title.js
@@ -21,6 +21,4 @@ class PendoTitle extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-title', PendoTitle);
-
 export { PendoTitle };
diff --git a/src/elements/pendo-video.js b/src/elements/pendo-video.js
index 8782e06..273dede 100644
--- a/src/elements/pendo-video.js
+++ b/src/elements/pendo-video.js
@@ -101,6 +101,4 @@ class PendoVideo extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-video', PendoVideo);
-
 export { PendoVideo };
diff --git a/src/index.js b/src/index.js
index 5948453..e412476 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@
  * @pendo/guide-components
  *
  * Custom elements for rendering Pendo HTML guides.
- * Import this module to register all pendo-* custom elements.
+ * Call registerGuideComponents() to register all pendo-* custom elements.
  */
 
 // Base class (exported for extension)
@@ -35,5 +35,8 @@ export { PendoEmojiScale } from './polls/pendo-emoji-scale.js';
 // Configuration API
 export { configurePendoComponents } from './configure.js';
 
+// Registration (deferred — consumers call this when ready)
+export { registerGuideComponents } from './register.js';
+
 // Import styles (will be extracted by build)
 import './styles/defaults.css';
diff --git a/src/polls/pendo-emoji-scale.js b/src/polls/pendo-emoji-scale.js
index f920885..e60ecf3 100644
--- a/src/polls/pendo-emoji-scale.js
+++ b/src/polls/pendo-emoji-scale.js
@@ -122,4 +122,3 @@ export class PendoEmojiScale extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-emoji-scale', PendoEmojiScale);
diff --git a/src/polls/pendo-nps.js b/src/polls/pendo-nps.js
index 4bacbd1..3b192cf 100644
--- a/src/polls/pendo-nps.js
+++ b/src/polls/pendo-nps.js
@@ -120,4 +120,3 @@ export class PendoNps extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-nps', PendoNps);
diff --git a/src/polls/pendo-number-scale.js b/src/polls/pendo-number-scale.js
index 0264464..8ec48aa 100644
--- a/src/polls/pendo-number-scale.js
+++ b/src/polls/pendo-number-scale.js
@@ -125,4 +125,3 @@ export class PendoNumberScale extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-number-scale', PendoNumberScale);
diff --git a/src/polls/pendo-open-text.js b/src/polls/pendo-open-text.js
index 84b16b7..8dae0b6 100644
--- a/src/polls/pendo-open-text.js
+++ b/src/polls/pendo-open-text.js
@@ -137,4 +137,3 @@ export class PendoOpenText extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-open-text', PendoOpenText);
diff --git a/src/polls/pendo-star-rating.js b/src/polls/pendo-star-rating.js
index 86f747e..9a9b726 100644
--- a/src/polls/pendo-star-rating.js
+++ b/src/polls/pendo-star-rating.js
@@ -119,4 +119,3 @@ export class PendoStarRating extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-star-rating', PendoStarRating);
diff --git a/src/register.js b/src/register.js
new file mode 100644
index 0000000..f459748
--- /dev/null
+++ b/src/register.js
@@ -0,0 +1,48 @@
+import { PendoGuide } from './elements/pendo-guide.js';
+import { PendoTitle } from './elements/pendo-title.js';
+import { PendoText } from './elements/pendo-text.js';
+import { PendoButton } from './elements/pendo-button.js';
+import { PendoCloseButton } from './elements/pendo-close-button.js';
+import { PendoImage } from './elements/pendo-image.js';
+import { PendoDivider } from './elements/pendo-divider.js';
+import { PendoVideo } from './elements/pendo-video.js';
+import { PendoLink } from './elements/pendo-link.js';
+import { PendoList, PendoListItem } from './elements/pendo-list.js';
+import { PendoInput } from './elements/pendo-input.js';
+import { PendoStarRating } from './polls/pendo-star-rating.js';
+import { PendoNps } from './polls/pendo-nps.js';
+import { PendoNumberScale } from './polls/pendo-number-scale.js';
+import { PendoOpenText } from './polls/pendo-open-text.js';
+import { PendoEmojiScale } from './polls/pendo-emoji-scale.js';
+
+const components = [
+    ['pendo-guide', PendoGuide],
+    ['pendo-title', PendoTitle],
+    ['pendo-text', PendoText],
+    ['pendo-button', PendoButton],
+    ['pendo-close-button', PendoCloseButton],
+    ['pendo-image', PendoImage],
+    ['pendo-divider', PendoDivider],
+    ['pendo-video', PendoVideo],
+    ['pendo-link', PendoLink],
+    ['pendo-list', PendoList],
+    ['pendo-list-item', PendoListItem],
+    ['pendo-input', PendoInput],
+    ['pendo-star-rating', PendoStarRating],
+    ['pendo-nps', PendoNps],
+    ['pendo-number-scale', PendoNumberScale],
+    ['pendo-open-text', PendoOpenText],
+    ['pendo-emoji-scale', PendoEmojiScale]
+];
+
+/**
+ * Register all pendo-* custom elements.
+ * Safe to call multiple times — skips already-registered elements.
+ */
+export function registerGuideComponents() {
+    components.forEach(function([name, ctor]) {
+        if (!customElements.get(name)) {
+            customElements.define(name, ctor);
+        }
+    });
+}
diff --git a/test/pendo-button.test.js b/test/pendo-button.test.js
index 3be1435..cc050ad 100644
--- a/test/pendo-button.test.js
+++ b/test/pendo-button.test.js
@@ -3,6 +3,9 @@
  */
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { PendoButton } from '../src/elements/pendo-button.js';
+import { registerGuideComponents } from '../src/register.js';
+
+registerGuideComponents();
 
 describe('PendoButton', () => {
     describe('parseAction', () => {

From 6a4f598d2d245dc1fc6783cd004b1fa370dfc4f7 Mon Sep 17 00:00:00 2001
From: Todd Olson <todd@todd.olson>
Date: Mon, 13 Apr 2026 19:18:22 -0400
Subject: [PATCH 2/2] Add pendo-pick-list and pendo-yes-no poll components

New poll types with registration, exports, styles, and demo harness updates.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 demo/index.html              |   4 +
 demo/mock-guides.js          |  91 ++++++++++++++++++++
 demo/mock-pendo.js           |  59 +++++++------
 package.json                 |   4 +-
 src/index.js                 |   2 +
 src/polls/pendo-pick-list.js | 159 +++++++++++++++++++++++++++++++++++
 src/polls/pendo-yes-no.js    | 116 +++++++++++++++++++++++++
 src/register.js              |   6 +-
 src/styles/defaults.css      |  71 ++++++++++++++++
 9 files changed, 482 insertions(+), 30 deletions(-)
 create mode 100644 src/polls/pendo-pick-list.js
 create mode 100644 src/polls/pendo-yes-no.js

diff --git a/demo/index.html b/demo/index.html
index c67b624..e97aa2a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -472,6 +472,7 @@ <h3>Pendo Demo Controls</h3>
         <button class="demo-btn" onclick="showGuide('nps-survey')">Show NPS Survey</button>
         <button class="demo-btn" onclick="showGuide('feedback')">Show Feedback Poll</button>
         <button class="demo-btn" onclick="showGuide('banner')">Show Banner</button>
+        <button class="demo-btn" onclick="showGuide('yes-no-poll')">Show Yes/No Poll</button>
     </div>
 
     <!-- Load guide-components -->
@@ -483,6 +484,9 @@ <h3>Pendo Demo Controls</h3>
     <script src="/demo/mock-guides.js"></script>
 
     <script>
+        // Register guide-components custom elements
+        PendoGuideComponents.registerGuideComponents();
+
         // Initialize mock pendo
         window.pendo = new MockPendo({
             visitor: { id: 'demo-visitor-123' },
diff --git a/demo/mock-guides.js b/demo/mock-guides.js
index dd9441c..6946b9e 100644
--- a/demo/mock-guides.js
+++ b/demo/mock-guides.js
@@ -269,6 +269,29 @@ const mockGuides = [
                             <pendo-paragraph>On a scale of 1-10, how easy was the onboarding process?</pendo-paragraph>
                             <pendo-number-scale poll-id="ease-rating" min="1" max="10" low-label="Very Difficult" high-label="Very Easy"></pendo-number-scale>
                         </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="previous-step" variant="secondary">Back</pendo-button>
+                            <pendo-button action="next-step" variant="primary">Continue</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            },
+            {
+                id: 'feedback-step-4',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Tell Us About You</pendo-title>
+                            <pendo-paragraph>What is your primary role?</pendo-paragraph>
+                            <pendo-pick-list poll-id="role-select" display="select"
+                                options='{"pm":"Product Manager","eng":"Engineer","design":"Designer","qa":"QA","other":"Other"}'
+                                placeholder="Choose your role…"></pendo-pick-list>
+                            <pendo-paragraph style="margin-top: 16px;">Which feature do you use most?</pendo-paragraph>
+                            <pendo-pick-list poll-id="feature-pick" display="radio"
+                                options='{"dash":"Dashboard","reports":"Reports","integrations":"Integrations","admin":"Admin Settings"}'></pendo-pick-list>
+                        </pendo-guide-content>
                         <pendo-guide-footer>
                             <pendo-button action="previous-step" variant="secondary">Back</pendo-button>
                             <pendo-button action="dismiss" variant="primary">Submit</pendo-button>
@@ -339,6 +362,74 @@ const mockGuides = [
                 fontColor: '#ffffff'
             }
         }
+    },
+
+    // Yes/No Poll - PositiveNegative poll type
+    {
+        id: 'yes-no-poll',
+        name: 'Yes/No Poll',
+        steps: [
+            {
+                id: 'yes-no-step-1',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Quick Question</pendo-title>
+                            <pendo-yes-no
+                                poll-id="feature-useful"
+                                question="Did you find this feature helpful?"
+                                yes-label="Yes, very helpful"
+                                no-label="Not really">
+                            </pendo-yes-no>
+                        </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="next-step" variant="primary">Next</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            },
+            {
+                id: 'yes-no-step-2',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Thumbs Up or Down?</pendo-title>
+                            <pendo-yes-no
+                                poll-id="thumbs-rating"
+                                question="Would you recommend this to a colleague?"
+                                display="thumbs">
+                            </pendo-yes-no>
+                        </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="dismiss" variant="primary">Done</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            }
+        ],
+        buildingBlocks: {
+            container: {
+                background: '#ffffff',
+                borderRadius: '12px',
+                shadowColor: 'rgba(0, 0, 0, 0.15)',
+                shadowOffsetVertical: '8px',
+                shadowRadius: '24px'
+            },
+            primaryButton: {
+                background: '#4F46E5',
+                fontColor: '#ffffff'
+            },
+            title: {
+                fontColor: '#1f2937'
+            },
+            paragraph: {
+                fontColor: '#6b7280'
+            }
+        }
     }
 ];
 
diff --git a/demo/mock-pendo.js b/demo/mock-pendo.js
index 7f6e6a5..6bcb055 100644
--- a/demo/mock-pendo.js
+++ b/demo/mock-pendo.js
@@ -479,33 +479,38 @@ class MockPendo {
 
         // Listen for pendo-action events
         container.addEventListener('pendo-action', (e) => {
-            const { action, params } = e.detail;
-            console.log('[MockPendo] Action:', action, params);
-
-            switch (action) {
-                case 'next-step':
-                    step._guide.advanceStep();
-                    break;
-
-                case 'previous-step':
-                    step._guide.previousStep();
-                    break;
-
-                case 'dismiss':
-                    step._guide.hide();
-                    break;
-
-                case 'link':
-                    if (params?.url) {
-                        window.open(params.url, params.target || '_blank');
-                    }
-                    break;
-
-                case 'launch-guide':
-                    if (params?.guideId) {
-                        pendo.showGuideById(params.guideId);
-                    }
-                    break;
+            const { actions } = e.detail;
+            console.log('[MockPendo] Actions:', actions);
+
+            // Process each action in the array
+            for (const actionObj of actions) {
+                const { action } = actionObj;
+
+                switch (action) {
+                    case 'next-step':
+                        step._guide.advanceStep();
+                        break;
+
+                    case 'previous-step':
+                        step._guide.previousStep();
+                        break;
+
+                    case 'dismiss':
+                        step._guide.hide();
+                        break;
+
+                    case 'link':
+                        if (actionObj.url) {
+                            window.open(actionObj.url, actionObj.target || '_blank');
+                        }
+                        break;
+
+                    case 'launch-guide':
+                        if (actionObj.guideId) {
+                            pendo.showGuideById(actionObj.guideId);
+                        }
+                        break;
+                }
             }
         });
 
diff --git a/package.json b/package.json
index 831a7a0..befb7f1 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "serve": "npx serve -l 3001",
-    "harness": "npm run build && npx serve -l 3001",
+    "serve": "npx serve -l 8082",
+    "harness": "npm run build && npx serve -l 8082",
     "test": "vitest",
     "test:a11y": "vitest run --grep a11y"
   },
diff --git a/src/index.js b/src/index.js
index e412476..ce33ad6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -31,6 +31,8 @@ export { PendoNps } from './polls/pendo-nps.js';
 export { PendoNumberScale } from './polls/pendo-number-scale.js';
 export { PendoOpenText } from './polls/pendo-open-text.js';
 export { PendoEmojiScale } from './polls/pendo-emoji-scale.js';
+export { PendoPickList } from './polls/pendo-pick-list.js';
+export { PendoYesNo } from './polls/pendo-yes-no.js';
 
 // Configuration API
 export { configurePendoComponents } from './configure.js';
diff --git a/src/polls/pendo-pick-list.js b/src/polls/pendo-pick-list.js
new file mode 100644
index 0000000..987509b
--- /dev/null
+++ b/src/polls/pendo-pick-list.js
@@ -0,0 +1,159 @@
+import { PendoBaseElement } from '../base-element.js';
+
+/**
+ * <pendo-pick-list> - Multiple choice poll component (select dropdown or radio buttons)
+ *
+ * Renders a PickList poll as either a <select> dropdown or radio button group,
+ * controlled by the `display` attribute.
+ *
+ * Attributes:
+ * - question: The question text to display
+ * - poll-id: The poll identifier (injected by backend)
+ * - display: Render mode — "select" (default) or "radio"
+ * - options: JSON string mapping response IDs to display labels
+ *            e.g. '{"id1":"Option A","id2":"Option B"}'
+ * - value: Pre-selected response ID
+ * - placeholder: Placeholder text for select mode (default: "Select…")
+ *
+ * Events:
+ * - pendo-response: Fired when user picks an option { pollId, value, type: 'PickList' }
+ *
+ * Example (dropdown):
+ *   <pendo-pick-list question="What is your role?"
+ *       options='{"pm":"Product Manager","eng":"Engineer"}'></pendo-pick-list>
+ *
+ * Example (radio):
+ *   <pendo-pick-list question="What is your role?" display="radio"
+ *       options='{"pm":"Product Manager","eng":"Engineer"}'></pendo-pick-list>
+ */
+export class PendoPickList extends PendoBaseElement {
+    connectedCallback() {
+        this.pollId = this.getAttribute('poll-id') || this.generateId();
+        this.question = this.getAttribute('question') || '';
+        this.display = this.getAttribute('display') || 'select';
+        this.placeholder = this.getAttribute('placeholder') || 'Select\u2026';
+        this.value = this.getAttribute('value') || null;
+
+        this._options = {};
+        try {
+            this._options = JSON.parse(this.getAttribute('options') || '{}');
+        } catch (e) {
+            // invalid JSON — render with no options
+        }
+
+        this.classList.add('pendo-poll', 'pendo-pick-list');
+        this.render();
+    }
+
+    render() {
+        const questionId = this.generateId();
+
+        if (this.display === 'radio') {
+            this.innerHTML = `
+                <fieldset class="pendo-poll__fieldset" role="radiogroup" aria-labelledby="${questionId}">
+                    ${this.question ? `<legend id="${questionId}" class="pendo-poll__question">${this.escapeHtml(this.question)}</legend>` : ''}
+                    <div class="pendo-pick-list__options">
+                        ${this.renderRadioOptions()}
+                    </div>
+                </fieldset>
+            `;
+            this.setupRadioListeners();
+        } else {
+            const selectId = this.generateId();
+            this.innerHTML = `
+                <div class="pendo-pick-list__wrapper">
+                    ${this.question ? `<label id="${questionId}" for="${selectId}" class="pendo-poll__question">${this.escapeHtml(this.question)}</label>` : ''}
+                    <select id="${selectId}" class="pendo-pick-list__select" aria-labelledby="${this.question ? questionId : ''}">
+                        <option value="" disabled ${!this.value ? 'selected' : ''}>${this.escapeHtml(this.placeholder)}</option>
+                        ${this.renderSelectOptions()}
+                    </select>
+                </div>
+            `;
+            this.setupSelectListeners();
+        }
+    }
+
+    renderSelectOptions() {
+        let html = '';
+        for (const [id, label] of Object.entries(this._options)) {
+            const isSelected = this.value === id;
+            html += `<option value="${this.escapeHtml(id)}" ${isSelected ? 'selected' : ''}>${this.escapeHtml(label)}</option>`;
+        }
+        return html;
+    }
+
+    renderRadioOptions() {
+        let html = '';
+        for (const [id, label] of Object.entries(this._options)) {
+            const isSelected = this.value === id;
+            const inputId = `${this.pollId}-opt-${id}`;
+            html += `
+                <label class="pendo-pick-list__option ${isSelected ? 'pendo-pick-list__option--selected' : ''}"
+                       data-value="${this.escapeHtml(id)}">
+                    <input type="radio"
+                           name="${this.pollId}"
+                           id="${inputId}"
+                           value="${this.escapeHtml(id)}"
+                           ${isSelected ? 'checked' : ''}
+                           class="pendo-sr-only">
+                    <span class="pendo-pick-list__option-label">${this.escapeHtml(label)}</span>
+                </label>
+            `;
+        }
+        return html;
+    }
+
+    setupSelectListeners() {
+        const select = this.querySelector('select');
+        select.addEventListener('change', () => {
+            this.selectOption(select.value);
+        });
+    }
+
+    setupRadioListeners() {
+        const options = this.querySelectorAll('.pendo-pick-list__option');
+
+        options.forEach((option) => {
+            const value = option.dataset.value;
+
+            option.addEventListener('click', () => this.selectOption(value));
+
+            const input = option.querySelector('input');
+            input.addEventListener('change', () => this.selectOption(value));
+        });
+    }
+
+    selectOption(value) {
+        this.value = value;
+
+        if (this.display === 'radio') {
+            const options = this.querySelectorAll('.pendo-pick-list__option');
+            options.forEach((option) => {
+                option.classList.toggle('pendo-pick-list__option--selected', option.dataset.value === value);
+            });
+        }
+
+        // Emit response — value is the response ID, backend maps to label
+        this.emitResponse(this.pollId, value, 'PickList');
+    }
+
+    /**
+     * Get the current selected value (response ID)
+     */
+    getValue() {
+        return this.value;
+    }
+
+    /**
+     * Set the value programmatically
+     */
+    setValue(value) {
+        this.selectOption(value);
+        if (this.display === 'select') {
+            const select = this.querySelector('select');
+            if (select) {
+                select.value = value;
+            }
+        }
+    }
+}
diff --git a/src/polls/pendo-yes-no.js b/src/polls/pendo-yes-no.js
new file mode 100644
index 0000000..d9605c0
--- /dev/null
+++ b/src/polls/pendo-yes-no.js
@@ -0,0 +1,116 @@
+import { PendoBaseElement } from '../base-element.js';
+
+/**
+ * <pendo-yes-no> - Yes/No (PositiveNegative) poll component
+ *
+ * Renders a binary choice poll as text buttons or thumbs-up/down icons.
+ *
+ * Attributes:
+ * - question: The question text to display
+ * - poll-id: The poll identifier (injected by backend)
+ * - display: Render mode — "button" (default) or "thumbs"
+ * - yes-label: Label for the affirmative option (default: "Yes")
+ * - no-label: Label for the negative option (default: "No")
+ * - value: Pre-selected value ("0" or "1")
+ *
+ * Events:
+ * - pendo-response: Fired when user picks an option { pollId, value, type: 'PositiveNegative' }
+ *   value is numeric: 1 for yes, 0 for no
+ *
+ * Example (buttons):
+ *   <pendo-yes-no question="Did you find this helpful?"></pendo-yes-no>
+ *
+ * Example (thumbs):
+ *   <pendo-yes-no question="Was this useful?" display="thumbs"></pendo-yes-no>
+ */
+export class PendoYesNo extends PendoBaseElement {
+    connectedCallback() {
+        this.pollId = this.getAttribute('poll-id') || this.generateId();
+        this.question = this.getAttribute('question') || '';
+        this.display = this.getAttribute('display') || 'button';
+        this.yesLabel = this.getAttribute('yes-label') || 'Yes';
+        this.noLabel = this.getAttribute('no-label') || 'No';
+        this.value = this.hasAttribute('value') ? parseInt(this.getAttribute('value'), 10) : null;
+
+        this.classList.add('pendo-poll', 'pendo-yes-no');
+        if (this.display === 'thumbs') {
+            this.classList.add('pendo-yes-no--thumbs');
+        }
+        this.render();
+    }
+
+    render() {
+        const questionId = this.generateId();
+
+        this.innerHTML = `
+            <fieldset class="pendo-poll__fieldset" role="radiogroup" aria-labelledby="${questionId}">
+                ${this.question ? `<legend id="${questionId}" class="pendo-poll__question">${this.escapeHtml(this.question)}</legend>` : ''}
+                <div class="pendo-yes-no__options">
+                    ${this.renderOption(1, this.yesLabel)}
+                    ${this.renderOption(0, this.noLabel)}
+                </div>
+            </fieldset>
+        `;
+
+        this.setupEventListeners();
+    }
+
+    renderOption(value, label) {
+        const isSelected = this.value === value;
+        const inputId = `${this.pollId}-opt-${value}`;
+        const isThumbs = this.display === 'thumbs';
+
+        const content = isThumbs
+            ? `<svg class="pendo-yes-no__icon${value === 0 ? ' pendo-yes-no__icon--down' : ''}" viewBox="0 0 24 24" aria-hidden="true">
+                   <path d="M2 20h2V10H2v10zm20-9a2 2 0 0 0-2-2h-6.31l.95-4.57.03-.32a1.49 1.49 0 0 0-.44-1.06L13.17 2 7.59 7.59C7.22 7.95 7 8.45 7 9v10a2 2 0 0 0 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/>
+               </svg>
+               <span class="pendo-sr-only">${this.escapeHtml(label)}</span>`
+            : `<span class="pendo-yes-no__option-label">${this.escapeHtml(label)}</span>`;
+
+        return `
+            <label class="pendo-yes-no__option ${isSelected ? 'pendo-yes-no__option--selected' : ''}"
+                   data-value="${value}">
+                <input type="radio"
+                       name="${this.pollId}"
+                       id="${inputId}"
+                       value="${value}"
+                       ${isSelected ? 'checked' : ''}
+                       ${isThumbs ? `aria-label="${this.escapeHtml(label)}"` : ''}
+                       class="pendo-sr-only">
+                ${content}
+            </label>
+        `;
+    }
+
+    setupEventListeners() {
+        const options = this.querySelectorAll('.pendo-yes-no__option');
+
+        options.forEach((option) => {
+            const value = parseInt(option.dataset.value, 10);
+
+            option.addEventListener('click', () => this.selectOption(value));
+
+            const input = option.querySelector('input');
+            input.addEventListener('change', () => this.selectOption(value));
+        });
+    }
+
+    selectOption(value) {
+        this.value = value;
+
+        const options = this.querySelectorAll('.pendo-yes-no__option');
+        options.forEach((option) => {
+            option.classList.toggle('pendo-yes-no__option--selected', parseInt(option.dataset.value, 10) === value);
+        });
+
+        this.emitResponse(this.pollId, value, 'PositiveNegative');
+    }
+
+    getValue() {
+        return this.value;
+    }
+
+    setValue(value) {
+        this.selectOption(value);
+    }
+}
diff --git a/src/register.js b/src/register.js
index f459748..4aa5839 100644
--- a/src/register.js
+++ b/src/register.js
@@ -14,6 +14,8 @@ import { PendoNps } from './polls/pendo-nps.js';
 import { PendoNumberScale } from './polls/pendo-number-scale.js';
 import { PendoOpenText } from './polls/pendo-open-text.js';
 import { PendoEmojiScale } from './polls/pendo-emoji-scale.js';
+import { PendoPickList } from './polls/pendo-pick-list.js';
+import { PendoYesNo } from './polls/pendo-yes-no.js';
 
 const components = [
     ['pendo-guide', PendoGuide],
@@ -32,7 +34,9 @@ const components = [
     ['pendo-nps', PendoNps],
     ['pendo-number-scale', PendoNumberScale],
     ['pendo-open-text', PendoOpenText],
-    ['pendo-emoji-scale', PendoEmojiScale]
+    ['pendo-emoji-scale', PendoEmojiScale],
+    ['pendo-pick-list', PendoPickList],
+    ['pendo-yes-no', PendoYesNo]
 ];
 
 /**
diff --git a/src/styles/defaults.css b/src/styles/defaults.css
index 859e0fb..f6645b3 100644
--- a/src/styles/defaults.css
+++ b/src/styles/defaults.css
@@ -663,6 +663,77 @@ select.pendo-input__field {
     color: var(--pendo-text-muted);
 }
 
+/* =============================================================================
+   pendo-yes-no
+   ============================================================================= */
+
+.pendo-yes-no__options {
+    display: flex;
+    gap: 8px;
+}
+
+.pendo-yes-no__option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: var(--pendo-spacing-xs) var(--pendo-spacing-sm);
+    border: 1px solid var(--pendo-border);
+    border-radius: calc(var(--pendo-radius) / 2);
+    background: var(--pendo-bg);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.pendo-yes-no__option:hover {
+    border-color: var(--pendo-primary);
+}
+
+.pendo-yes-no__option--selected {
+    background: var(--pendo-primary);
+    border-color: var(--pendo-primary);
+    color: #ffffff;
+}
+
+.pendo-yes-no__option:focus-within {
+    outline: 2px solid var(--pendo-focus);
+    outline-offset: 2px;
+}
+
+.pendo-yes-no__option-label {
+    font-size: 0.9375rem;
+    font-weight: 500;
+}
+
+/* Thumbs mode */
+
+.pendo-yes-no--thumbs .pendo-yes-no__option {
+    flex: 0 0 auto;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border-radius: 50%;
+}
+
+.pendo-yes-no--thumbs .pendo-yes-no__options {
+    gap: 12px;
+    justify-content: center;
+}
+
+.pendo-yes-no__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: currentColor;
+}
+
+.pendo-yes-no__icon--down {
+    transform: scaleY(-1);
+}
+
+.pendo-yes-no__option--selected .pendo-yes-no__icon {
+    fill: #ffffff;
+}
+
 /* =============================================================================
    pendo-number-scale
    ============================================================================= */