@uibit/scratch-reveal 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# Scratch Reveal
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/scratch-reveal)
+
+Scratch Reveal is an interactive promotional display component that mimics a physical scratch-card interaction. By obscuring content (such as a discount code, coupon, or image) with an erasable overlay, it introduces gamification and anticipation to user actions.
+
+## Value Delivery
+
+- **Gamified Engagement** – Adds interactive play to digital interfaces, encouraging longer user session times.
+- **Anticipation & Discovery** – Creates a memorable experience by delaying the gratification of the final reward.
+- **Conversion Driver** – Ideal for revealing exclusive discount codes, mystery deals, and rewards in campaign flows.
+- **Cross-Platform Compatibility** – Offers a responsive scratching canvas that translates touch swipes on mobile and mouse gestures on desktop.
+
+## Ideal Applications
+
+- **E-Commerce Promotions** – Revealing surprise sales, seasonal offers, and coupon codes.
+- **Loyalty Programs** – Gamifying reward distributions and membership perks.
+- **Brand Campaigns** – Unveiling secret announcements or hidden content.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,324 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScratchReveal",
+          "declaration": {
+            "name": "ScratchReveal",
+            "module": "./scratch-reveal"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/scratch-reveal.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Canvas-based scratch card that reveals slotted content as the user\nscratches over a configurable overlay layer.",
+          "name": "ScratchReveal",
+          "cssProperties": [
+            {
+              "description": "Width of the scratch card",
+              "name": "--uibit-scratch-reveal-width",
+              "default": "25rem"
+            },
+            {
+              "description": "Height of the scratch card",
+              "name": "--uibit-scratch-reveal-height",
+              "default": "12.5rem"
+            },
+            {
+              "description": "Border radius of the card",
+              "name": "--uibit-scratch-reveal-border-radius",
+              "default": "0.5rem"
+            },
+            {
+              "description": "Background color of the revealed content area",
+              "name": "--uibit-scratch-reveal-background",
+              "default": "#f3f4f6"
+            },
+            {
+              "description": "Padding of the revealed content area",
+              "name": "--uibit-scratch-reveal-padding",
+              "default": "1rem"
+            },
+            {
+              "description": "Font size of the revealed content",
+              "name": "--uibit-scratch-reveal-font-size",
+              "default": "1rem"
+            },
+            {
+              "description": "Font weight of the revealed content",
+              "name": "--uibit-scratch-reveal-font-weight",
+              "default": "600"
+            },
+            {
+              "description": "Text color of the revealed content",
+              "name": "--uibit-scratch-reveal-color",
+              "default": "#111827"
+            },
+            {
+              "description": "Fill color of the scratchable overlay",
+              "name": "--uibit-scratch-reveal-overlay-color",
+              "default": "#d1d5db"
+            },
+            {
+              "description": "Color of the scratch instruction hint",
+              "name": "--uibit-scratch-reveal-instructions-color",
+              "default": "rgba(0,0,0,0.4)"
+            },
+            {
+              "description": "Font size of the scratch instruction hint",
+              "name": "--uibit-scratch-reveal-instructions-font-size",
+              "default": "0.875rem"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The content revealed beneath the scratch overlay",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "revealThreshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "Percentage (0–100) of the overlay that must be scratched before the `scratch-reveal` event fires.",
+              "attribute": "reveal-threshold"
+            },
+            {
+              "kind": "field",
+              "name": "_scratchProgress",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "brushSize",
+              "type": {
+                "text": "number"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isRevealed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "showInstructions",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "canvas",
+              "type": {
+                "text": "HTMLCanvasElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "ctx",
+              "type": {
+                "text": "CanvasRenderingContext2D | null | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isDrawing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_rafId",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupCanvas",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "drawOverlay",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "attachEventListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "startScratching",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "stopScratching",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "scratch",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent | Touch"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "calculateRevealPercentage",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "reset"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ percentage: number }"
+              },
+              "description": "Fired as the user scratches; `detail.percentage` is 0–100",
+              "name": "scratch-progress"
+            },
+            {
+              "type": {
+                "text": "{ percentage: number }"
+              },
+              "description": "Fired once when the revealed area crosses `revealThreshold`",
+              "name": "scratch-reveal"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "reveal-threshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "Percentage (0–100) of the overlay that must be scratched before the `scratch-reveal` event fires.",
+              "fieldName": "revealThreshold"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-scratch-reveal",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScratchReveal",
+          "declaration": {
+            "name": "ScratchReveal",
+            "module": "src/scratch-reveal.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-scratch-reveal",
+          "declaration": {
+            "name": "ScratchReveal",
+            "module": "src/scratch-reveal.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ScratchReveal",
+            "module": "src/scratch-reveal.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; --uibit-scratch-reveal-width: 25rem; --uibit-scratch-reveal-height: 12.5rem; --uibit-scratch-reveal-overlay-color: #d1d5db; --uibit-scratch-reveal-cursor: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><circle cx=\"16\" cy=\"16\" r=\"13\" fill=\"%23111\" opacity=\"0.5\"/><circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"/><circle cx=\"16\" cy=\"16\" r=\"4\" fill=\"white\"/></svg>') 16 16, crosshair; --uibit-scratch-reveal-brush-size: 3rem; } .scratch-container { position: relative; width: var(--uibit-scratch-reveal-width); height: var(--uibit-scratch-reveal-height); overflow: hidden; border-radius: var(--uibit-scratch-reveal-border-radius, 0.5rem); background: var(--uibit-scratch-reveal-background, #f3f4f6); user-select: none; touch-action: none; } .content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--uibit-scratch-reveal-padding, 1rem); font-size: var(--uibit-scratch-reveal-font-size, var(--uibit-font-size-base, 1rem)); font-weight: var(--uibit-scratch-reveal-font-weight, var(--uibit-font-weight-semibold, 600)); color: var(--uibit-scratch-reveal-color, #111827); text-align: center; word-break: break-word; z-index: 1; } canvas { position: absolute; inset: 0; cursor: var(--uibit-scratch-reveal-cursor); z-index: 2; display: block; } .instructions { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--uibit-scratch-reveal-instructions-color, rgba(0, 0, 0, 0.4)); font-size: var(--uibit-scratch-reveal-instructions-font-size, var(--uibit-font-size-sm, 0.875rem)); pointer-events: none; z-index: 3; } .instructions-text { display: block; margin-bottom: 0.5rem; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, numberAttribute } from '@angular/core';
+import '@uibit/scratch-reveal';
+import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+
+@Component({
+  selector: 'uibit-scratch-reveal',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(scratch-progress)': 'scratchProgress.emit($event)',
+    '(scratch-reveal)': 'scratchReveal.emit($event)'
+  }
+})
+export class NgxScratchReveal {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.revealThreshold = this.revealThreshold();
+      }
+    });
+  }
+
+  readonly revealThreshold = input<number, any>(50, { transform: numberAttribute });
+
+  readonly scratchProgress = output<CustomEvent<{ percentage: number }>>();
+  readonly scratchReveal = output<CustomEvent<{ percentage: number }>>();
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+import '@uibit/scratch-reveal';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-scratch-reveal': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/scratch-reveal');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'preact';
+import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+import '@uibit/scratch-reveal';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-scratch-reveal': JSX.HTMLAttributes<HTMLElementClass> & {
+      revealThreshold?: number;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/scratch-reveal';
+
+export const ScratchReveal = component$<any>((props) => {
+  return (
+    <uibit-scratch-reveal {...props}>
+      <Slot />
+    </uibit-scratch-reveal>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+import '@uibit/scratch-reveal';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-scratch-reveal': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      revealThreshold?: number;
+      onScratchProgress?: (event: any) => void;
+      onScratchReveal?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'solid-js';
+import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+import '@uibit/scratch-reveal';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-scratch-reveal': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              revealThreshold?: number;
+      "on:scratch-progress"?: (event: CustomEvent) => void;
+      "on:scratch-reveal"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,12 @@
+import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+import '@uibit/scratch-reveal';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-scratch-reveal': HTMLElementClass & {
+    revealThreshold?: number;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import '@uibit/scratch-reveal';
+  import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+  
+  let {
+    revealThreshold = undefined,
+      children
+  } = $props<{
+    children?: any;
+    revealThreshold?: number;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && revealThreshold !== undefined) {
+      elementRef.revealThreshold = revealThreshold;
+    }
+  });
+  
+</script>
+
+<uibit-scratch-reveal bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-scratch-reveal>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue';
+import type { ScratchReveal as HTMLElementClass } from '@uibit/scratch-reveal';
+import '@uibit/scratch-reveal';
+
+export const ScratchReveal = defineComponent({
+  name: 'ScratchReveal',
+  props: {
+    revealThreshold: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['scratch-progress', 'scratch-reveal'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onScratch-progress'] = (event: Event) => {
+        emit('scratch-progress', event);
+      };
+      eventListeners['onScratch-reveal'] = (event: Event) => {
+        emit('scratch-reveal', event);
+      };
+
+      return h('uibit-scratch-reveal', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ScratchReveal } from './scratch-reveal';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { ScratchReveal } from './scratch-reveal';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,cAAc,SAAS,CAAC"}

package/dist/scratch-reveal.d.ts

@@ -0,0 +1,49 @@
+import { UIBitElement } from '@uibit/core';
+/**
+ * Canvas-based scratch card that reveals slotted content as the user
+ * scratches over a configurable overlay layer.
+ *
+ * @fires {{ percentage: number }} scratch-progress - Fired as the user scratches; `detail.percentage` is 0–100
+ * @fires {{ percentage: number }} scratch-reveal - Fired once when the revealed area crosses `revealThreshold`
+ *
+ * @slot - The content revealed beneath the scratch overlay
+ *
+ * @cssprop [--uibit-scratch-reveal-width=25rem] - Width of the scratch card
+ * @cssprop [--uibit-scratch-reveal-height=12.5rem] - Height of the scratch card
+ * @cssprop [--uibit-scratch-reveal-border-radius=0.5rem] - Border radius of the card
+ * @cssprop [--uibit-scratch-reveal-background=#f3f4f6] - Background color of the revealed content area
+ * @cssprop [--uibit-scratch-reveal-padding=1rem] - Padding of the revealed content area
+ * @cssprop [--uibit-scratch-reveal-font-size=1rem] - Font size of the revealed content
+ * @cssprop [--uibit-scratch-reveal-font-weight=600] - Font weight of the revealed content
+ * @cssprop [--uibit-scratch-reveal-color=#111827] - Text color of the revealed content
+ * @cssprop [--uibit-scratch-reveal-overlay-color=#d1d5db] - Fill color of the scratchable overlay
+ * @cssprop [--uibit-scratch-reveal-instructions-color=rgba(0,0,0,0.4)] - Color of the scratch instruction hint
+ * @cssprop [--uibit-scratch-reveal-instructions-font-size=0.875rem] - Font size of the scratch instruction hint
+ */
+export declare class ScratchReveal extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Percentage (0–100) of the overlay that must be scratched before the `scratch-reveal` event fires. */
+    revealThreshold: number;
+    private _scratchProgress;
+    get brushSize(): number;
+    private isRevealed;
+    private showInstructions;
+    private canvas?;
+    private ctx?;
+    private isDrawing;
+    private _rafId?;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private setupCanvas;
+    private drawOverlay;
+    private attachEventListeners;
+    private startScratching;
+    private stopScratching;
+    private scratch;
+    private calculateRevealPercentage;
+    disconnectedCallback(): void;
+    reset(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default ScratchReveal;
+//# sourceMappingURL=scratch-reveal.d.ts.map

package/dist/scratch-reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scratch-reveal.d.ts","sourceRoot":"","sources":["../src/scratch-reveal.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI/D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,MAAM,CAAC,MAAM,0BAAU;IAEvB,wGAAwG;IAC7C,eAAe,SAAM;IAEvE,OAAO,CAAC,gBAAgB,CAAK;IAEtC,IAAI,SAAS,IAAI,MAAM,CAStB;IAEQ,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,gBAAgB,CAAQ;IAEzC,OAAO,CAAC,MAAM,CAAC,CAAoB;IACnC,OAAO,CAAC,GAAG,CAAC,CAAkC;IAC9C,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,MAAM,CAAC,CAAS;IAExB,iBAAiB,SAEhB;IAED,YAAY,SAEX;IAED,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,oBAAoB;IAyB5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,OAAO;IAuBf,OAAO,CAAC,yBAAyB;IA6BjC,oBAAoB,SAMnB;IAED,KAAK,SAQJ;IAED,MAAM,oCAgBL;CACF;eAEc,aAAa"}

package/dist/scratch-reveal.js

@@ -0,0 +1,207 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, msg, UIBitElement } from '@uibit/core';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Canvas-based scratch card that reveals slotted content as the user
+ * scratches over a configurable overlay layer.
+ *
+ * @fires {{ percentage: number }} scratch-progress - Fired as the user scratches; `detail.percentage` is 0–100
+ * @fires {{ percentage: number }} scratch-reveal - Fired once when the revealed area crosses `revealThreshold`
+ *
+ * @slot - The content revealed beneath the scratch overlay
+ *
+ * @cssprop [--uibit-scratch-reveal-width=25rem] - Width of the scratch card
+ * @cssprop [--uibit-scratch-reveal-height=12.5rem] - Height of the scratch card
+ * @cssprop [--uibit-scratch-reveal-border-radius=0.5rem] - Border radius of the card
+ * @cssprop [--uibit-scratch-reveal-background=#f3f4f6] - Background color of the revealed content area
+ * @cssprop [--uibit-scratch-reveal-padding=1rem] - Padding of the revealed content area
+ * @cssprop [--uibit-scratch-reveal-font-size=1rem] - Font size of the revealed content
+ * @cssprop [--uibit-scratch-reveal-font-weight=600] - Font weight of the revealed content
+ * @cssprop [--uibit-scratch-reveal-color=#111827] - Text color of the revealed content
+ * @cssprop [--uibit-scratch-reveal-overlay-color=#d1d5db] - Fill color of the scratchable overlay
+ * @cssprop [--uibit-scratch-reveal-instructions-color=rgba(0,0,0,0.4)] - Color of the scratch instruction hint
+ * @cssprop [--uibit-scratch-reveal-instructions-font-size=0.875rem] - Font size of the scratch instruction hint
+ */
+let ScratchReveal = class ScratchReveal extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Percentage (0–100) of the overlay that must be scratched before the `scratch-reveal` event fires. */
+        this.revealThreshold = 50;
+        this._scratchProgress = 0;
+        this.isRevealed = false;
+        this.showInstructions = true;
+        this.isDrawing = false;
+    }
+    static { this.styles = styles; }
+    get brushSize() {
+        if (typeof window === 'undefined')
+            return 80;
+        const val = getComputedStyle(this).getPropertyValue('--uibit-scratch-reveal-brush-size').trim();
+        if (!val)
+            return 80;
+        if (val.endsWith('rem')) {
+            return parseFloat(val) * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        }
+        if (val.endsWith('px'))
+            return parseFloat(val);
+        return parseFloat(val) || 80;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    firstUpdated() {
+        this.setupCanvas();
+    }
+    setupCanvas() {
+        const container = this.shadowRoot?.querySelector('.scratch-container');
+        if (!container)
+            return;
+        this.canvas = this.shadowRoot?.querySelector('canvas');
+        if (!this.canvas)
+            return;
+        const rect = container.getBoundingClientRect();
+        this.canvas.width = rect.width * window.devicePixelRatio;
+        this.canvas.height = rect.height * window.devicePixelRatio;
+        this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+        if (!this.ctx)
+            return;
+        this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+        this.drawOverlay();
+        this.attachEventListeners();
+    }
+    drawOverlay() {
+        if (!this.ctx || !this.canvas)
+            return;
+        this.ctx.fillStyle = 'var(--uibit-scratch-reveal-overlay-color, #c0c0c0)';
+        this.ctx.fillRect(0, 0, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio);
+    }
+    attachEventListeners() {
+        if (!this.canvas)
+            return;
+        this.listen(this.canvas, 'mousedown', (e) => this.startScratching(e));
+        this.listen(this.canvas, 'mousemove', (e) => this.scratch(e));
+        this.listen(this.canvas, 'mouseup', () => this.stopScratching());
+        this.listen(this.canvas, 'mouseleave', () => this.stopScratching());
+        this.listen(this.canvas, 'touchstart', (e) => {
+            this.isDrawing = true;
+            this.showInstructions = false;
+            const touch = e.touches[0];
+            if (touch)
+                this.scratch(touch);
+        }, { passive: true });
+        this.listen(this.canvas, 'touchmove', (e) => {
+            if (e.cancelable)
+                e.preventDefault();
+            const touch = e.touches[0];
+            if (touch)
+                this.scratch(touch);
+        }, { passive: false });
+        this.listen(this.canvas, 'touchend', () => this.stopScratching());
+        this.listen(this.canvas, 'touchcancel', () => this.stopScratching());
+    }
+    startScratching(e) {
+        this.isDrawing = true;
+        this.showInstructions = false;
+        this.scratch(e);
+    }
+    stopScratching() {
+        this.isDrawing = false;
+    }
+    scratch(e) {
+        if (!this.isDrawing || !this.ctx || !this.canvas)
+            return;
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left) * window.devicePixelRatio;
+        const y = (e.clientY - rect.top) * window.devicePixelRatio;
+        const r = (this.brushSize * window.devicePixelRatio) / 2;
+        this.ctx.save();
+        this.ctx.globalCompositeOperation = 'destination-out';
+        this.ctx.beginPath();
+        this.ctx.arc(x, y, r, 0, Math.PI * 2);
+        this.ctx.fill();
+        this.ctx.restore();
+        if (!this._rafId) {
+            this._rafId = requestAnimationFrame(() => {
+                this._rafId = undefined;
+                this.calculateRevealPercentage();
+            });
+        }
+    }
+    calculateRevealPercentage() {
+        if (!this.ctx || !this.canvas)
+            return;
+        const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+        const data = imageData.data;
+        let revealed = 0;
+        for (let i = 3; i < data.length; i += 4) {
+            if (data[i] === 0) {
+                revealed++;
+            }
+        }
+        const newPercentage = Math.round((revealed / (data.length / 4)) * 100);
+        this._scratchProgress = newPercentage;
+        this.dispatchCustomEvent('scratch-progress', { percentage: newPercentage });
+        if (newPercentage >= this.revealThreshold && !this.isRevealed) {
+            this.isRevealed = true;
+            this.dispatchCustomEvent('scratch-reveal', { percentage: newPercentage });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._rafId) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = undefined;
+        }
+    }
+    reset() {
+        this.isRevealed = false;
+        this.showInstructions = true;
+        this._scratchProgress = 0;
+        if (this.ctx && this.canvas) {
+            this.ctx.fillStyle = 'var(--uibit-scratch-reveal-overlay-color, #c0c0c0)';
+            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+    }
+    render() {
+        return html `
+      <div part="container" class="scratch-container" role="img" aria-label=${msg('Scratch-off panel to reveal content')} aria-valuenow=${this._scratchProgress}>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+        <canvas part="canvas"></canvas>
+        ${this.showInstructions
+            ? html `
+              <div class="instructions" part="instructions">
+                <span class="instructions-text">${msg('Scratch to reveal')}</span>
+              </div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'reveal-threshold' })
+], ScratchReveal.prototype, "revealThreshold", void 0);
+__decorate([
+    state()
+], ScratchReveal.prototype, "_scratchProgress", void 0);
+__decorate([
+    state()
+], ScratchReveal.prototype, "isRevealed", void 0);
+__decorate([
+    state()
+], ScratchReveal.prototype, "showInstructions", void 0);
+ScratchReveal = __decorate([
+    customElement('uibit-scratch-reveal')
+], ScratchReveal);
+export { ScratchReveal };
+export default ScratchReveal;
+//# sourceMappingURL=scratch-reveal.js.map

package/dist/scratch-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scratch-reveal.js","sourceRoot":"","sources":["../src/scratch-reveal.ts"],"names":[],"mappings":"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"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4DlB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --uibit-scratch-reveal-width: 25rem;
+    --uibit-scratch-reveal-height: 12.5rem;
+    --uibit-scratch-reveal-overlay-color: #d1d5db;
+    --uibit-scratch-reveal-cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="13" fill="%23111" opacity="0.5"/><circle cx="16" cy="16" r="12" fill="none" stroke="white" stroke-width="2"/><circle cx="16" cy="16" r="4" fill="white"/></svg>') 16 16, crosshair;
+    --uibit-scratch-reveal-brush-size: 3rem;
+  }
+
+  .scratch-container {
+    position: relative;
+    width: var(--uibit-scratch-reveal-width);
+    height: var(--uibit-scratch-reveal-height);
+    overflow: hidden;
+    border-radius: var(--uibit-scratch-reveal-border-radius, 0.5rem);
+    background: var(--uibit-scratch-reveal-background, #f3f4f6);
+    user-select: none;
+    touch-action: none;
+  }
+
+  .content {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--uibit-scratch-reveal-padding, 1rem);
+    font-size: var(--uibit-scratch-reveal-font-size, var(--uibit-font-size-base, 1rem));
+    font-weight: var(--uibit-scratch-reveal-font-weight, var(--uibit-font-weight-semibold, 600));
+    color: var(--uibit-scratch-reveal-color, #111827);
+    text-align: center;
+    word-break: break-word;
+    z-index: 1;
+  }
+
+  canvas {
+    position: absolute;
+    inset: 0;
+    cursor: var(--uibit-scratch-reveal-cursor);
+    z-index: 2;
+    display: block;
+  }
+
+  .instructions {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: var(--uibit-scratch-reveal-instructions-color, rgba(0, 0, 0, 0.4));
+    font-size: var(--uibit-scratch-reveal-instructions-font-size, var(--uibit-font-size-sm, 0.875rem));
+    pointer-events: none;
+    z-index: 3;
+  }
+
+  .instructions-text {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+import type ScratchReveal from './scratch-reveal';
+export interface ScratchRevealDetail {
+    revealPercentage: number;
+}
+export interface ScratchProgressDetail {
+    revealPercentage: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-scratch-reveal': ScratchReveal;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,aAAa,CAAC;KACzC;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@uibit/scratch-reveal",
+  "version": "0.1.0",
+  "description": "A gamified, accessible scratch-off panel component that reveals hidden content. Users can scratch off the overlay canvas layer by dragging or touching.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./scratch-reveal.css": "./dist/scratch-reveal.css",
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "scratch-reveal",
+    "web-component",
+    "lit",
+    "gamified",
+    "interactive",
+    "promo",
+    "accessible",
+    "a11y"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/scratch-reveal"
+  },
+  "dependencies": {
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "scratch-reveal",
+    "title": "Scratch Reveal",
+    "category": "Media",
+    "tagName": "uibit-scratch-reveal"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}