@descope-ui/descope-ponyhot 2.2.37

package/CHANGELOG.md

@@ -0,0 +1,32 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [2.2.37](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.36...web-components-ui-2.2.37) (2026-01-28)
+
+
+### Bug Fixes
+
+* Rename honeypot folder to resolve registration mismatch ([#868](https://github.com/descope/web-components-ui/issues/868)) ([7166c17](https://github.com/descope/web-components-ui/commit/7166c1799fa79bf1b1504eb93ca48fd8a486bf53))
+
+## [2.2.36](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.35...web-components-ui-2.2.36) (2026-01-28)
+
+## [2.2.35](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.34...web-components-ui-2.2.35) (2026-01-22)
+
+## [2.2.34](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.33...web-components-ui-2.2.34) (2026-01-21)
+
+## [2.2.33](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.32...web-components-ui-2.2.33) (2026-01-21)
+
+## [2.2.32](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.31...web-components-ui-2.2.32) (2026-01-21)
+
+## [2.2.31](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.30...web-components-ui-2.2.31) (2026-01-21)
+
+## [2.2.30](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.29...web-components-ui-2.2.30) (2026-01-19)
+
+## [2.2.29](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.28...web-components-ui-2.2.29) (2026-01-19)
+
+## [2.2.28](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.27...web-components-ui-2.2.28) (2026-01-19)
+
+## [2.2.27](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.26...web-components-ui-2.2.27) (2026-01-18)
+
+# Changelog

package/e2e/descope-honeypot.spec.ts

@@ -0,0 +1,174 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl } from 'e2e-utils';
+import { createHoneypotTestDriver } from 'test-drivers';
+
+const storyName = 'descope-honeypot';
+// NOTICE: This component registers with a DIFFERENT name than its file name
+const componentName = 'descope-ponyhot';
+
+test.describe('logic', () => {
+  test('render honeypot input', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        label: 'Enter address',
+        type: 'address',
+        name: 'dhp-address',
+      }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+
+    const component = createHoneypotTestDriver(page.locator(componentName));
+
+    expect(await component.input.getAttribute('name')).toMatch('dhp-address');
+  });
+
+  [
+    'input',
+    'change',
+    'click',
+    'keydown',
+    'keyup',
+    'mouseover',
+    'mousedown',
+  ].forEach((eventType) => {
+    ['text', 'email', 'address', 'password'].forEach((inputType) => {
+      test(`fill honeypot of type "${inputType}" when event "${eventType}" dispatched`, async ({
+        page,
+      }) => {
+        await page.goto(
+          getStoryUrl(storyName, {
+            label: 'Enter value',
+            type: inputType,
+            name: `dhp-${inputType}`,
+          }),
+          {
+            waitUntil: 'networkidle',
+          },
+        );
+
+        const component = createHoneypotTestDriver(page.locator(componentName));
+        await component.input.dispatchEvent(eventType);
+
+        expect(await component.getInputValue()).toBe(`dhp-${eventType}`);
+      });
+    });
+  });
+
+  test('should apply hiding styles to component', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        label: 'Enter address',
+        type: 'address',
+        name: 'dhp-address',
+      }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+
+    const component = createHoneypotTestDriver(page.locator(componentName));
+
+    const expectedStyles = {
+      position: 'absolute',
+      opacity: '0.01',
+      width: '1px',
+      height: '1px',
+      'pointer-events': 'none',
+      'z-index': '-1',
+      left: '-999999px',
+    };
+
+    const computedStyle = await component.getHideStyles();
+
+    Object.entries(expectedStyles).forEach(([styleName, expectedValue]) => {
+      expect(computedStyle[styleName]).toBe(expectedValue);
+    });
+
+    expect(await component.getInputInlineStyle()).toBeNull();
+  });
+
+  test('should only trigger once, then lock state', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        label: 'Enter address',
+        type: 'address',
+        name: 'dhp-address',
+      }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+
+    const component = createHoneypotTestDriver(page.locator(componentName));
+
+    component.input.dispatchEvent('input');
+    expect(await component.getInputValue()).toBe('dhp-input');
+
+    component.input.dispatchEvent('click');
+    expect(await component.getInputValue()).toBe('dhp-input');
+
+    component.input.dispatchEvent('keyup');
+    expect(await component.getInputValue()).toBe('dhp-input');
+  });
+
+  test('should intercept direct value assignment without events', async ({
+    page,
+  }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        label: 'Enter address',
+        type: 'address',
+        name: 'dhp-address',
+      }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+
+    const component = createHoneypotTestDriver(page.locator(componentName));
+    await component.setInputValue('bot-spam-value');
+
+    expect(await component.getInputValue()).toBe('dhp-direct-set');
+  });
+
+  test('should allow setting dhp- prefixed values through interceptor', async ({
+    page,
+  }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        label: 'Enter address',
+        type: 'address',
+        name: 'dhp-address',
+      }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+
+    const component = createHoneypotTestDriver(page.locator(componentName));
+    await component.setInputValue('dhp-click');
+
+    expect(await component.getInputValue()).toBe('dhp-click');
+  });
+
+  test('should not intercept empty value assignments', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        label: 'Enter address',
+        type: 'address',
+        name: 'dhp-address',
+      }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+
+    const component = createHoneypotTestDriver(page.locator(componentName));
+
+    await component.setInputValue('');
+
+    expect(await component.getInputValue()).toBe('');
+  });
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@descope-ui/descope-ponyhot",
+  "version": "2.2.37",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/HoneypotClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "2.2.37",
+    "test-assets": "2.2.37",
+    "test-drivers": "2.2.37"
+  },
+  "dependencies": {
+    "@descope-ui/common": "2.2.37",
+    "@descope-ui/theme-globals": "2.2.37"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "@descope-ui/descope-ponyhot",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-ponyhot/src",
+  "projectType": "library",
+  "targets": {},
+  "tags": []
+}

package/src/component/HoneypotClass.js

@@ -0,0 +1,106 @@
+import { componentNameValidationMixin } from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { getComponentName } from '@descope-ui/common/components-helpers';
+import { compose } from '@descope-ui/common/utils';
+
+// NOTICE: This component registers with a DIFFERENT name than its file name
+export const componentName = getComponentName('ponyhot');
+
+const HP_PREFIX = 'dhp-';
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: '',
+});
+
+class RawHoneypot extends BaseClass {
+  get type() {
+    return this.getAttribute('type');
+  }
+
+  get value() {
+    return this.input?.value || '';
+  }
+
+  init() {
+    this.input = this.querySelector('input');
+
+    if (!this.input) return;
+
+    this.#setupTrapListeners();
+    this.#setupValueInterceptor();
+    this.#hideComponent();
+  }
+
+  #setupTrapListeners() {
+    const events = [
+      'input',
+      'change',
+      'click',
+      'keydown',
+      'keyup',
+      'mouseover',
+      'mousedown',
+    ];
+
+    const fillHoneypot = (e) => {
+      this.input.value = `${HP_PREFIX}${e.type}`;
+
+      // Stop listening to all events after first trigger
+      events.forEach((event) => {
+        this.input.removeEventListener(event, fillHoneypot);
+      });
+    };
+
+    events.forEach((event) => {
+      this.input.addEventListener(event, fillHoneypot);
+    });
+  }
+
+  // Intercept direct value assignments to catch bots that bypass events
+  #setupValueInterceptor() {
+    const originalDescriptor = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    );
+
+    Object.defineProperty(this.input, 'value', {
+      get() {
+        return originalDescriptor.get.call(this);
+      },
+      set(newValue) {
+        const currentValue = originalDescriptor.get.call(this);
+
+        // Only trap if the value is being set by external code (not our own trap)
+        if (
+          newValue &&
+          !newValue.startsWith(HP_PREFIX) &&
+          newValue !== currentValue
+        ) {
+          originalDescriptor.set.call(this, `${HP_PREFIX}direct-set`);
+        } else {
+          originalDescriptor.set.call(this, newValue);
+        }
+      },
+      configurable: true,
+    });
+  }
+
+  #hideComponent() {
+    const styles = {
+      position: 'absolute',
+      opacity: '0.01',
+      width: '1px',
+      height: '1px',
+      pointerEvents: 'none',
+      zIndex: '-1',
+      left: '-999999px',
+    };
+
+    Object.entries(styles).forEach(([key, value]) => {
+      this.style[key] = value;
+    });
+  }
+}
+
+export const HoneypotClass = compose(componentNameValidationMixin)(RawHoneypot);

package/src/component/index.js

@@ -0,0 +1,5 @@
+import { componentName, HoneypotClass } from './HoneypotClass';
+
+customElements.define(componentName, HoneypotClass);
+
+export { HoneypotClass, componentName };

package/stories/descope-honeypot.stories.js

@@ -0,0 +1,40 @@
+import { componentName } from '../src/component';
+
+const Template = ({ name, type }) => `
+  <descope-ponyhot>
+    <input
+      name="${name || 'required-descope-validation'}"
+      type="${type || 'text'}"
+      autocomplete="off"
+      tabindex="-1"
+      aria-hidden="true"
+      data-1p-ignore
+      data-lpignore="true"
+      data-bwignore
+      data-form-type="other"
+      data-protonpass-ignore
+  />
+  </descope-ponyhot>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-honeypot',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['text', 'email', 'password', 'address'],
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  name: 'text',
+  type: 'text',
+};