@simhub2/justflipit 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.0.1
+
+- Enable 3D tilt on touch and reset it when the finger lifts or scrolling takes over.
+- Keep tap-to-flip active across flip, fade and scale without immediately flipping back on touch release.
+- Restrict axis rotation to the flip effect so fade also works with `FlipX: true`.
+
 ## 4.0.0
 
 - One SSR-safe, dependency-free core with real ESM/CommonJS/browser exports.

package/README.md

@@ -1,168 +1,312 @@
-# justFlipIt
+<p align="center">
+  <img src="img/readme-banner.svg" alt="justFlipIt v4 — A little motion. A new perspective." width="100%">
+</p>
 
-Responsive 3D flip and tilt animations, with no runtime dependencies in the core.
-ES modules, CommonJS, browser scripts, TypeScript, React, Vue 3, and Svelte 4/5.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@simhub2/justflipit"><img src="https://img.shields.io/npm/v/%40simhub2%2Fjustflipit?style=flat-square&amp;color=b4df83" alt="npm version"></a>
+  <a href="https://github.com/SimHub/justFlipIt/actions/workflows/ci.yml"><img src="https://github.com/SimHub/justFlipIt/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-d9ccff?style=flat-square" alt="MIT license"></a>
+  <a href="#frameworks"><img src="https://img.shields.io/badge/TypeScript-included-93c5fd?style=flat-square" alt="TypeScript declarations included"></a>
+</p>
+
+<p align="center">
+  Responsive flip and tilt animations for your UI.<br>
+  One dependency-free core. Native framework lifecycles. Model-independent agent tools.
+</p>
+
+<p align="center">
+  <a href="#quick-start">Quick start</a> ·
+  <a href="#frameworks">React / Vue / Svelte</a> ·
+  <a href="#agent-tools">Agent tools</a> ·
+  <a href="#options">Options</a> ·
+  <a href="#upgrading-from-v3">Upgrade from v3</a>
+</p>
+
+---
+
+## A card with more to say
+
+Build product cards, reveal details, or let an agent control a card through explicit tool calls. Choose a 3D flip, a soft fade, or a scale transition, then add pointer-driven tilt.
+
+![justFlipIt demo showing flip cards, effect controls and an agent tool](img/demo.png)
+
+**[Browse the demo source →](example/index.html)** · Run locally with `npm run build` and `python3 -m http.server 4173`, then open [localhost:4173/example/](http://localhost:4173/example/).
+
+| Motion that responds | Fits your application | Control when you need it |
+|---|---|---|
+| Flip on either axis, fade, and scale | React hook, Vue directive, Svelte action | `flip`, `toggle`, `update`, and state inspection |
+| Pointer tilt batched per animation frame | Existing framework-owned faces stay in place | Model-independent JSON-schema tool definition |
+| Touch, keyboard, and reduced-motion support | Responsive layout and SSR-safe imports | Typed API and change events |
+
+## Quick start
 
 ```sh
 npm install @simhub2/justflipit
 ```
 
+Add a container to your page, then initialize it after the element exists:
+
+```html
+<div class="product-card">
+  <h2>A different perspective</h2>
+  <p>Click to discover the other side.</p>
+</div>
+```
+
 ```js
 import justFlipIt from '@simhub2/justflipit';
 
-const card = justFlipIt(document.querySelector('.card'), {
+const card = justFlipIt(document.querySelector('.product-card'), {
   Click: true,
-  Template: '<p>Back of the card</p>', // trusted application HTML only
-  Tilt: { max: 12, perspective: 1000, scale: 1.03 },
-  Effect: 'flip',
-  Duration: 450
+  Template: '<h2>There is more to see.</h2><p>Your details go here.</p>',
+  Tilt: { max: 10, perspective: 1000, scale: 1.03 },
+  Duration: 450,
 });
-card.flip();
-card.flip(false);
-card.toggle();
-card.update({ Effect: 'fade' });
-card.getState();
-card.destroy();
 ```
 
-Passing an element returns one controller; a selector or collection returns an array.
-Repeated initialization returns the existing controller. `justFlipIt.get(element)`
-retrieves it; `justFlipIt.destroy(target)` cleans up. Original nodes and their event
-listeners are preserved. The grid layout adapts to both faces without fixed dimensions.
-The card needs an HTML container, such as a `div`; do not initialize a void element.
+The original node and its event listeners are preserved. Both faces participate in a responsive grid, so the card adapts to its content. Style the faces to match your design; the core supplies the motion and layout.
 
-For script tags, use `dist/justFlipIt.min.js`, which exposes `window.justFlipIt`.
-`/modern`, `/vanilla`, `/combined`, and their historical browser filenames are aliases
-of the same core in v4. There is no jQuery plugin in v4.
+> `Template` accepts trusted application HTML. Use the agent bridge's `setText` action for model-generated text. With a framework, render content through the framework instead.
 
-## Options
+<details>
+<summary><strong>Using a browser script or CommonJS?</strong></summary>
 
-| Option | Default | Meaning |
-|---|---|---|
-| `Click` | `false` | Hover; `true` for click; selector or selector array for delegated clicks |
-| `FlipX` | `false` | Rotate on X instead of Y |
-| `Template` | cloned original | Trusted HTML for the generated back face |
-| `Duration` | `400` | Non-negative milliseconds |
-| `Easing` | `cubic-bezier(.22,.61,.36,1)` | CSS easing |
-| `Effect` | `'flip'` | `'flip'`, `'fade'`, or `'scale'` |
-| `Tilt` | `false` | `true`, `'only'`, or `{ max, perspective, scale }` |
-| `ReducedMotion` | `true` | Respect live `prefers-reduced-motion` preferences |
-| `Faces` | omitted | Select two existing direct children: `{ front, back }` |
-| `preserveClasses` | `true` | Copy classes onto generated container |
-| `preserveStyles` | `true` | Copy inline styles onto generated container |
-| `Style` | `[]` | Array of `{ el: 'self' or selector, style: {...} }` |
+**Browser script — no bundler:**
 
-Tilt pointer updates are batched into one animation frame; touch scrolling remains
-native. Hover mode also supports touch tap. Focus the card and press Enter/Space to
-toggle, Escape to reset. The hidden face is inert and marked `aria-hidden`.
-Listen for `justflipit:change` on the container; `event.detail` contains the state.
-CSS transitions reverse naturally during rapid input without accumulating animations.
+```html
+<div class="card">Front of the card</div>
+<script src="https://cdn.jsdelivr.net/npm/@simhub2/justflipit@4.0.1/dist/justFlipIt.min.js"></script>
+<script>
+  justFlipIt('.card', { Click: true, Template: '<p>Back of the card</p>' });
+</script>
+```
+
+**CommonJS:**
+
+```js
+const justFlipIt = require('@simhub2/justflipit');
+```
+
+The browser bundle exposes `window.justFlipIt`. ESM and CommonJS imports include matching TypeScript declarations.
+
+</details>
 
 ## Frameworks
 
-Framework integrations use existing faces. They do not move, clone, or replace framework
-nodes. Render front/back content through your framework, and do not pass `Template`.
-Keep `Faces` selectors stable for the lifetime of an instance. Direct DOM methods
-run only on the client; importing any entry point during SSR is safe.
+Use two direct child elements as the front and back faces. The adapters attach behavior to those existing nodes, so reactive content remains owned by your framework.
+
+| Framework | Import | Integration | Cleanup |
+|---|---|---|---|
+| React 18+ | `@simhub2/justflipit/react` | `useFlip()` hook | Effect cleanup; StrictMode compatible |
+| Vue 3 | `@simhub2/justflipit/vue` | `vFlip` directive | `beforeUnmount` |
+| Svelte 4/5 | `@simhub2/justflipit/svelte` | `flip` action | Action `destroy()` |
+| Other frameworks | `@simhub2/justflipit` | Core with `Faces` selectors | Call `destroy()` before unmount |
 
-React uses an Effect with cleanup, including development StrictMode cycles, following
-[React's external-system lifecycle](https://react.dev/reference/react/useEffect).
+<details open>
+<summary><strong>React</strong> — hook, ref and controller</summary>
 
 ```jsx
 import { useFlip } from '@simhub2/justflipit/react';
 
-export function Card({ title }) {
+export function ProductCard({ title, details }) {
   const { ref, controller } = useFlip({ Click: true, Tilt: true });
-  return <div>
-    <div ref={ref}>
-      <div data-flip-front>{title}</div>
-      <div data-flip-back>Details</div>
-    </div>
-    <button onClick={() => controller.current?.toggle()}>Flip</button>
-  </div>;
+
+  return (
+    <section>
+      <div ref={ref}>
+        <div data-flip-front>{title}</div>
+        <div data-flip-back>{details}</div>
+      </div>
+      <button onClick={() => controller.current?.toggle()}>Flip card</button>
+    </section>
+  );
 }
 ```
 
-Vue 3 uses a [custom directive](https://vuejs.org/guide/reusability/custom-directives.html)
-with mount, update and teardown hooks.
+In Next.js App Router, put this hook in a Client Component with `'use client'`.
+
+</details>
+
+<details>
+<summary><strong>Vue 3</strong> — directive with reactive options</summary>
 
 ```vue
 <script setup>
 import { vFlip } from '@simhub2/justflipit/vue';
+
+defineProps({ title: String, details: String });
 </script>
+
 <template>
   <div v-flip="{ Click: true, Effect: 'scale' }">
-    <div data-flip-front>Front</div>
-    <div data-flip-back>Back</div>
+    <div data-flip-front>{{ title }}</div>
+    <div data-flip-back>{{ details }}</div>
   </div>
 </template>
 ```
 
-Svelte uses an [action](https://svelte.dev/docs/svelte/use) with update and destroy hooks.
+</details>
+
+<details>
+<summary><strong>Svelte</strong> — action with lifecycle updates</summary>
 
 ```svelte
 <script>
   import { flip } from '@simhub2/justflipit/svelte';
 </script>
+
 <div use:flip={{ Click: true, Tilt: true }}>
   <div data-flip-front>Front</div>
-  <div data-flip-back>Back</div>
+  <div data-flip-back>Details</div>
 </div>
 ```
 
-Other frameworks can call the core on mount with `Faces`, update options when needed,
-and call `destroy()` before unmounting.
+</details>
 
-## Model-independent agent tools
+**Lifecycle notes:** Imports are safe during server rendering; initialize DOM controllers on the client. Keep `Faces` selectors stable while mounted. Render framework content through application state and omit `Template`. Avoid simultaneously managing the plugin's style, class and accessibility attributes from your framework.
 
-The optional `/agent` entry exports a JSON-schema tool definition and a synchronous
-executor. Your application registers explicit card IDs, receives a tool call from its
-agent runtime, parses its JSON arguments, and passes the command to `execute`.
-No API key or model SDK is required by this package.
+## Agent tools
+
+Connect any agent runtime that supports tool calls. Register the cards your agent may control, supply the exported schema to your runtime, and pass parsed tool arguments to the executor.
 
 ```js
+import justFlipIt from '@simhub2/justflipit';
 import { createAgentBridge } from '@simhub2/justflipit/agent';
-const bridge = createAgentBridge({ product: card });
 
-// Adapt this definition to the tool envelope required by your agent runtime.
-const toolDefinition = bridge.tool;
+const product = justFlipIt(document.querySelector('.product-card'), {
+  Click: true,
+});
+const bridge = createAgentBridge({ product });
+
+// Wrap this definition in the tool format expected by your agent runtime.
+const tool = bridge.tool;
+
+// Execute the parsed arguments from a tool call.
+bridge.execute({ id: 'product', action: 'setText', text: 'Selected for you.' });
 const result = bridge.execute({ id: 'product', action: 'flip' });
-bridge.execute({ id: 'product', action: 'setText', text: 'Agent-generated details' });
+// { id: 'product', flipped: true, destroyed: false, effect: 'flip' }
+```
+
+| Action | Result |
+|---|---|
+| `state` | Read the card's current state |
+| `flip` | Show the back |
+| `reset` | Show the front |
+| `toggle` | Switch sides |
+| `setText` | Replace the generated back face with plain text |
+
+The bridge validates commands and accepts only registered card IDs. `setText` uses `textContent`, accepts up to 100,000 characters, and rejects framework-managed cards; update framework content through application state.
+
+The executor runs in the browser alongside the DOM. Relay server-side tool calls through your application. The package provides a schema and executor; your application supplies the agent runtime and any model credentials.
+
+## Controller API
+
+```js
+card.flip();                          // Show back
+card.flip(false);                     // Show front
+card.toggle();                        // Switch sides
+card.update({ Effect: 'fade' });       // Change options in place
+card.getState();                       // { flipped, destroyed, effect }
+card.destroy();                        // Remove listeners and restore the element
+```
+
+| Call | Returns |
+|---|---|
+| `justFlipIt(element, options)` | One controller |
+| `justFlipIt(selectorOrCollection, options)` | An array of controllers |
+| `justFlipIt.get(element)` | Existing controller, or `undefined` |
+| `justFlipIt.destroy(target)` | Destroys matching instances |
+
+Repeated initialization returns the existing instance. Use `update()` to change its options. `destroy()` is safe to call more than once. Initialize an HTML container, such as a `div`, rather than a void element such as `img`.
+
+```js
+card.hoverPanel.addEventListener('justflipit:change', ({ detail }) => {
+  console.log(detail.flipped, detail.effect);
+});
+```
+
+## Options
+
+| Option | Default | What it controls |
+|---|---|---|
+| `Click` | `false` | Hover by default; `true` for click; a selector or selector array for delegated clicks |
+| `FlipX` | `false` | X-axis rotation instead of Y-axis |
+| `Template` | Clone of original | Trusted HTML for a generated back face |
+| `Duration` | `400` | Non-negative duration in milliseconds |
+| `Easing` | `cubic-bezier(.22,.61,.36,1)` | CSS easing function |
+| `Effect` | `'flip'` | `'flip'`, `'fade'`, or `'scale'` |
+| `Tilt` | `false` | `true`, `'only'`, or `{ max, perspective, scale }` |
+| `ReducedMotion` | `true` | Respect live `prefers-reduced-motion` preferences |
+| `Faces` | Omitted | Existing direct children: `{ front: selector, back: selector }` |
+| `preserveClasses` | `true` | Copy original classes onto a generated container |
+| `preserveStyles` | `true` | Copy original inline styles onto a generated container |
+| `Style` | `[]` | Apply `{ el: 'self' or selector, style: {...} }` entries |
+
+<details>
+<summary><strong>Style existing faces and choose a different effect</strong></summary>
+
+```js
+justFlipIt(document.querySelector('.card'), {
+  Faces: { front: '[data-front]', back: '[data-back]' },
+  Click: true,
+  FlipX: true,
+  Effect: 'scale',
+  Duration: 500,
+  Style: [
+    { el: '[data-front]', style: { background: '#243b2b', borderRadius: '20px' } },
+    { el: '[data-back]', style: { background: '#c1f384', borderRadius: '20px' } },
+  ],
+});
 ```
 
-Actions: `state`, `flip`, `reset`, `toggle`, `setText`. Unknown IDs and actions are
-rejected. `setText` uses `textContent` and accepts at most 100000 characters; it never
-interprets model output as HTML. In framework mode update application state for
-content changes; `setText` is rejected there. This bridge runs alongside the DOM in
-the browser; a server-side agent must relay validated tool calls through your app.
+</details>
+
+## Motion and accessibility
+
+- **Reversible transitions:** Rapid input reverses the current CSS transition without accumulating animation objects.
+- **Efficient tilt.** Mouse and finger movement share one animation frame. With `Tilt: true` or custom tilt settings, touch tilts the card until release or until the browser takes over a scroll gesture.
+- **Keyboard:** Focus the card, then use Enter or Space to toggle and Escape to reset.
+- **Touch.** Tap to switch sides with any effect. Hover mode distinguishes a tap from a drag, and click mode uses the browser’s native click. Use `Tilt: 'only'` for touch tilt without tap-to-flip.
+- **Hidden faces:** The inactive face is inert and marked `aria-hidden`.
+- **Reduced motion:** System preference changes disable transitions and tilt automatically. Set `ReducedMotion: false` only when your application intentionally overrides this preference.
+
+Targets modern browsers with CSS Grid, Pointer Events, and native `inert` support. Add application-level polyfills when targeting older browsers. SSR safety covers importing the package; DOM initialization requires a browser.
+
+## Upgrading from v3
 
-## Migration from 3.x
+**v4 is a major release.** Check these changes before upgrading an existing integration:
 
-v4 is a major release. Real ESM and CommonJS exports replace the old UMD-only npm
-entry. Use a default ESM import or `const justFlipIt = require('@simhub2/justflipit')`.
-The optional jQuery plugin registration is removed. Generated faces use
-`[data-jfi-face="front"]` and `[data-jfi-face="back"]`; replace `.front`, `.backY`,
-and `._flipY_` custom CSS with these attributes and `[data-jfi-flipped="true"]`.
-Animation options keep their PascalCase names. Dimensions are responsive; give the
-original content explicit sizes if your design requires a fixed card size.
-`destroy()` restores plugin-owned attributes from their initial values; avoid managing
-those same style/class/accessibility attributes from a framework while mounted.
+| v3 integration | v4 equivalent |
+|---|---|
+| UMD-only npm entry | Default ESM import or callable CommonJS export |
+| Optional jQuery plugin registration | Call `justFlipIt(...)` directly |
+| Separate modern / vanilla / combined implementations | One core; historical import paths and browser filenames remain aliases |
+| `.front` / `.backY` generated face selectors | `[data-jfi-face="front"]` / `[data-jfi-face="back"]` |
+| `._flipY_` / `._flip_` state classes | `[data-jfi-flipped="true"]` |
+| Fixed measured dimensions | Responsive grid; add explicit sizes in your design where needed |
+| Framework DOM replacement | Existing direct-child faces via an adapter or `Faces` |
 
-## Development and releases
+Option names retain PascalCase. `Faces` cannot change after initialization. Teardown restores plugin-owned attributes to their initial values.
 
-Node.js 22 or newer is used for development.
+See the [changelog](CHANGELOG.md) for the release overview.
+
+## Development
+
+Use Node.js 22 or newer.
 
 ```sh
 npm ci
-npm run check
-npm pack --dry-run
+npm run check          # Lifecycle tests and TypeScript consumer checks
+npm run build          # ESM, CommonJS, browser bundles, source maps, declarations
+npm pack --dry-run     # Inspect published files
 ```
 
-`npm run build` produces ESM, CommonJS, minified browser bundles, source maps, and
-TypeScript declarations from one core. CI runs tests and type checks. A GitHub release
-with a `v` version tag runs the npm publishing workflow; configure npm trusted
-publishing for this repository/workflow, or publish locally with an authenticated
-npm account using `npm publish --access public`. Publish only versions not already
-present in the registry.
+Tests cover original node preservation, teardown, delegated events, agent command validation, reduced motion, tilt batching, React StrictMode, Vue updates, and a compiled Svelte 5 component.
+
+See the [release guide](https://github.com/SimHub/justFlipIt/blob/main/RELEASING.md) for the GitHub and npm steps.
+
+---
 
-MIT — see [LICENSE](LICENSE).
+<p align="center">
+  Built by <a href="https://github.com/SimHub">SimHub</a> · <a href="LICENSE">MIT license</a> · <a href="https://github.com/SimHub/justFlipIt/issues">Report an issue</a> · <a href="https://www.buymeacoffee.com/simhub">Buy me a coffee</a>
+</p>

package/dist/justFlipIt-combined.js

@@ -28,14 +28,16 @@ var JustFlipItModule = (() => {
   var css = `
 ._justFlipIt_panel{position:relative;display:grid;perspective:var(--jfi-perspective,1000px);isolation:isolate}
 ._justFlipIt_panel>[data-jfi-face]{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--jfi-duration) var(--jfi-easing),opacity var(--jfi-duration) var(--jfi-easing);transform-origin:center}
-._justFlipIt_panel>[data-jfi-face=front]{transform:rotateY(0deg)}
-._justFlipIt_panel>[data-jfi-face=back]{transform:rotateY(-180deg);pointer-events:none}
-._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateY(180deg);pointer-events:none}
-._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateY(0deg);pointer-events:auto}
-._justFlipIt_panel[data-jfi-axis=x]>[data-jfi-face=back]{transform:rotateX(-180deg)}
-._justFlipIt_panel[data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateX(180deg)}
-._justFlipIt_panel[data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateX(0deg)}
-._justFlipIt_panel[data-jfi-effect=fade]>[data-jfi-face],._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face]{transform:none}
+._justFlipIt_panel>[data-jfi-face=back],._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=front]{pointer-events:none}
+._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=back]{pointer-events:auto}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=front]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=back]{transform:rotateY(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateY(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=front]{transform:rotateX(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=back]{transform:rotateX(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateX(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateX(0deg)}
 ._justFlipIt_panel[data-jfi-effect=fade]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back]{opacity:0}
 ._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=front],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{opacity:0}
 ._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{opacity:1}
@@ -163,33 +165,63 @@ var JustFlipItModule = (() => {
       this.listen("pointerenter", (event) => {
         if (!this.settings.Click && this.settings.Tilt !== "only" && event.pointerType !== "touch") this.flip(true);
       });
-      this.listen("pointerleave", () => {
+      this.listen("pointerleave", (event) => {
+        if (event.pointerType === "touch") return;
         this.resetTilt();
         if (!this.settings.Click && this.settings.Tilt !== "only") this.flip(false);
       });
-      this.listen("pointercancel", () => this.resetTilt());
-      this.listen("pointerup", (event) => {
-        if (event.pointerType === "touch") {
-          this.resetTilt();
-          if (!this.settings.Click && this.settings.Tilt !== "only") this.toggle();
-        }
-      });
+      this.listen("pointerdown", (event) => {
+        if (event.pointerType !== "touch" || event.isPrimary === false || this.touch) return;
+        this.resetTilt();
+        this.touch = { id: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
+        this.queueTilt(event, this.touch);
+      }, { passive: true });
       this.listen("pointermove", (event) => {
-        if (!this.settings.Tilt || this.reduced || event.pointerType === "touch") return;
-        this.point = [event.clientX, event.clientY];
-        if (this.frame) return;
-        this.frame = this.win.requestAnimationFrame(() => {
-          this.frame = 0;
-          const rect = this.hoverPanel.getBoundingClientRect();
-          if (!rect.width || !rect.height) return;
-          const t = { max: 10, perspective: 1e3, scale: 1.03, ...typeof this.settings.Tilt === "object" ? this.settings.Tilt : {} };
-          const x = Math.max(-1, Math.min(1, (this.point[0] - rect.left) / rect.width * 2 - 1));
-          const y = Math.max(-1, Math.min(1, (this.point[1] - rect.top) / rect.height * 2 - 1));
-          this.hoverPanel.style.transform = `perspective(${t.perspective}px) rotateX(${-y * t.max}deg) rotateY(${x * t.max}deg) scale(${t.scale})`;
-        });
+        if (event.pointerType !== "touch") {
+          if (!this.touch) this.queueTilt(event);
+          return;
+        }
+        const touch = this.touch;
+        if (!touch || touch.id !== event.pointerId) return;
+        touch.moved || (touch.moved = this.touchMoved(event, touch));
+        this.queueTilt(event, touch);
       }, { passive: true });
+      this.listen("pointerup", (event) => {
+        const touch = this.finishTouch(event);
+        if (!touch || touch.moved || this.touchMoved(event, touch)) return;
+        if (!this.settings.Click && this.settings.Tilt !== "only") this.toggle();
+      });
+      this.listen("pointercancel", (event) => {
+        if (event.pointerType === "touch") this.finishTouch(event);
+        else this.resetTilt();
+      });
+      this.listen("lostpointercapture", (event) => this.finishTouch(event));
       this.baseTransform = this.hoverPanel.style.transform;
     }
+    touchMoved(event, touch) {
+      return Math.hypot(event.clientX - touch.x, event.clientY - touch.y) > 10;
+    }
+    finishTouch(event) {
+      const touch = this.touch;
+      if (event.pointerType !== "touch" || !touch || touch.id !== event.pointerId) return;
+      this.touch = null;
+      this.resetTilt();
+      return touch;
+    }
+    queueTilt(event, touch) {
+      if (!this.settings.Tilt || this.reduced) return;
+      this.point = [event.clientX, event.clientY];
+      if (this.frame) return;
+      this.frame = this.win.requestAnimationFrame(() => {
+        this.frame = 0;
+        const rect = touch ? touch.rect ?? (touch.rect = this.hoverPanel.getBoundingClientRect()) : this.hoverPanel.getBoundingClientRect();
+        if (!rect.width || !rect.height) return;
+        const { max = 10, perspective = 1e3, scale = 1.03 } = this.settings.Tilt;
+        const x = Math.max(-1, Math.min(1, (this.point[0] - rect.left) / rect.width * 2 - 1));
+        const y = Math.max(-1, Math.min(1, (this.point[1] - rect.top) / rect.height * 2 - 1));
+        this.hoverPanel.style.transform = `perspective(${perspective}px) rotateX(${-y * max}deg) rotateY(${x * max}deg) scale(${scale})`;
+      });
+    }
     resetTilt() {
       if (this.frame) this.win.cancelAnimationFrame(this.frame);
       this.frame = 0;

package/dist/justFlipIt-combined.min.js

@@ -1,14 +1,16 @@
-var JustFlipItModule=(()=>{var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var T=(i,t)=>{for(var e in t)p(i,e,{get:t[e],enumerable:!0})},w=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!b.call(i,s)&&s!==e&&p(i,s,{get:()=>t[s],enumerable:!(a=g(t,s))||a.enumerable});return i};var _=i=>w(p({},"__esModule",{value:!0}),i);var x={};T(x,{FlipController:()=>o,default:()=>c});var n=new WeakMap,k={Click:!1,FlipX:!1,Duration:400,Easing:"cubic-bezier(.22,.61,.36,1)",Tilt:!1,Effect:"flip",ReducedMotion:!0,preserveClasses:!0,preserveStyles:!0,Style:[]},E=`
+var JustFlipItModule=(()=>{var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(i,t)=>{for(var e in t)d(i,e,{get:t[e],enumerable:!0})},_=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of T(t))!v.call(i,s)&&s!==e&&d(i,s,{get:()=>t[s],enumerable:!(a=g(t,s))||a.enumerable});return i};var w=i=>_(d({},"__esModule",{value:!0}),i);var I={};b(I,{FlipController:()=>c,default:()=>h});var n=new WeakMap,k={Click:!1,FlipX:!1,Duration:400,Easing:"cubic-bezier(.22,.61,.36,1)",Tilt:!1,Effect:"flip",ReducedMotion:!0,preserveClasses:!0,preserveStyles:!0,Style:[]},F=`
 ._justFlipIt_panel{position:relative;display:grid;perspective:var(--jfi-perspective,1000px);isolation:isolate}
 ._justFlipIt_panel>[data-jfi-face]{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--jfi-duration) var(--jfi-easing),opacity var(--jfi-duration) var(--jfi-easing);transform-origin:center}
-._justFlipIt_panel>[data-jfi-face=front]{transform:rotateY(0deg)}
-._justFlipIt_panel>[data-jfi-face=back]{transform:rotateY(-180deg);pointer-events:none}
-._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateY(180deg);pointer-events:none}
-._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateY(0deg);pointer-events:auto}
-._justFlipIt_panel[data-jfi-axis=x]>[data-jfi-face=back]{transform:rotateX(-180deg)}
-._justFlipIt_panel[data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateX(180deg)}
-._justFlipIt_panel[data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateX(0deg)}
-._justFlipIt_panel[data-jfi-effect=fade]>[data-jfi-face],._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face]{transform:none}
+._justFlipIt_panel>[data-jfi-face=back],._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=front]{pointer-events:none}
+._justFlipIt_panel[data-jfi-flipped=true]>[data-jfi-face=back]{pointer-events:auto}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=front]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip]>[data-jfi-face=back]{transform:rotateY(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateY(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateY(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=front]{transform:rotateX(0deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x]>[data-jfi-face=back]{transform:rotateX(-180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=front]{transform:rotateX(180deg)}
+._justFlipIt_panel[data-jfi-effect=flip][data-jfi-axis=x][data-jfi-flipped=true]>[data-jfi-face=back]{transform:rotateX(0deg)}
 ._justFlipIt_panel[data-jfi-effect=fade]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale]>[data-jfi-face=back]{opacity:0}
 ._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=front],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=front]{opacity:0}
 ._justFlipIt_panel[data-jfi-effect=fade][data-jfi-flipped=true]>[data-jfi-face=back],._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{opacity:1}
@@ -16,6 +18,6 @@ var JustFlipItModule=(()=>{var p=Object.defineProperty;var g=Object.getOwnProper
 ._justFlipIt_panel[data-jfi-effect=scale][data-jfi-flipped=true]>[data-jfi-face=back]{transform:scale(1)}
 ._justFlipIt_panel[data-jfi-reduced=true]>[data-jfi-face]{transition:none!important}
 @media(prefers-reduced-motion:reduce){._justFlipIt_panel:not([data-jfi-motion=allow])>[data-jfi-face]{transition:none!important}}
-`;function F(i){if(i.querySelector('style[data-justflipitstyle="v4"]'))return;let t=i.createElement("style");t.dataset.justflipitstyle="v4",t.textContent=E,i.head.append(t)}function u(i){if(i.Duration!==void 0&&(!Number.isFinite(i.Duration)||i.Duration<0))throw new TypeError("Duration must be a non-negative finite number");if(i.Effect!==void 0&&!["flip","fade","scale"].includes(i.Effect))throw new TypeError("Unknown Effect");if(i.Tilt&&typeof i.Tilt=="object"){for(let t of["max","perspective","scale"])if(i.Tilt[t]!==void 0&&(!Number.isFinite(i.Tilt[t])||i.Tilt[t]<0))throw new TypeError(`Invalid Tilt.${t}`)}}var o=class{constructor(t,e={}){if(u(e),!t||t.nodeType!==1)throw new TypeError("Expected an HTML element");this.element=t,this.settings={...k,...e},this.flipped=!1,this.destroyed=!1,this.cleanups=[],this.restores=[],this.win=t.ownerDocument.defaultView;let a=t.ownerDocument;if(F(a),this.managed=!!e.Faces,this.managed){if(this.hoverPanel=t,this.frontWrapper=t.querySelector(e.Faces.front),this.backWrapper=t.querySelector(e.Faces.back),!this.frontWrapper||!this.backWrapper||this.frontWrapper===this.backWrapper||this.frontWrapper.parentNode!==t||this.backWrapper.parentNode!==t)throw new TypeError("Faces must select two distinct direct children")}else{if(!t.parentNode)throw new TypeError("Element must have a parent");if(this.hoverPanel=a.createElement("div"),this.frontWrapper=a.createElement("div"),this.backWrapper=a.createElement("div"),this.settings.preserveClasses&&(this.hoverPanel.className=t.className),this.settings.preserveStyles&&(this.hoverPanel.style.cssText=t.style.cssText),t.before(this.hoverPanel),this.hoverPanel.append(this.frontWrapper,this.backWrapper),this.frontWrapper.append(t),e.Template!==void 0)this.backWrapper.innerHTML=e.Template;else{let r=t.cloneNode(!0);r.removeAttribute("id"),r.querySelectorAll("[id]").forEach(d=>d.removeAttribute("id")),this.backWrapper.append(r)}}let s=this.hoverPanel;for(let r of[s,this.frontWrapper,this.backWrapper]){let m=(r===s?["class","style","tabindex","data-jfi-axis","data-jfi-effect","data-jfi-motion","data-jfi-flipped","data-jfi-reduced"]:["style","data-jfi-face","aria-hidden","inert"]).map(l=>[l,r.getAttribute(l)]),y=r.inert||!1;this.restores.push(()=>{r.inert=y;for(let[l,h]of m)h===null?r.removeAttribute(l):r.setAttribute(l,h)})}s.classList.add("_justFlipIt_panel"),this.frontWrapper.dataset.jfiFace="front",this.backWrapper.dataset.jfiFace="back",this.motion=this.win.matchMedia?.("(prefers-reduced-motion: reduce)");let f=()=>{this.resetTilt(),this.render()};this.motion?.addEventListener("change",f),this.cleanups.push(()=>this.motion?.removeEventListener("change",f)),this.configure(),this.events(),this.render(),n.set(t,this),n.set(s,this)}listen(t,e,a){this.hoverPanel.addEventListener(t,e,a),this.cleanups.push(()=>this.hoverPanel.removeEventListener(t,e,a))}get reduced(){return this.settings.ReducedMotion!==!1&&!!this.motion?.matches}configure(){let t=this.settings,e=this.hoverPanel;e.style.setProperty("--jfi-duration",`${t.Duration}ms`),e.style.setProperty("--jfi-easing",t.Easing),e.dataset.jfiAxis=t.FlipX?"x":"y",e.dataset.jfiEffect=t.Effect,e.dataset.jfiMotion=t.ReducedMotion===!1?"allow":"respect";for(let a of t.Style||[])(a.el==="self"?[e]:e.querySelectorAll(a.el)).forEach(f=>Object.assign(f.style,a.style));t.Tilt!=="only"&&!e.hasAttribute("tabindex")&&(e.tabIndex=0)}events(){this.listen("click",t=>{if(this.settings.Tilt==="only")return;let e=this.settings.Click;(e===!0||e&&[].concat(e).some(a=>t.target.closest?.(a)&&this.hoverPanel.contains(t.target.closest(a))))&&this.toggle()}),this.listen("keydown",t=>{t.target!==this.hoverPanel||this.settings.Tilt==="only"||((t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.toggle()),t.key==="Escape"&&this.flip(!1))}),this.listen("pointerenter",t=>{!this.settings.Click&&this.settings.Tilt!=="only"&&t.pointerType!=="touch"&&this.flip(!0)}),this.listen("pointerleave",()=>{this.resetTilt(),!this.settings.Click&&this.settings.Tilt!=="only"&&this.flip(!1)}),this.listen("pointercancel",()=>this.resetTilt()),this.listen("pointerup",t=>{t.pointerType==="touch"&&(this.resetTilt(),!this.settings.Click&&this.settings.Tilt!=="only"&&this.toggle())}),this.listen("pointermove",t=>{!this.settings.Tilt||this.reduced||t.pointerType==="touch"||(this.point=[t.clientX,t.clientY],!this.frame&&(this.frame=this.win.requestAnimationFrame(()=>{this.frame=0;let e=this.hoverPanel.getBoundingClientRect();if(!e.width||!e.height)return;let a={max:10,perspective:1e3,scale:1.03,...typeof this.settings.Tilt=="object"?this.settings.Tilt:{}},s=Math.max(-1,Math.min(1,(this.point[0]-e.left)/e.width*2-1)),f=Math.max(-1,Math.min(1,(this.point[1]-e.top)/e.height*2-1));this.hoverPanel.style.transform=`perspective(${a.perspective}px) rotateX(${-f*a.max}deg) rotateY(${s*a.max}deg) scale(${a.scale})`})))},{passive:!0}),this.baseTransform=this.hoverPanel.style.transform}resetTilt(){this.frame&&this.win.cancelAnimationFrame(this.frame),this.frame=0,this.hoverPanel.style.transform=this.baseTransform||""}render(){this.hoverPanel.dataset.jfiFlipped=String(this.flipped),this.hoverPanel.dataset.jfiReduced=String(this.reduced);for(let[t,e]of[[this.frontWrapper,this.flipped],[this.backWrapper,!this.flipped]])t.setAttribute("aria-hidden",String(e)),t.inert=e}flip(t=!0){if(this.destroyed||this.flipped===!!t)return this;let e=this.element.ownerDocument.activeElement;return(t?this.frontWrapper:this.backWrapper).contains(e)&&this.hoverPanel.focus({preventScroll:!0}),this.flipped=!!t,this.render(),this.hoverPanel.dispatchEvent(new this.win.CustomEvent("justflipit:change",{bubbles:!0,detail:this.getState()})),this}toggle(){return this.flip(!this.flipped)}update(t={}){if(this.destroyed)return this;if("Faces"in t)throw new TypeError("Faces cannot change after initialization");if(u(t),this.managed&&"Template"in t)throw new TypeError("Render framework face content with the framework");if(this.settings={...this.settings,...t},"Template"in t){if(this.managed)throw new TypeError("Render framework face content with the framework");this.backWrapper.innerHTML=t.Template}return this.resetTilt(),this.configure(),this.render(),this}getState(){return{flipped:this.flipped,destroyed:this.destroyed,effect:this.settings.Effect}}destroy(){this.destroyed||(this.resetTilt(),this.cleanups.forEach(t=>t()),this.restores.forEach(t=>t()),this.managed||this.hoverPanel.replaceWith(this.element),n.delete(this.element),n.delete(this.hoverPanel),this.destroyed=!0)}};function j(i){return typeof i=="string"?typeof document>"u"?[]:Array.from(document.querySelectorAll(i)):i?.nodeType===1?[i]:i?Array.from(i):[]}function c(i,t){let e=j(i).map(a=>n.get(a)||new o(a,t));return i?.nodeType===1?e[0]:e}c.destroy=i=>j(i).forEach(t=>n.get(t)?.destroy());c.get=i=>n.get(i);return _(x);})();
+`;function E(i){if(i.querySelector('style[data-justflipitstyle="v4"]'))return;let t=i.createElement("style");t.dataset.justflipitstyle="v4",t.textContent=F,i.head.append(t)}function j(i){if(i.Duration!==void 0&&(!Number.isFinite(i.Duration)||i.Duration<0))throw new TypeError("Duration must be a non-negative finite number");if(i.Effect!==void 0&&!["flip","fade","scale"].includes(i.Effect))throw new TypeError("Unknown Effect");if(i.Tilt&&typeof i.Tilt=="object"){for(let t of["max","perspective","scale"])if(i.Tilt[t]!==void 0&&(!Number.isFinite(i.Tilt[t])||i.Tilt[t]<0))throw new TypeError(`Invalid Tilt.${t}`)}}var c=class{constructor(t,e={}){if(j(e),!t||t.nodeType!==1)throw new TypeError("Expected an HTML element");this.element=t,this.settings={...k,...e},this.flipped=!1,this.destroyed=!1,this.cleanups=[],this.restores=[],this.win=t.ownerDocument.defaultView;let a=t.ownerDocument;if(E(a),this.managed=!!e.Faces,this.managed){if(this.hoverPanel=t,this.frontWrapper=t.querySelector(e.Faces.front),this.backWrapper=t.querySelector(e.Faces.back),!this.frontWrapper||!this.backWrapper||this.frontWrapper===this.backWrapper||this.frontWrapper.parentNode!==t||this.backWrapper.parentNode!==t)throw new TypeError("Faces must select two distinct direct children")}else{if(!t.parentNode)throw new TypeError("Element must have a parent");if(this.hoverPanel=a.createElement("div"),this.frontWrapper=a.createElement("div"),this.backWrapper=a.createElement("div"),this.settings.preserveClasses&&(this.hoverPanel.className=t.className),this.settings.preserveStyles&&(this.hoverPanel.style.cssText=t.style.cssText),t.before(this.hoverPanel),this.hoverPanel.append(this.frontWrapper,this.backWrapper),this.frontWrapper.append(t),e.Template!==void 0)this.backWrapper.innerHTML=e.Template;else{let r=t.cloneNode(!0);r.removeAttribute("id"),r.querySelectorAll("[id]").forEach(l=>l.removeAttribute("id")),this.backWrapper.append(r)}}let s=this.hoverPanel;for(let r of[s,this.frontWrapper,this.backWrapper]){let p=(r===s?["class","style","tabindex","data-jfi-axis","data-jfi-effect","data-jfi-motion","data-jfi-flipped","data-jfi-reduced"]:["style","data-jfi-face","aria-hidden","inert"]).map(o=>[o,r.getAttribute(o)]),y=r.inert||!1;this.restores.push(()=>{r.inert=y;for(let[o,u]of p)u===null?r.removeAttribute(o):r.setAttribute(o,u)})}s.classList.add("_justFlipIt_panel"),this.frontWrapper.dataset.jfiFace="front",this.backWrapper.dataset.jfiFace="back",this.motion=this.win.matchMedia?.("(prefers-reduced-motion: reduce)");let f=()=>{this.resetTilt(),this.render()};this.motion?.addEventListener("change",f),this.cleanups.push(()=>this.motion?.removeEventListener("change",f)),this.configure(),this.events(),this.render(),n.set(t,this),n.set(s,this)}listen(t,e,a){this.hoverPanel.addEventListener(t,e,a),this.cleanups.push(()=>this.hoverPanel.removeEventListener(t,e,a))}get reduced(){return this.settings.ReducedMotion!==!1&&!!this.motion?.matches}configure(){let t=this.settings,e=this.hoverPanel;e.style.setProperty("--jfi-duration",`${t.Duration}ms`),e.style.setProperty("--jfi-easing",t.Easing),e.dataset.jfiAxis=t.FlipX?"x":"y",e.dataset.jfiEffect=t.Effect,e.dataset.jfiMotion=t.ReducedMotion===!1?"allow":"respect";for(let a of t.Style||[])(a.el==="self"?[e]:e.querySelectorAll(a.el)).forEach(f=>Object.assign(f.style,a.style));t.Tilt!=="only"&&!e.hasAttribute("tabindex")&&(e.tabIndex=0)}events(){this.listen("click",t=>{if(this.settings.Tilt==="only")return;let e=this.settings.Click;(e===!0||e&&[].concat(e).some(a=>t.target.closest?.(a)&&this.hoverPanel.contains(t.target.closest(a))))&&this.toggle()}),this.listen("keydown",t=>{t.target!==this.hoverPanel||this.settings.Tilt==="only"||((t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.toggle()),t.key==="Escape"&&this.flip(!1))}),this.listen("pointerenter",t=>{!this.settings.Click&&this.settings.Tilt!=="only"&&t.pointerType!=="touch"&&this.flip(!0)}),this.listen("pointerleave",t=>{t.pointerType!=="touch"&&(this.resetTilt(),!this.settings.Click&&this.settings.Tilt!=="only"&&this.flip(!1))}),this.listen("pointerdown",t=>{t.pointerType!=="touch"||t.isPrimary===!1||this.touch||(this.resetTilt(),this.touch={id:t.pointerId,x:t.clientX,y:t.clientY,moved:!1},this.queueTilt(t,this.touch))},{passive:!0}),this.listen("pointermove",t=>{if(t.pointerType!=="touch"){this.touch||this.queueTilt(t);return}let e=this.touch;!e||e.id!==t.pointerId||(e.moved||(e.moved=this.touchMoved(t,e)),this.queueTilt(t,e))},{passive:!0}),this.listen("pointerup",t=>{let e=this.finishTouch(t);!e||e.moved||this.touchMoved(t,e)||!this.settings.Click&&this.settings.Tilt!=="only"&&this.toggle()}),this.listen("pointercancel",t=>{t.pointerType==="touch"?this.finishTouch(t):this.resetTilt()}),this.listen("lostpointercapture",t=>this.finishTouch(t)),this.baseTransform=this.hoverPanel.style.transform}touchMoved(t,e){return Math.hypot(t.clientX-e.x,t.clientY-e.y)>10}finishTouch(t){let e=this.touch;if(!(t.pointerType!=="touch"||!e||e.id!==t.pointerId))return this.touch=null,this.resetTilt(),e}queueTilt(t,e){!this.settings.Tilt||this.reduced||(this.point=[t.clientX,t.clientY],!this.frame&&(this.frame=this.win.requestAnimationFrame(()=>{this.frame=0;let a=e?e.rect??(e.rect=this.hoverPanel.getBoundingClientRect()):this.hoverPanel.getBoundingClientRect();if(!a.width||!a.height)return;let{max:s=10,perspective:f=1e3,scale:r=1.03}=this.settings.Tilt,l=Math.max(-1,Math.min(1,(this.point[0]-a.left)/a.width*2-1)),p=Math.max(-1,Math.min(1,(this.point[1]-a.top)/a.height*2-1));this.hoverPanel.style.transform=`perspective(${f}px) rotateX(${-p*s}deg) rotateY(${l*s}deg) scale(${r})`})))}resetTilt(){this.frame&&this.win.cancelAnimationFrame(this.frame),this.frame=0,this.hoverPanel.style.transform=this.baseTransform||""}render(){this.hoverPanel.dataset.jfiFlipped=String(this.flipped),this.hoverPanel.dataset.jfiReduced=String(this.reduced);for(let[t,e]of[[this.frontWrapper,this.flipped],[this.backWrapper,!this.flipped]])t.setAttribute("aria-hidden",String(e)),t.inert=e}flip(t=!0){if(this.destroyed||this.flipped===!!t)return this;let e=this.element.ownerDocument.activeElement;return(t?this.frontWrapper:this.backWrapper).contains(e)&&this.hoverPanel.focus({preventScroll:!0}),this.flipped=!!t,this.render(),this.hoverPanel.dispatchEvent(new this.win.CustomEvent("justflipit:change",{bubbles:!0,detail:this.getState()})),this}toggle(){return this.flip(!this.flipped)}update(t={}){if(this.destroyed)return this;if("Faces"in t)throw new TypeError("Faces cannot change after initialization");if(j(t),this.managed&&"Template"in t)throw new TypeError("Render framework face content with the framework");if(this.settings={...this.settings,...t},"Template"in t){if(this.managed)throw new TypeError("Render framework face content with the framework");this.backWrapper.innerHTML=t.Template}return this.resetTilt(),this.configure(),this.render(),this}getState(){return{flipped:this.flipped,destroyed:this.destroyed,effect:this.settings.Effect}}destroy(){this.destroyed||(this.resetTilt(),this.cleanups.forEach(t=>t()),this.restores.forEach(t=>t()),this.managed||this.hoverPanel.replaceWith(this.element),n.delete(this.element),n.delete(this.hoverPanel),this.destroyed=!0)}};function m(i){return typeof i=="string"?typeof document>"u"?[]:Array.from(document.querySelectorAll(i)):i?.nodeType===1?[i]:i?Array.from(i):[]}function h(i,t){let e=m(i).map(a=>n.get(a)||new c(a,t));return i?.nodeType===1?e[0]:e}h.destroy=i=>m(i).forEach(t=>n.get(t)?.destroy());h.get=i=>n.get(i);return w(I);})();
 globalThis.justFlipIt = JustFlipItModule.default;
 //# sourceMappingURL=justFlipIt.min.js.map