@uibit/image-comparison 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 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,25 @@
+# Image Comparison
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/image-comparison)
+
+Image Comparison provides a visual comparison curtain layout. It overlays two images (representing before and after states) and allows users to peel them back horizontally, vertically, diagonally, or radially via an interactive handle slider.
+
+## Value Delivery
+
+- **Direct visual contrast** – Enables users to compare subtle differences between two visual states in a single, overlapping interface footprint.
+- **Multiple reveal modes** – Supports horizontal, vertical, diagonal, and radial swipe layouts to fit different aspect ratios and visual orientations.
+- **Full accessibility support** – Out-of-the-box keyboard control (arrow keys, home, end) and ARIA slider semantics ensure comparison functionality is accessible to screen readers and keyboard-only users.
+
+## Ideal Applications
+
+- **Photo editing** – Displaying before/after filters, retouches, or color corrections.
+- **Product showcases** – Comparing design upgrades, blueprints, rendering fidelity, or cosmetic changes.
+- **Historical comparisons** – Presenting satellite imagery, architectural renovations, or site transformations over time.
+
+## 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,345 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/image-comparison.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An interactive visual comparison curtain component. Displays before and after states\nand allows users to peel them back horizontally, vertically, diagonally, or radially.",
+          "name": "ImageComparison",
+          "cssProperties": [
+            {
+              "description": "Diameter of the handle knob",
+              "name": "--uibit-image-comparison-handle-size",
+              "default": "2.75rem"
+            },
+            {
+              "description": "Background color of the handle knob",
+              "name": "--uibit-image-comparison-handle-bg",
+              "default": "#ffffff"
+            },
+            {
+              "description": "Border outline color of the handle",
+              "name": "--uibit-image-comparison-handle-border-color",
+              "default": "transparent"
+            },
+            {
+              "description": "Color of the arrows/icons inside the handle",
+              "name": "--uibit-image-comparison-handle-inner-color",
+              "default": "#111111"
+            },
+            {
+              "description": "Separation line border color",
+              "name": "--uibit-image-comparison-border-color",
+              "default": "#ffffff"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "ComparisonMode"
+              },
+              "default": "'horizontal'",
+              "description": "Visual mode of reveal: 'horizontal' | 'vertical' | 'diagonal' | 'radial'",
+              "attribute": "mode"
+            },
+            {
+              "kind": "field",
+              "name": "progress",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "Reveal progress percentage (0 to 100)",
+              "attribute": "progress"
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether progress is interactive via dragging/touching",
+              "attribute": "interactive"
+            },
+            {
+              "kind": "field",
+              "name": "hoverReveal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, pointer movement tracks progress immediately without click-dragging",
+              "attribute": "hover-reveal"
+            },
+            {
+              "kind": "field",
+              "name": "_isDragging",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "_updateAria",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateProgressFromEvent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPointerDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPointerMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPointerUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getClipPath",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getHandleStyle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getDividerStyle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_renderHandleIcon",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "progress: number"
+              },
+              "description": "Fired when the curtain progress updates",
+              "name": "comparison-progress"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "mode",
+              "type": {
+                "text": "ComparisonMode"
+              },
+              "default": "'horizontal'",
+              "description": "Visual mode of reveal: 'horizontal' | 'vertical' | 'diagonal' | 'radial'",
+              "fieldName": "mode"
+            },
+            {
+              "name": "progress",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "Reveal progress percentage (0 to 100)",
+              "fieldName": "progress"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether progress is interactive via dragging/touching",
+              "fieldName": "interactive"
+            },
+            {
+              "name": "hover-reveal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, pointer movement tracks progress immediately without click-dragging",
+              "fieldName": "hoverReveal"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-image-comparison",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ImageComparison",
+          "declaration": {
+            "name": "ImageComparison",
+            "module": "src/image-comparison.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-image-comparison",
+          "declaration": {
+            "name": "ImageComparison",
+            "module": "src/image-comparison.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ImageComparison",
+            "module": "src/image-comparison.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./image-comparison"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ImageComparison",
+          "declaration": {
+            "name": "ImageComparison",
+            "module": "./image-comparison"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ComparisonMode",
+          "declaration": {
+            "name": "ComparisonMode",
+            "module": "./types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ImageComparisonConfig",
+          "declaration": {
+            "name": "ImageComparisonConfig",
+            "module": "./types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; user-select: none; outline: none; border-radius: 0.5rem; --uibit-image-comparison-handle-size: 2.25rem; --uibit-image-comparison-handle-bg: #ffffff; --uibit-image-comparison-handle-border-color: #e5e7eb; --uibit-image-comparison-handle-inner-color: #111827; --uibit-image-comparison-border-color: #ffffff; } :host(:focus-visible) { box-shadow: 0 0 0 0.1875rem rgba(0, 0, 0, 0.35); } .container { position: relative; width: 100%; height: 100%; touch-action: none; } .container.dragging, .container.dragging .handle { cursor: grabbing !important; } .layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .layer::slotted(*), .layer slot::slotted(*) { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .layer-after { z-index: 0; } .layer-before { z-index: 1; pointer-events: none; } .divider { position: absolute; z-index: 2; background-color: var(--uibit-image-comparison-border-color); pointer-events: none; opacity: 0.9; } .divider-horizontal { top: 0; bottom: 0; width: 0.125rem; transform: translateX(-50%); } .divider-vertical { left: 0; right: 0; height: 0.125rem; transform: translateY(-50%); } .handle { position: absolute; z-index: 3; width: var(--uibit-image-comparison-handle-size); height: var(--uibit-image-comparison-handle-size); border-radius: 9999px; background-color: var(--uibit-image-comparison-handle-bg); border: 0.0625rem solid var(--uibit-image-comparison-handle-border-color); box-shadow: none; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); cursor: grab; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .handle:hover { background-color: #f3f4f6; border-color: #d1d5db; box-shadow: none; transform: translate(-50%, -50%) scale(1.06); } .handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(0.95); } .handle-icon { width: 1.125rem; height: 1.125rem; color: var(--uibit-image-comparison-handle-inner-color); display: flex; align-items: center; justify-content: center; } .handle-icon svg { width: 100%; height: 100%; } `"
+        }
+      ],
+      "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,45 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/image-comparison';
+import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+import type { ComparisonMode } from '@uibit/image-comparison';
+
+@Component({
+  selector: 'uibit-image-comparison',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(comparison-progress)': 'comparisonProgress.emit($event)'
+  }
+})
+export class NgxImageComparison {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.mode = this.mode();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.progress = this.progress();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.interactive = this.interactive();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.hoverReveal = this.hoverReveal();
+      }
+    });
+  }
+
+  readonly mode = input<ComparisonMode, any>('horizontal');
+  readonly progress = input<number, any>(50, { transform: numberAttribute });
+  readonly interactive = input<boolean, any>(true, { transform: booleanAttribute });
+  readonly hoverReveal = input<boolean, any>(false, { transform: booleanAttribute });
+
+  readonly comparisonProgress = output<CustomEvent<progress: number>>();
+}

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

@@ -0,0 +1,10 @@
+import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+import '@uibit/image-comparison';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-image-comparison': 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/image-comparison');
+  }
+});

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

@@ -0,0 +1,17 @@
+import type { JSX } from 'preact';
+import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+import '@uibit/image-comparison';
+import type { ComparisonMode } from '@uibit/image-comparison';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-image-comparison': JSX.HTMLAttributes<HTMLElementClass> & {
+      mode?: ComparisonMode;
+      progress?: number;
+      interactive?: boolean;
+      hoverReveal?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

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

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+import '@uibit/image-comparison';
+import type { ComparisonMode } from '@uibit/image-comparison';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-image-comparison': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      mode?: ComparisonMode;
+      progress?: number;
+      interactive?: boolean;
+      hoverReveal?: boolean;
+      onComparisonProgress?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { JSX } from 'solid-js';
+import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+import '@uibit/image-comparison';
+import type { ComparisonMode } from '@uibit/image-comparison';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-image-comparison': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              mode?: ComparisonMode;
+      progress?: number;
+      interactive?: boolean;
+      hoverReveal?: boolean;
+      "on:comparison-progress"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+import '@uibit/image-comparison';
+import type { ComparisonMode } from '@uibit/image-comparison';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-image-comparison': HTMLElementClass & {
+    mode?: ComparisonMode;
+    progress?: number;
+    interactive?: boolean;
+    hoverReveal?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import '@uibit/image-comparison';
+  import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+  import type { ComparisonMode } from '@uibit/image-comparison';
+  
+  let {
+    mode = undefined,
+      progress = undefined,
+      interactive = undefined,
+      hoverReveal = undefined,
+      children
+  } = $props<{
+    children?: any;
+    mode?: ComparisonMode;
+    progress?: number;
+    interactive?: boolean;
+    hoverReveal?: boolean;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && mode !== undefined) {
+      elementRef.mode = mode;
+    }
+    if (elementRef && progress !== undefined) {
+      elementRef.progress = progress;
+    }
+    if (elementRef && interactive !== undefined) {
+      elementRef.interactive = interactive;
+    }
+    if (elementRef && hoverReveal !== undefined) {
+      elementRef.hoverReveal = hoverReveal;
+    }
+  });
+  
+</script>
+
+<uibit-image-comparison bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-image-comparison>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,28 @@
+import { defineComponent, h } from 'vue';
+import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
+import '@uibit/image-comparison';
+import type { ComparisonMode } from '@uibit/image-comparison';
+
+export const ImageComparison = defineComponent({
+  name: 'ImageComparison',
+  props: {
+    mode: { type: [String, Number, Boolean, Array, Object] as any },
+    progress: { type: [String, Number, Boolean, Array, Object] as any },
+    interactive: { type: [String, Number, Boolean, Array, Object] as any },
+    hoverReveal: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['comparison-progress'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onComparison-progress'] = (event: Event) => {
+        emit('comparison-progress', event);
+      };
+
+      return h('uibit-image-comparison', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/image-comparison.d.ts

@@ -0,0 +1,46 @@
+import { UIBitElement } from '@uibit/core';
+import type { ComparisonMode } from './types';
+/**
+ * An interactive visual comparison curtain component. Displays before and after states
+ * and allows users to peel them back horizontally, vertically, diagonally, or radially.
+ *
+ * @fires { progress: number } comparison-progress - Fired when the curtain progress updates
+ *
+ * @cssprop [--uibit-image-comparison-handle-size=2.75rem] - Diameter of the handle knob
+ * @cssprop [--uibit-image-comparison-handle-bg=#ffffff] - Background color of the handle knob
+ * @cssprop [--uibit-image-comparison-handle-border-color=transparent] - Border outline color of the handle
+ * @cssprop [--uibit-image-comparison-handle-inner-color=#111111] - Color of the arrows/icons inside the handle
+ * @cssprop [--uibit-image-comparison-border-color=#ffffff] - Separation line border color
+ */
+export declare class ImageComparison extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Visual mode of reveal: 'horizontal' | 'vertical' | 'diagonal' | 'radial' */
+    mode: ComparisonMode;
+    /** Reveal progress percentage (0 to 100) */
+    progress: number;
+    /** Whether progress is interactive via dragging/touching */
+    interactive: boolean;
+    /** If true, pointer movement tracks progress immediately without click-dragging */
+    hoverReveal: boolean;
+    private _isDragging;
+    connectedCallback(): void;
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private _updateAria;
+    private _onKeyDown;
+    private _updateProgressFromEvent;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _getClipPath;
+    private _getHandleStyle;
+    private _getDividerStyle;
+    private _renderHandleIcon;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-image-comparison': ImageComparison;
+    }
+}
+export default ImageComparison;
+//# sourceMappingURL=image-comparison.d.ts.map

package/dist/image-comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-comparison.d.ts","sourceRoot":"","sources":["../src/image-comparison.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;GAWG;AACH,qBACa,eAAgB,SAAQ,YAAY;IAC/C,MAAM,CAAC,MAAM,0BAAU;IAEvB,+EAA+E;IACnD,IAAI,EAAE,cAAc,CAAgB;IAEhE,4CAA4C;IAChB,QAAQ,SAAM;IAE1C,4DAA4D;IAC/B,WAAW,UAAQ;IAEhD,mFAAmF;IAC3B,WAAW,UAAS;IAEnE,OAAO,CAAC,WAAW,CAAS;IAErC,iBAAiB,SAShB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,QAKnD;IAED,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,wBAAwB;IA6BhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,iBAAiB;IAwCzB,MAAM,oCA6CL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,eAAe,CAAC;KAC3C;CACF;eAEc,eAAe"}

package/dist/image-comparison.js

@@ -0,0 +1,289 @@
+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, UIBitElement } from '@uibit/core';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * An interactive visual comparison curtain component. Displays before and after states
+ * and allows users to peel them back horizontally, vertically, diagonally, or radially.
+ *
+ * @fires { progress: number } comparison-progress - Fired when the curtain progress updates
+ *
+ * @cssprop [--uibit-image-comparison-handle-size=2.75rem] - Diameter of the handle knob
+ * @cssprop [--uibit-image-comparison-handle-bg=#ffffff] - Background color of the handle knob
+ * @cssprop [--uibit-image-comparison-handle-border-color=transparent] - Border outline color of the handle
+ * @cssprop [--uibit-image-comparison-handle-inner-color=#111111] - Color of the arrows/icons inside the handle
+ * @cssprop [--uibit-image-comparison-border-color=#ffffff] - Separation line border color
+ */
+let ImageComparison = class ImageComparison extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Visual mode of reveal: 'horizontal' | 'vertical' | 'diagonal' | 'radial' */
+        this.mode = 'horizontal';
+        /** Reveal progress percentage (0 to 100) */
+        this.progress = 50;
+        /** Whether progress is interactive via dragging/touching */
+        this.interactive = true;
+        /** If true, pointer movement tracks progress immediately without click-dragging */
+        this.hoverReveal = false;
+        this._isDragging = false;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('tabindex', this.getAttribute('tabindex') || '0');
+        this.setAttribute('role', 'slider');
+        this.setAttribute('aria-valuemin', '0');
+        this.setAttribute('aria-valuemax', '100');
+        this._updateAria();
+        this.listen(this, 'keydown', this._onKeyDown);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('progress')) {
+            this._updateAria();
+        }
+    }
+    _updateAria() {
+        this.setAttribute('aria-valuenow', String(this.progress));
+        this.setAttribute('aria-label', `Visual comparison slider, current progress ${this.progress}%`);
+    }
+    _onKeyDown(e) {
+        if (!this.interactive)
+            return;
+        let newProgress = this.progress;
+        switch (e.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newProgress = Math.max(0, this.progress - 5);
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newProgress = Math.min(100, this.progress + 5);
+                break;
+            case 'Home':
+                newProgress = 0;
+                break;
+            case 'End':
+                newProgress = 100;
+                break;
+            default:
+                return; // Let other keys propagate
+        }
+        e.preventDefault();
+        if (newProgress !== this.progress) {
+            this.progress = newProgress;
+            this.dispatchCustomEvent('comparison-progress', { progress: this.progress });
+        }
+    }
+    _updateProgressFromEvent(e) {
+        const rect = this.getBoundingClientRect();
+        let pct = 50;
+        if (this.mode === 'horizontal') {
+            const x = e.clientX - rect.left;
+            pct = (x / rect.width) * 100;
+        }
+        else if (this.mode === 'vertical') {
+            const y = e.clientY - rect.top;
+            pct = (y / rect.height) * 100;
+        }
+        else if (this.mode === 'diagonal') {
+            const x = e.clientX - rect.left;
+            pct = (x / rect.width) * 100;
+        }
+        else if (this.mode === 'radial') {
+            const x = e.clientX - (rect.left + rect.width / 2);
+            const y = e.clientY - (rect.top + rect.height / 2);
+            const dist = Math.sqrt(x * x + y * y);
+            const maxDist = Math.sqrt(rect.width * rect.width + rect.height * rect.height) / 2;
+            pct = (dist / maxDist) * 100;
+        }
+        pct = Math.max(0, Math.min(100, pct));
+        const rounded = Math.round(pct);
+        if (rounded !== this.progress) {
+            this.progress = rounded;
+            this.dispatchCustomEvent('comparison-progress', { progress: this.progress });
+        }
+    }
+    _onPointerDown(e) {
+        if (!this.interactive || this.hoverReveal)
+            return;
+        const container = this.shadowRoot?.querySelector('.container');
+        if (container) {
+            container.setPointerCapture(e.pointerId);
+        }
+        this._isDragging = true;
+        this._updateProgressFromEvent(e);
+    }
+    _onPointerMove(e) {
+        if (!this.interactive)
+            return;
+        if (this.hoverReveal || this._isDragging) {
+            this._updateProgressFromEvent(e);
+        }
+    }
+    _onPointerUp(e) {
+        if (this._isDragging) {
+            const container = this.shadowRoot?.querySelector('.container');
+            if (container) {
+                container.releasePointerCapture(e.pointerId);
+            }
+            this._isDragging = false;
+        }
+    }
+    _getClipPath() {
+        const p = this.progress;
+        if (this.mode === 'horizontal') {
+            return `inset(0 ${100 - p}% 0 0)`;
+        }
+        if (this.mode === 'vertical') {
+            return `inset(0 0 ${100 - p}% 0)`;
+        }
+        if (this.mode === 'radial') {
+            return `circle(${p}% at 50% 50%)`;
+        }
+        if (this.mode === 'diagonal') {
+            if (p <= 50) {
+                return `polygon(0 0, ${p * 2}% 0, 0 ${p * 2}%)`;
+            }
+            else {
+                return `polygon(0 0, 100% 0, 100% ${(p - 50) * 2}%, ${(p - 50) * 2}% 100%, 0 100%)`;
+            }
+        }
+        return 'none';
+    }
+    _getHandleStyle() {
+        const p = this.progress;
+        if (this.mode === 'horizontal') {
+            return `left: ${p}%; top: 50%;`;
+        }
+        if (this.mode === 'vertical') {
+            return `left: 50%; top: ${p}%;`;
+        }
+        if (this.mode === 'diagonal') {
+            return `left: ${p}%; top: ${p}%;`;
+        }
+        // Radial placing handle in center
+        return `left: 50%; top: 50%;`;
+    }
+    _getDividerStyle() {
+        const p = this.progress;
+        if (this.mode === 'horizontal') {
+            return `left: ${p}%;`;
+        }
+        if (this.mode === 'vertical') {
+            return `top: ${p}%;`;
+        }
+        return '';
+    }
+    _renderHandleIcon() {
+        if (this.mode === 'horizontal') {
+            return html `
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9 7L4 12L9 17" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M15 7L20 12L15 17" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      `;
+        }
+        if (this.mode === 'vertical') {
+            return html `
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M7 9L12 4L17 9" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M7 15L12 20L17 15" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      `;
+        }
+        if (this.mode === 'diagonal') {
+            return html `
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M7 7L4 4M4 4L9 4M4 4L4 9" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M17 17L20 20M20 20L15 20M20 20L20 15" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      `;
+        }
+        // Radial
+        return html `
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 4L12 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+        <path d="M12 16L12 20" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+        <path d="M4 12L8 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+        <path d="M16 12L20 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+        <path d="M6.34 6.34L9.17 9.17" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+        <path d="M14.83 14.83L17.66 17.66" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+        <path d="M17.66 6.34L14.83 9.17" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+        <path d="M9.17 14.83L6.34 17.66" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+      </svg>
+    `;
+    }
+    render() {
+        const clipStyle = `clip-path: ${this._getClipPath()};`;
+        const handleStyle = this._getHandleStyle();
+        const dividerStyle = this._getDividerStyle();
+        return html `
+      <div 
+        class="container ${this._isDragging ? 'dragging' : ''}" 
+        part="container"
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+        @pointerup=${this._onPointerUp}
+      >
+        <div class="layer layer-after" part="after-layer">
+          <slot name="after"></slot>
+        </div>
+
+        <div class="layer layer-before" style=${clipStyle} part="before-layer">
+          <slot name="before"></slot>
+        </div>
+
+        ${this.mode === 'horizontal' || this.mode === 'vertical'
+            ? html `
+              <div 
+                class="divider divider-${this.mode}" 
+                style=${dividerStyle}
+                part="divider"
+              ></div>
+            `
+            : ''}
+
+        <div 
+          class="handle" 
+          style=${handleStyle} 
+          part="handle"
+          role="presentation"
+        >
+          <slot name="handle">
+            <div class="handle-icon">
+              ${this._renderHandleIcon()}
+            </div>
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ImageComparison.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number })
+], ImageComparison.prototype, "progress", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageComparison.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hover-reveal' })
+], ImageComparison.prototype, "hoverReveal", void 0);
+__decorate([
+    state()
+], ImageComparison.prototype, "_isDragging", void 0);
+ImageComparison = __decorate([
+    customElement('uibit-image-comparison')
+], ImageComparison);
+export { ImageComparison };
+export default ImageComparison;
+//# sourceMappingURL=image-comparison.js.map

package/dist/image-comparison.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, ImageComparison } from './image-comparison';
+export type { ComparisonMode, ImageComparisonConfig } 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,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default, ImageComparison } from './image-comparison';
+//# 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,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

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,yBA2HlB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,126 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    user-select: none;
+    outline: none;
+    border-radius: 0.5rem;
+
+    --uibit-image-comparison-handle-size: 2.25rem;
+    --uibit-image-comparison-handle-bg: #ffffff;
+    --uibit-image-comparison-handle-border-color: #e5e7eb;
+    --uibit-image-comparison-handle-inner-color: #111827;
+    --uibit-image-comparison-border-color: #ffffff;
+  }
+
+  :host(:focus-visible) {
+    box-shadow: 0 0 0 0.1875rem rgba(0, 0, 0, 0.35);
+  }
+
+  .container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+  }
+
+  .container.dragging,
+  .container.dragging .handle {
+    cursor: grabbing !important;
+  }
+
+  .layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .layer::slotted(*),
+  .layer slot::slotted(*) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+    display: block;
+  }
+
+  .layer-after {
+    z-index: 0;
+  }
+
+  .layer-before {
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .divider {
+    position: absolute;
+    z-index: 2;
+    background-color: var(--uibit-image-comparison-border-color);
+    pointer-events: none;
+    opacity: 0.9;
+  }
+
+  .divider-horizontal {
+    top: 0;
+    bottom: 0;
+    width: 0.125rem;
+    transform: translateX(-50%);
+  }
+
+  .divider-vertical {
+    left: 0;
+    right: 0;
+    height: 0.125rem;
+    transform: translateY(-50%);
+  }
+
+  .handle {
+    position: absolute;
+    z-index: 3;
+    width: var(--uibit-image-comparison-handle-size);
+    height: var(--uibit-image-comparison-handle-size);
+    border-radius: 9999px;
+    background-color: var(--uibit-image-comparison-handle-bg);
+    border: 0.0625rem solid var(--uibit-image-comparison-handle-border-color);
+    box-shadow: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
+  }
+
+  .handle:hover {
+    background-color: #f3f4f6;
+    border-color: #d1d5db;
+    box-shadow: none;
+    transform: translate(-50%, -50%) scale(1.06);
+  }
+
+  .handle:active {
+    cursor: grabbing;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+
+  .handle-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+    color: var(--uibit-image-comparison-handle-inner-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .handle-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,8 @@
+export type ComparisonMode = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
+export interface ImageComparisonConfig {
+    mode?: ComparisonMode;
+    progress?: number;
+    interactive?: boolean;
+    hoverReveal?: boolean;
+}
+//# 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,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE/E,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}

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,94 @@
+{
+  "name": "@uibit/image-comparison",
+  "version": "0.1.0",
+  "description": "Displays overlapping before/after content layers with interactive diagonal, radial, horizontal, or vertical splits.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./image-comparison.css": "./dist/image-comparison.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": [
+    "comparison",
+    "slider",
+    "before-after",
+    "curtain",
+    "diagonal",
+    "web-component",
+    "lit",
+    "effect"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/image-comparison"
+  },
+  "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": "image-comparison",
+    "title": "Image Comparison",
+    "category": "Media",
+    "tagName": "uibit-image-comparison"
+  },
+  "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",
+    "test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
+  }
+}