yet-another-react-lightbox-lite 1.10.0 → 1.11.1

package/README.md

@@ -2,7 +2,7 @@
 
 Lightweight React lightbox component. This is a trimmed-down version of the
 [yet-another-react-lightbox](https://github.com/igordanchenko/yet-another-react-lightbox)
-that provides essential lightbox features and slick UX with just 4.6KB bundle
+that provides essential lightbox features and slick UX with around 5KB bundle
 size.
 
 ## Overview
@@ -12,7 +12,7 @@ size.
 [![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox-lite.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox-lite/blob/main/LICENSE)
 
 - **Built for React:** works with React 18+
-- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
+- **UX:** supports keyboard, mouse, touchpad, and touchscreen navigation
 - **Zoom:** zoom is supported out of the box
 - **Performance:** preloads a fixed number of images without compromising
   performance or UX
@@ -20,7 +20,7 @@ size.
   supported out of the box
 - **Customization:** customize any UI element or add your own custom slides
 - **No bloat:** supports only essential lightbox features
-- **TypeScript:** type definitions come built-in in the package
+- **TypeScript:** type definitions come built-in with the package
 
 ![Yet Another React Lightbox Lite | Example](https://images.yet-another-react-lightbox.com/example-lite.jpg)
 
@@ -91,6 +91,8 @@ To utilize responsive images with automatic resolution switching, provide
   slides={[
     {
       src: "/image1x3840.jpg",
+      width: 3840,
+      height: 2560,
       srcSet: [
         { src: "/image1x320.jpg", width: 320, height: 213 },
         { src: "/image1x640.jpg", width: 640, height: 427 },
@@ -112,7 +114,15 @@ advantage of the
 [next/image](https://nextjs.org/docs/pages/api-reference/components/image)
 component. The `next/image` component provides a more efficient way to handle
 images in your Next.js project. You can replace the standard `<img>` element
-with `next/image` with the following `render.slide` render function.
+with `next/image` using the following `render.slide` render function.
+
+```tsx
+declare module "yet-another-react-lightbox-lite" {
+  interface SlideImage {
+    blurDataURL?: string;
+  }
+}
+```
 
 ```tsx
 <Lightbox
@@ -140,7 +150,7 @@ with `next/image` with the following `render.slide` render function.
           height={height}
           loading="eager"
           draggable={false}
-          blurDataURL={(slide as any).blurDataURL}
+          blurDataURL={slide.blurDataURL}
           style={{
             minWidth: 0,
             minHeight: 0,
@@ -158,7 +168,7 @@ with `next/image` with the following `render.slide` render function.
 
 ## API
 
-Yet Another React Lightbox Lite comes with CSS stylesheet that needs to be
+Yet Another React Lightbox Lite comes with a CSS stylesheet that needs to be
 imported in your app.
 
 ```tsx
@@ -179,6 +189,10 @@ Image slide props:
 
 - `src` - image source (required)
 - `alt` - image `alt` attribute
+- `width` - image width in pixels
+- `height` - image height in pixels
+- `srcSet` - alternative images for responsive resolution switching (see
+  [Responsive Images](#responsive-images))
 
 ### index
 
@@ -194,7 +208,7 @@ A callback to update current slide index state. This prop is required.
 
 ### labels
 
-Type: `keyof Labels`
+Type: `object`
 
 Custom UI labels / translations.
 
@@ -215,7 +229,8 @@ Type: `object`
 
 Toolbar settings.
 
-- `buttons` - custom toolbar buttons (type: `ReactNode[]`)
+- `buttons` - custom toolbar buttons (type: `ReactNode[]`). Each button should
+  have a unique `key` attribute.
 - `fixed` - if `true`, the toolbar is positioned statically above the carousel
 
 Usage example:
@@ -226,13 +241,14 @@ Usage example:
     fixed: true,
     buttons: [
       <button
+        key="custom-button"
         type="button"
         className="yarll__button"
         onClick={() => {
           // ...
         }}
       >
-        <ButtonIcon />
+        Download
       </button>,
     ],
   }}
@@ -247,7 +263,8 @@ Type: `object`
 Carousel settings.
 
 - `preload` - the lightbox preloads `(2 * preload + 1)` slides (default: `2`)
-- `imageProps` - custom image slide attributes
+- `imageProps` - custom image slide attributes (an object or a function
+  receiving the current slide and returning an object)
 
 Usage example:
 
@@ -261,6 +278,17 @@ Usage example:
 />
 ```
 
+You can also use a function to provide per-slide attributes:
+
+```tsx
+<Lightbox
+  carousel={{
+    imageProps: (slide) => ({ "data-alt": slide.alt }),
+  }}
+  // ...
+/>
+```
+
 ### controller
 
 Type: `object`
@@ -337,7 +365,7 @@ rendered right under the slide. Alternatively, you can use
 `position: "absolute"` to position the extra elements relative to the slide.
 
 For example, you can use the `slideFooter` render function to add slides
-descriptions.
+descriptions (see [Custom Slide Attributes](#custom-slide-attributes)).
 
 ```tsx
 <Lightbox
@@ -355,11 +383,24 @@ descriptions.
 Render custom controls or additional elements in the lightbox (use absolute
 positioning).
 
-For example, you can use the `render.controls` render function to implement
+For example, you can use the `render.controls` render function to implement a
 slides counter.
 
 ```tsx
+const slides = [
+  { src: "/image1.jpg" },
+  { src: "/image2.jpg" },
+  { src: "/image3.jpg" },
+];
+
+const [index, setIndex] = useState<number>();
+
+// ...
+
 <Lightbox
+  slides={slides}
+  index={index}
+  setIndex={setIndex}
   render={{
     controls: () =>
       index !== undefined && (
@@ -368,8 +409,7 @@ slides counter.
         </div>
       ),
   }}
-  // ...
-/>
+/>;
 ```
 
 #### iconPrev: () => ReactNode
@@ -386,7 +426,7 @@ Render custom `Close` icon.
 
 ### styles
 
-Type: `{ [key in Slot]?: SlotCSSProperties }`
+Type: `object`
 
 Customization slots styles allow you to specify custom CSS styles or override
 `--yarll__*` CSS variables by passing your custom styles through to the
@@ -441,6 +481,8 @@ Usage example:
 ## Custom Slide Attributes
 
 You can add custom slide attributes with the following module augmentation.
+Augmenting `GenericSlide` extends all slide types, including custom ones. To
+extend only image slides, augment `SlideImage` instead.
 
 ```tsx
 declare module "yet-another-react-lightbox-lite" {
@@ -450,12 +492,20 @@ declare module "yet-another-react-lightbox-lite" {
 }
 ```
 
+```tsx
+declare module "yet-another-react-lightbox-lite" {
+  interface SlideImage {
+    blurDataURL?: string;
+  }
+}
+```
+
 ## Custom Slides
 
 You can add custom slide types through module augmentation and render them with
-the `render.slide` render function.
+the `render.slide` function.
 
-Here is an example demonstrating video slides implementation.
+Here is an example demonstrating video slide support.
 
 ```tsx
 declare module "yet-another-react-lightbox-lite" {
@@ -565,16 +615,16 @@ layout shift of some fixed-positioned page elements when the lightbox opens. To
 address this, you can assign the `yarll__fixed` CSS class to your
 fixed-positioned elements to keep them in place. Please note that the
 fixed-positioned element container should not have its own border or padding
-styles. If that's the case, you can always add an extra wrapper that just
-defines the fixed position without visual styles.
+styles. If it does, you can always add an extra wrapper that just defines the
+fixed position without visual styles.
 
 ## Text Selection
 
 The lightbox is rendered with the `user-select: none` CSS style. If you'd like
 to make some of your custom elements user-selectable, use the
 `yarll__selectable` CSS class. This class sets the `user-select: text` style and
-turns off click-and-drag slide navigation, likely interfering with text
-selection UX.
+turns off click-and-drag slide navigation, which would likely interfere with
+text selection UX.
 
 ## Hooks
 
@@ -600,6 +650,42 @@ The hook provides an object with the following props:
 - `changeZoom` - change zoom level
 - `changeOffsets` - change position offsets
 
+Usage example:
+
+```tsx
+function ZoomControls() {
+  const { zoom, maxZoom, changeZoom } = useZoom();
+
+  return (
+    <div style={{ position: "absolute", bottom: 16, left: 16 }}>
+      <button
+        type="button"
+        disabled={zoom >= maxZoom}
+        onClick={() => changeZoom(zoom * 2)}
+      >
+        Zoom In
+      </button>
+      <button
+        type="button"
+        disabled={zoom <= 1}
+        onClick={() => changeZoom(zoom / 2)}
+      >
+        Zoom Out
+      </button>
+    </div>
+  );
+}
+```
+
+```tsx
+<Lightbox
+  render={{
+    controls: () => <ZoomControls />,
+  }}
+  // ...
+/>
+```
+
 ## License
 
 MIT © 2024 [Igor Danchenko](https://github.com/igordanchenko)

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { Key, Dispatch, SetStateAction, ReactNode, ComponentProps, CSSProperties, MouseEvent } from 'react';
+import { ComponentProps, Key, Dispatch, SetStateAction, ReactNode, CSSProperties, MouseEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** Lightbox props */
 interface LightboxProps {
     /** slides to display in the lightbox */
-    slides: Slide[];
+    slides: readonly Slide[];
     /** slide index */
     index: number | undefined;
     /** slide index change callback */
@@ -55,7 +55,7 @@ interface SlideImage extends GenericSlide {
     /** image 'alt' attribute */
     alt?: string;
     /** alternative images to be passed to the 'srcSet' */
-    srcSet?: ImageSource[];
+    srcSet?: readonly ImageSource[];
 }
 /** Image source */
 interface ImageSource {
@@ -126,7 +126,7 @@ interface RenderSlideProps {
 /** Toolbar settings */
 interface ToolbarSettings {
     /** custom toolbar buttons */
-    buttons?: ReactNode[];
+    buttons?: readonly ReactNode[];
     /** if `true`, the toolbar is positioned statically above the carousel */
     fixed?: boolean;
 }
@@ -135,7 +135,7 @@ interface CarouselSettings {
     /** the lightbox preloads (2 * preload + 1) slides */
     preload?: number;
     /** custom image slide attributes */
-    imageProps?: ComponentProps<"img">;
+    imageProps?: ComponentProps<"img"> | ((slide: SlideImage) => ComponentProps<"img">);
 }
 /** Controller settings */
 interface ControllerSettings {
@@ -151,7 +151,7 @@ interface ZoomSettings {
     /** disable zoom on image slides */
     disabled?: boolean;
     /** zoom-enabled custom slide types */
-    supports?: SlideTypeKey[];
+    supports?: readonly SlideTypeKey[];
 }
 /** Customization slots */
 interface SlotType {

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo, cloneElement, isValidElement } from 'react';
+import { useContext, createContext, useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 
 const cssPrefix = "yarll__";
@@ -10,7 +10,7 @@ function cssVar(name) {
     return `--${cssPrefix}${name}`;
 }
 function clsx(...classes) {
-    return [...classes].filter(Boolean).join(" ");
+    return classes.filter(Boolean).join(" ");
 }
 function transition(callback) {
     if (document.startViewTransition) {
@@ -49,7 +49,7 @@ function isImageSlide(slide) {
     return (slide.type === undefined || slide.type === "image") && typeof slide.src === "string";
 }
 function getChildren(element) {
-    return element?.children || [];
+    return Array.from(element?.children || []);
 }
 
 const LightboxContext = createContext(null);
@@ -71,7 +71,8 @@ function getImageDimensions(slide, rect) {
 }
 function ImageSlide({ slide, rect, zoom }) {
     const [scale, setScale] = useState(1);
-    const { carousel: { imageProps } = {}, styles } = useLightboxContext();
+    const { carousel: { imageProps: imagePropsParam } = {}, styles } = useLightboxContext();
+    const imageProps = typeof imagePropsParam === "function" ? imagePropsParam(slide) : imagePropsParam;
     useEffect(() => {
         if (zoom <= scale)
             return;
@@ -83,7 +84,8 @@ function ImageSlide({ slide, rect, zoom }) {
         };
     }, [zoom, scale]);
     const srcSet = slide.srcSet
-        ?.sort((a, b) => a.width - b.width)
+        ?.slice()
+        .sort((a, b) => a.width - b.width)
         .map((image) => `${image.src} ${image.width}w`)
         .join(", ");
     const [width, height] = getImageDimensions(slide, rect);
@@ -91,6 +93,14 @@ function ImageSlide({ slide, rect, zoom }) {
     return (jsx("img", { draggable: false, style: styles?.image, className: cssClass("slide_image"), srcSet: srcSet, sizes: sizes, width: width, height: height, src: slide.src, alt: slide.alt ?? "", ...imageProps }));
 }
 
+function useEventCallback(fn) {
+    const ref = useRef(fn);
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => ref.current(...args), []);
+}
+
 const ZoomContext = createContext(null);
 const useZoom = makeUseContext(ZoomContext);
 const ZoomInternalContext = createContext(null);
@@ -102,6 +112,8 @@ function Zoom({ children }) {
     const [rect, setRect] = useState();
     const observer = useRef(undefined);
     const carouselRef = useRef(null);
+    const carouselRectRef = useRef(undefined);
+    const slideDimensionsRef = useRef([0, 0]);
     const { index, slides, zoom: { supports, disabled } = {} } = useLightboxContext();
     const [prevIndex, setPrevIndex] = useState(index);
     if (index !== prevIndex) {
@@ -111,53 +123,61 @@ function Zoom({ children }) {
         setPrevIndex(index);
     }
     const slide = slides[index];
-    const maxZoom = (isImageSlide(slide) && !disabled) || (supports || []).includes(slide.type)
+    const maxZoom = slide && ((isImageSlide(slide) && !disabled) || (slide.type !== undefined && supports?.includes(slide.type)))
         ? 8
         : 1;
+    const carouselHalfWidth = (rect?.width || 0) / 2;
+    const carouselHalfHeight = (rect?.height || 0) / 2;
+    const clampOffsets = useEventCallback((x = offsetX, y = offsetY, currentZoom = zoom) => {
+        const [slideHalfWidth, slideHalfHeight] = slideDimensionsRef.current;
+        const maxOffsetX = Math.max(slideHalfWidth * currentZoom - carouselHalfWidth, 0);
+        const maxOffsetY = Math.max(slideHalfHeight * currentZoom - carouselHalfHeight, 0);
+        setOffsetX(Math.min(maxOffsetX, Math.max(-maxOffsetX, x)));
+        setOffsetY(Math.min(maxOffsetY, Math.max(-maxOffsetY, y)));
+    });
     useLayoutEffect(() => {
-        const carouselHalfWidth = (rect?.width || 0) / 2;
-        const carouselHalfHeight = (rect?.height || 0) / 2;
-        const [slideHalfWidth, slideHalfHeight] = Array.from(getChildren(Array.from(getChildren(carouselRef.current)).find((node) => node instanceof HTMLElement && !node.hidden)))
+        slideDimensionsRef.current = getChildren(getChildren(carouselRef.current).find((node) => node instanceof HTMLElement && !node.hidden))
             .filter((node) => node instanceof HTMLElement)
             .map((node) => [
             Math.max(carouselHalfWidth - node.offsetLeft, node.offsetLeft + node.offsetWidth - carouselHalfWidth),
             Math.max(carouselHalfHeight - node.offsetTop, node.offsetTop + node.offsetHeight - carouselHalfHeight),
         ])
             .reduce(([maxWidth, maxHeight], [width, height]) => [Math.max(width, maxWidth), Math.max(height, maxHeight)], [0, 0]);
-        const maxOffsetX = Math.max(slideHalfWidth * zoom - carouselHalfWidth, 0);
-        const maxOffsetY = Math.max(slideHalfHeight * zoom - carouselHalfHeight, 0);
-        setOffsetX(Math.min(maxOffsetX, Math.max(-maxOffsetX, offsetX)));
-        setOffsetY(Math.min(maxOffsetY, Math.max(-maxOffsetY, offsetY)));
-    }, [zoom, rect, offsetX, offsetY]);
+        clampOffsets();
+    }, [carouselHalfWidth, carouselHalfHeight, index, clampOffsets]);
     const setCarouselRef = useCallback((node) => {
         carouselRef.current = node;
         observer.current?.disconnect();
         observer.current = undefined;
-        const updateRect = () => setRect(node ? { width: node.clientWidth, height: node.clientHeight } : undefined);
+        const updateRect = () => {
+            carouselRectRef.current = node?.getBoundingClientRect();
+            setRect(node ? { width: node.clientWidth, height: node.clientHeight } : undefined);
+        };
+        updateRect();
         if (node && typeof ResizeObserver !== "undefined") {
             observer.current = new ResizeObserver(updateRect);
             observer.current.observe(node);
         }
-        else {
-            updateRect();
-        }
     }, []);
-    const changeOffsets = useCallback((dx, dy) => {
-        setOffsetX(offsetX + dx);
-        setOffsetY(offsetY + dy);
-    }, [offsetX, offsetY]);
-    const changeZoom = useCallback((targetZoom, event) => {
+    const changeOffsets = useEventCallback((dx, dy) => {
+        clampOffsets(offsetX + dx, offsetY + dy, zoom);
+    });
+    const changeZoom = useEventCallback((targetZoom, event) => {
         const newZoom = Math.min(Math.max(targetZoom, 1), maxZoom);
         setZoom(newZoom);
-        if (event && carouselRef.current) {
+        let newOffsetX = offsetX;
+        let newOffsetY = offsetY;
+        if (event && carouselRectRef.current) {
             const { clientX, clientY } = event;
-            const { left, top, width, height } = carouselRef.current.getBoundingClientRect();
+            const { left, top, width, height } = carouselRectRef.current;
             const zoomDelta = newZoom / zoom - 1;
-            changeOffsets((left + width / 2 + offsetX - clientX) * zoomDelta, (top + height / 2 + offsetY - clientY) * zoomDelta);
+            newOffsetX += (left + width / 2 + offsetX - clientX) * zoomDelta;
+            newOffsetY += (top + height / 2 + offsetY - clientY) * zoomDelta;
         }
-    }, [zoom, maxZoom, offsetX, offsetY, changeOffsets]);
+        clampOffsets(newOffsetX, newOffsetY, newZoom);
+    });
     const context = useMemo(() => ({ rect, zoom, maxZoom, offsetX, offsetY, changeZoom, changeOffsets }), [rect, zoom, maxZoom, offsetX, offsetY, changeZoom, changeOffsets]);
-    const internalContext = useMemo(() => ({ carouselRef, setCarouselRef }), [setCarouselRef]);
+    const internalContext = useMemo(() => ({ setCarouselRef }), [setCarouselRef]);
     return (jsx(ZoomContext.Provider, { value: context, children: jsx(ZoomInternalContext.Provider, { value: internalContext, children: children }) }));
 }
 
@@ -186,10 +206,10 @@ function Carousel() {
     return (jsx("div", { ref: setCarouselRef, style: styles?.carousel, className: cssClass("carousel"), role: "region", "aria-live": "polite", "aria-label": translateLabel(labels, "Photo gallery"), "aria-roledescription": translateLabel(labels, "Carousel"), children: rect &&
             Array.from({ length: 2 * preload + 1 }).map((_, i) => {
                 const slideIndex = index - preload + i;
-                if (slideIndex < 0 || slideIndex >= slides.length)
-                    return null;
                 const slide = slides[slideIndex];
-                return (jsx(CarouselSlide, { rect: rect, slide: slide, slideIndex: slideIndex, current: slideIndex === index }, slide.key ?? [`${slideIndex}`, isImageSlide(slide) && slide.src].filter(Boolean).join("|")));
+                if (!slide)
+                    return null;
+                return (jsx(CarouselSlide, { rect: rect, slide: slide, slideIndex: slideIndex, current: slideIndex === index }, slide.key ?? (isImageSlide(slide) ? `${slideIndex}|${slide.src}` : `${slideIndex}`)));
             }) }));
 }
 
@@ -198,31 +218,38 @@ const useController = makeUseContext(ControllerContext);
 function Controller({ setIndex, children }) {
     const { slides, index } = useLightboxContext();
     const exitHooks = useRef([]);
+    const closing = useRef(false);
+    const addExitHook = useCallback((hook) => {
+        exitHooks.current.push(hook);
+        return () => {
+            exitHooks.current = exitHooks.current.filter((h) => h !== hook);
+        };
+    }, []);
     const context = useMemo(() => {
         const prev = () => {
-            if (index > 0)
+            if (index > 0) {
                 transition(() => setIndex(index - 1));
+            }
         };
         const next = () => {
-            if (index < slides.length - 1)
+            if (index < slides.length - 1) {
                 transition(() => setIndex(index + 1));
+            }
         };
         const close = () => {
+            if (closing.current)
+                return;
+            closing.current = true;
             Promise.all(exitHooks.current.map((hook) => hook()))
                 .catch(() => { })
                 .then(() => {
                 exitHooks.current = [];
-                setIndex(-1);
+                closing.current = false;
+                setIndex(undefined);
             });
         };
-        const addExitHook = (hook) => {
-            exitHooks.current.push(hook);
-            return () => {
-                exitHooks.current.splice(exitHooks.current.indexOf(hook), 1);
-            };
-        };
         return { prev, next, close, addExitHook };
-    }, [slides.length, index, setIndex]);
+    }, [slides.length, index, setIndex, addExitHook]);
     return jsx(ControllerContext.Provider, { value: context, children: children });
 }
 
@@ -232,14 +259,11 @@ function Button({ icon: Icon, renderIcon, label, onClick, disabled, className })
     return (jsx("button", { type: "button", title: buttonLabel, "aria-label": buttonLabel, onClick: onClick, disabled: disabled, style: styles?.button, className: clsx(cssClass("button"), className), children: renderIcon?.() ?? jsx(Icon, { style: styles?.icon, className: cssClass("icon") }) }));
 }
 
-function svgIcon(name, children) {
-    const icon = (props) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props, children: children }));
+function createIcon(name, glyph) {
+    const icon = (props) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: "false", "aria-hidden": true, ...props, children: glyph }));
     icon.displayName = name;
     return icon;
 }
-function createIcon(name, glyph) {
-    return svgIcon(name, jsxs("g", { fill: "currentColor", children: [jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), glyph] }));
-}
 
 const Close = createIcon("Close", jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 
@@ -256,13 +280,17 @@ function Navigation() {
 const WHEEL_ZOOM_FACTOR = 100;
 const WHEEL_SWIPE_DISTANCE = 100;
 const WHEEL_SWIPE_COOLDOWN_TIME = 1000;
+const WHEEL_EVENT_HISTORY_WINDOW = 3000;
 const POINTER_SWIPE_DISTANCE = 100;
 const KEYBOARD_ZOOM_FACTOR = 8 ** (1 / 4);
 const KEYBOARD_MOVE_DISTANCE = 50;
 const PINCH_ZOOM_DISTANCE_FACTOR = 100;
 const PREVAILING_DIRECTION_FACTOR = 1.2;
+function hasTwoPointers(pointers) {
+    return pointers.length === 2;
+}
 function distance(pointerA, pointerB) {
-    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+    return Math.hypot(pointerA.clientX - pointerB.clientX, pointerA.clientY - pointerB.clientY);
 }
 function useSensors() {
     const wheelEvents = useRef([]);
@@ -271,7 +299,6 @@ function useSensors() {
     const activePointers = useRef([]);
     const pinchZoomDistance = useRef(undefined);
     const { zoom, maxZoom, changeZoom, changeOffsets } = useZoom();
-    const { carouselRef } = useZoomInternal();
     const { prev, next, close } = useController();
     const { closeOnPullUp, closeOnPullDown, closeOnBackdropClick } = {
         closeOnPullUp: true,
@@ -279,188 +306,171 @@ function useSensors() {
         closeOnBackdropClick: true,
         ...useLightboxContext().controller,
     };
-    return useMemo(() => {
-        const onKeyDown = (event) => {
-            const { key, metaKey, ctrlKey } = event;
-            const meta = metaKey || ctrlKey;
-            const preventDefault = () => event.preventDefault();
-            const handleChangeZoom = (newZoom) => {
+    const addPointer = (event) => {
+        removePointer(event);
+        activePointers.current.push(event);
+    };
+    const removePointer = (event) => {
+        activePointers.current = activePointers.current.filter((pointer) => pointer.pointerId !== event.pointerId);
+    };
+    const shouldIgnoreEvent = (event) => ("pointerType" in event && event.pointerType === "mouse" && event.buttons > 1) ||
+        (event.target instanceof Element &&
+            event.target.closest(`.${cssClass("button")}, .${cssClass("icon")}, .${cssClass("toolbar")}, .${cssClass("selectable")}`) !== null);
+    const onKeyDown = useEventCallback((event) => {
+        const { key, metaKey, ctrlKey } = event;
+        const meta = metaKey || ctrlKey;
+        const preventDefault = () => event.preventDefault();
+        const handleChangeZoom = (newZoom) => {
+            preventDefault();
+            changeZoom(newZoom);
+        };
+        if (key === "+" || (meta && key === "="))
+            handleChangeZoom(zoom * KEYBOARD_ZOOM_FACTOR);
+        if (key === "-" || (meta && key === "_"))
+            handleChangeZoom(zoom / KEYBOARD_ZOOM_FACTOR);
+        if (meta && key === "0")
+            handleChangeZoom(1);
+        if (key === "Escape")
+            close();
+        if (zoom > 1) {
+            const move = (deltaX, deltaY) => {
                 preventDefault();
-                changeZoom(newZoom);
+                changeOffsets(deltaX, deltaY);
             };
-            if (key === "+" || (meta && key === "="))
-                handleChangeZoom(zoom * KEYBOARD_ZOOM_FACTOR);
-            if (key === "-" || (meta && key === "_"))
-                handleChangeZoom(zoom / KEYBOARD_ZOOM_FACTOR);
-            if (meta && key === "0")
-                handleChangeZoom(1);
-            if (key === "Escape")
-                close();
-            if (zoom > 1) {
-                const move = (deltaX, deltaY) => {
-                    preventDefault();
-                    changeOffsets(deltaX, deltaY);
-                };
-                if (key === "ArrowUp")
-                    move(0, KEYBOARD_MOVE_DISTANCE);
-                if (key === "ArrowDown")
-                    move(0, -KEYBOARD_MOVE_DISTANCE);
-                if (key === "ArrowLeft")
-                    move(KEYBOARD_MOVE_DISTANCE, 0);
-                if (key === "ArrowRight")
-                    move(-KEYBOARD_MOVE_DISTANCE, 0);
-                return;
-            }
+            if (key === "ArrowUp")
+                move(0, KEYBOARD_MOVE_DISTANCE);
+            if (key === "ArrowDown")
+                move(0, -KEYBOARD_MOVE_DISTANCE);
             if (key === "ArrowLeft")
-                prev();
+                move(KEYBOARD_MOVE_DISTANCE, 0);
             if (key === "ArrowRight")
-                next();
-        };
-        const removePointer = (event) => {
-            const pointers = activePointers.current;
-            pointers.splice(0, pointers.length, ...pointers.filter((pointer) => pointer.pointerId !== event.pointerId));
-        };
-        const addPointer = (event) => {
-            event.persist();
-            removePointer(event);
-            activePointers.current.push(event);
-        };
-        const shouldIgnoreEvent = (event) => ("pointerType" in event && event.pointerType === "mouse" && event.buttons > 1) ||
-            (event.target instanceof Element &&
-                (event.target.classList.contains(cssClass("button")) ||
-                    event.target.classList.contains(cssClass("icon")) ||
-                    Array.from(carouselRef.current?.parentElement?.querySelectorAll(`.${cssClass("toolbar")}, .${cssClass("selectable")}`) || []).find((element) => element.contains(event.target)) !== undefined));
-        const onPointerDown = (event) => {
-            if (shouldIgnoreEvent(event))
-                return;
+                move(-KEYBOARD_MOVE_DISTANCE, 0);
+            return;
+        }
+        if (key === "ArrowLeft") {
+            preventDefault();
+            prev();
+        }
+        if (key === "ArrowRight") {
+            preventDefault();
+            next();
+        }
+    });
+    const onPointerDown = useEventCallback((event) => {
+        if (shouldIgnoreEvent(event))
+            return;
+        addPointer(event);
+        if (hasTwoPointers(activePointers.current)) {
+            pinchZoomDistance.current = distance(activePointers.current[0], activePointers.current[1]);
+        }
+    });
+    const onPointerMove = useEventCallback((event) => {
+        const activePointer = activePointers.current.find((pointer) => pointer.pointerId === event.pointerId);
+        if (!activePointer)
+            return;
+        if (hasTwoPointers(activePointers.current) && pinchZoomDistance.current) {
             addPointer(event);
-            const pointers = activePointers.current;
-            if (pointers.length === 2) {
-                pinchZoomDistance.current = distance(pointers[0], pointers[1]);
+            const currentDistance = distance(activePointers.current[0], activePointers.current[1]);
+            const delta = currentDistance - pinchZoomDistance.current;
+            if (Math.abs(delta) > 0) {
+                changeZoom(scaleZoom(zoom, delta, PINCH_ZOOM_DISTANCE_FACTOR), {
+                    clientX: (activePointers.current[0].clientX + activePointers.current[1].clientX) / 2,
+                    clientY: (activePointers.current[0].clientY + activePointers.current[1].clientY) / 2,
+                });
+                pinchZoomDistance.current = currentDistance;
             }
-        };
-        const onPointerMove = (event) => {
-            const pointers = activePointers.current;
-            const activePointer = pointers.find((pointer) => pointer.pointerId === event.pointerId);
-            if (!activePointer)
-                return;
-            if (pointers.length === 2 && pinchZoomDistance.current) {
-                addPointer(event);
-                const currentDistance = distance(pointers[0], pointers[1]);
-                const delta = currentDistance - pinchZoomDistance.current;
-                if (Math.abs(delta) > 0) {
-                    changeZoom(scaleZoom(zoom, delta, PINCH_ZOOM_DISTANCE_FACTOR), {
-                        clientX: (pointers[0].clientX + pointers[1].clientX) / 2,
-                        clientY: (pointers[0].clientY + pointers[1].clientY) / 2,
-                    });
-                    pinchZoomDistance.current = currentDistance;
-                }
-                return;
-            }
-            if (zoom > 1) {
-                if (pointers.length === 1) {
-                    changeOffsets(event.clientX - activePointer.clientX, event.clientY - activePointer.clientY);
-                }
-                addPointer(event);
-            }
-        };
-        const onPointerUp = (event) => {
-            const pointers = activePointers.current;
-            const activePointer = pointers.find((pointer) => pointer.pointerId === event.pointerId);
-            if (!activePointer)
-                return;
-            if (pointers.length === 1 && zoom === 1) {
-                const dx = event.clientX - activePointer.clientX;
-                const dy = event.clientY - activePointer.clientY;
-                const deltaX = Math.abs(dx);
-                const deltaY = Math.abs(dy);
-                if (deltaX > POINTER_SWIPE_DISTANCE && deltaX > PREVAILING_DIRECTION_FACTOR * deltaY) {
-                    if (dx > 0) {
-                        prev();
-                    }
-                    else {
-                        next();
-                    }
-                }
-                else if ((deltaY > POINTER_SWIPE_DISTANCE &&
-                    deltaY > PREVAILING_DIRECTION_FACTOR * deltaX &&
-                    ((closeOnPullUp && dy < 0) || (closeOnPullDown && dy > 0))) ||
-                    (closeOnBackdropClick &&
-                        activePointer.target instanceof Element &&
-                        Array.from(activePointer.target.classList).some((className) => [cssClass("slide"), cssClass("portal")].includes(className)))) {
-                    close();
-                }
-            }
-            removePointer(event);
-        };
-        const onWheel = (event) => {
-            if (event.ctrlKey) {
-                if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-                    changeZoom(scaleZoom(zoom, -event.deltaY, WHEEL_ZOOM_FACTOR), event);
-                }
-                return;
-            }
-            if (zoom > 1) {
-                changeOffsets(-event.deltaX, -event.deltaY);
-                return;
-            }
-            if (wheelCooldown.current && wheelCooldownMomentum.current) {
-                if (event.deltaX * wheelCooldownMomentum.current > 0 &&
-                    (event.timeStamp <= wheelCooldown.current + WHEEL_SWIPE_COOLDOWN_TIME / 2 ||
-                        (event.timeStamp <= wheelCooldown.current + WHEEL_SWIPE_COOLDOWN_TIME &&
-                            Math.abs(event.deltaX) < PREVAILING_DIRECTION_FACTOR * Math.abs(wheelCooldownMomentum.current)))) {
-                    wheelCooldownMomentum.current = event.deltaX;
-                    return;
-                }
-                wheelCooldown.current = null;
-                wheelCooldownMomentum.current = null;
+            return;
+        }
+        if (zoom > 1) {
+            if (activePointers.current.length === 1) {
+                changeOffsets(event.clientX - activePointer.clientX, event.clientY - activePointer.clientY);
             }
-            event.persist();
-            wheelEvents.current = wheelEvents.current.filter((e) => e.timeStamp > event.timeStamp - 3000);
-            wheelEvents.current.push(event);
-            const dx = wheelEvents.current.map((e) => e.deltaX).reduce((a, b) => a + b, 0);
+            addPointer(event);
+        }
+    });
+    const onPointerUp = useEventCallback((event) => {
+        const activePointer = activePointers.current.find((pointer) => pointer.pointerId === event.pointerId);
+        if (!activePointer)
+            return;
+        if (activePointers.current.length === 1 && zoom === 1) {
+            const dx = event.clientX - activePointer.clientX;
+            const dy = event.clientY - activePointer.clientY;
             const deltaX = Math.abs(dx);
-            const deltaY = Math.abs(wheelEvents.current.map((e) => e.deltaY).reduce((a, b) => a + b, 0));
-            if (deltaX > WHEEL_SWIPE_DISTANCE && deltaX > PREVAILING_DIRECTION_FACTOR * deltaY) {
-                if (dx < 0) {
+            const deltaY = Math.abs(dy);
+            if (deltaX > POINTER_SWIPE_DISTANCE && deltaX > PREVAILING_DIRECTION_FACTOR * deltaY) {
+                if (dx > 0) {
                     prev();
                 }
                 else {
                     next();
                 }
-                wheelEvents.current = [];
-                wheelCooldown.current = event.timeStamp;
-                wheelCooldownMomentum.current = event.deltaX;
             }
-        };
-        const onDoubleClick = (event) => {
-            if (shouldIgnoreEvent(event))
+            else if ((deltaY > POINTER_SWIPE_DISTANCE &&
+                deltaY > PREVAILING_DIRECTION_FACTOR * deltaX &&
+                ((closeOnPullUp && dy < 0) || (closeOnPullDown && dy > 0))) ||
+                (closeOnBackdropClick &&
+                    activePointer.target instanceof Element &&
+                    (activePointer.target.classList.contains(cssClass("slide")) ||
+                        activePointer.target.classList.contains(cssClass("portal"))))) {
+                close();
+            }
+        }
+        removePointer(event);
+    });
+    const onWheel = useEventCallback((event) => {
+        if (event.ctrlKey) {
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                changeZoom(scaleZoom(zoom, -event.deltaY, WHEEL_ZOOM_FACTOR), event);
+            }
+            return;
+        }
+        if (zoom > 1) {
+            changeOffsets(-event.deltaX, -event.deltaY);
+            return;
+        }
+        if (wheelCooldown.current && wheelCooldownMomentum.current) {
+            if (event.deltaX * wheelCooldownMomentum.current > 0 &&
+                (event.timeStamp <= wheelCooldown.current + WHEEL_SWIPE_COOLDOWN_TIME / 2 ||
+                    (event.timeStamp <= wheelCooldown.current + WHEEL_SWIPE_COOLDOWN_TIME &&
+                        Math.abs(event.deltaX) < PREVAILING_DIRECTION_FACTOR * Math.abs(wheelCooldownMomentum.current)))) {
+                wheelCooldownMomentum.current = event.deltaX;
                 return;
-            changeZoom(zoom < maxZoom ? scaleZoom(zoom, 2, 1) : 1, event);
-        };
-        return {
-            onKeyDown,
-            onPointerDown,
-            onPointerMove,
-            onPointerUp,
-            onPointerLeave: onPointerUp,
-            onPointerCancel: onPointerUp,
-            onDoubleClick,
-            onWheel,
-        };
-    }, [
-        prev,
-        next,
-        close,
-        zoom,
-        maxZoom,
-        changeZoom,
-        changeOffsets,
-        carouselRef,
-        closeOnPullUp,
-        closeOnPullDown,
-        closeOnBackdropClick,
-    ]);
+            }
+            wheelCooldown.current = null;
+            wheelCooldownMomentum.current = null;
+        }
+        wheelEvents.current = wheelEvents.current.filter((e) => e.timeStamp > event.timeStamp - WHEEL_EVENT_HISTORY_WINDOW);
+        wheelEvents.current.push(event);
+        const dx = wheelEvents.current.map((e) => e.deltaX).reduce((a, b) => a + b, 0);
+        const deltaX = Math.abs(dx);
+        const deltaY = Math.abs(wheelEvents.current.map((e) => e.deltaY).reduce((a, b) => a + b, 0));
+        if (deltaX > WHEEL_SWIPE_DISTANCE && deltaX > PREVAILING_DIRECTION_FACTOR * deltaY) {
+            if (dx < 0) {
+                prev();
+            }
+            else {
+                next();
+            }
+            wheelEvents.current = [];
+            wheelCooldown.current = event.timeStamp;
+            wheelCooldownMomentum.current = event.deltaX;
+        }
+    });
+    const onDoubleClick = useEventCallback((event) => {
+        if (shouldIgnoreEvent(event))
+            return;
+        changeZoom(zoom < maxZoom ? scaleZoom(zoom, 2, 1) : 1, event);
+    });
+    return useMemo(() => ({
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onPointerLeave: onPointerUp,
+        onPointerCancel: onPointerUp,
+        onDoubleClick,
+        onWheel,
+    }), [onKeyDown, onPointerDown, onPointerMove, onPointerUp, onDoubleClick, onWheel]);
 }
 
 function setAttribute(element, attribute, value) {
@@ -480,6 +490,7 @@ function Portal({ children }) {
     const cleanup = useRef([]);
     const [mounted, setMounted] = useState(false);
     const [visible, setVisible] = useState(false);
+    const portalRef = useRef(null);
     const onTransitionEnd = useRef(undefined);
     const restoreFocus = useRef(null);
     const sensors = useSensors();
@@ -489,28 +500,36 @@ function Portal({ children }) {
         cleanup.current = [];
     }, []);
     useEffect(() => addExitHook(() => new Promise((resolve) => {
-        onTransitionEnd.current = () => {
+        const transitionDuration = (portalRef.current &&
+            Math.max(...getComputedStyle(portalRef.current).transitionDuration.split(",").map(parseFloat)) *
+                1000) ||
+            0;
+        const done = () => {
             onTransitionEnd.current = undefined;
             resolve();
         };
+        const timeout = setTimeout(done, transitionDuration + 100);
+        onTransitionEnd.current = () => {
+            clearTimeout(timeout);
+            done();
+        };
         handleCleanup();
         setVisible(false);
     })), [addExitHook, handleCleanup]);
     useEffect(() => {
         const property = cssVar("scrollbar-width");
         const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        if (scrollbarWidth === 0)
-            return;
-        document.documentElement.style.setProperty(property, `${scrollbarWidth}px`);
+        if (scrollbarWidth > 0) {
+            document.documentElement.style.setProperty(property, `${scrollbarWidth}px`);
+        }
+        setMounted(true);
         return () => {
             document.documentElement.style.removeProperty(property);
+            setMounted(false);
         };
     }, []);
-    useEffect(() => {
-        setMounted(true);
-        return () => setMounted(false);
-    }, []);
     const handleRef = useCallback((node) => {
+        portalRef.current = node;
         if (node) {
             node.focus();
             const preventWheelDefaults = (event) => event.preventDefault();
@@ -518,9 +537,7 @@ function Portal({ children }) {
             cleanup.current.push(() => {
                 node.removeEventListener("wheel", preventWheelDefaults);
             });
-            const elements = getChildren(node.parentElement);
-            for (let i = 0; i < elements.length; i += 1) {
-                const element = elements[i];
+            for (const element of getChildren(node.parentElement)) {
                 if (!["TEMPLATE", "SCRIPT", "STYLE"].includes(element.tagName) && element !== node) {
                     cleanup.current.push(setAttribute(element, "inert", ""));
                     cleanup.current.push(setAttribute(element, "aria-hidden", "true"));
@@ -537,7 +554,7 @@ function Portal({ children }) {
         }
     }, [handleCleanup]);
     return mounted
-        ? createPortal(jsx("div", { "aria-modal": true, role: "dialog", "aria-label": translateLabel(labels, "Lightbox"), tabIndex: -1, ref: handleRef, style: styles?.portal, className: clsx(cssClass("portal"), !visible && cssClass("portal_closed"), className), onTransitionEnd: () => onTransitionEnd.current?.(), onFocus: (event) => {
+        ? createPortal(jsx("div", { "aria-modal": true, role: "dialog", "aria-label": translateLabel(labels, "Lightbox"), tabIndex: -1, ref: handleRef, style: styles?.portal, className: clsx(cssClass("portal"), !visible && cssClass("portal_closed"), className), onTransitionEnd: (event) => event.target === portalRef.current && onTransitionEnd.current?.(), onFocus: (event) => {
                 if (!restoreFocus.current) {
                     restoreFocus.current = event.relatedTarget;
                 }
@@ -548,7 +565,7 @@ function Portal({ children }) {
 function Toolbar() {
     const { render: { iconClose } = {}, toolbar: { buttons, fixed } = {}, styles } = useLightboxContext();
     const { close } = useController();
-    return (jsxs("div", { style: styles?.toolbar, className: clsx(cssClass("toolbar"), fixed && cssClass("toolbar_fixed")), children: [buttons?.map((button, key) => (isValidElement(button) && !button.key ? cloneElement(button, { key }) : button)), jsx(Button, { label: "Close", icon: Close, renderIcon: iconClose, onClick: close })] }));
+    return (jsxs("div", { style: styles?.toolbar, className: clsx(cssClass("toolbar"), fixed && cssClass("toolbar_fixed")), children: [buttons, jsx(Button, { label: "Close", icon: Close, renderIcon: iconClose, onClick: close })] }));
 }
 
 function Lightbox({ slides, index, setIndex, ...rest }) {

package/dist/styles.css

@@ -1 +1 @@
-body:has(>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll_fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,var(--yarll__button_color,hsla(0,0%,100%,.8)));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,var(--yarll__button_color_disabled,hsla(0,0%,100%,.4)));cursor:default}.yarll__icon{display:block;height:var(--yarll__icon_size,32px);pointer-events:none;width:var(--yarll__icon_size,32px)}.yarll__selectable{-moz-user-select:text;user-select:text;-webkit-user-select:text}
+html:has(body>.yarll__portal){overscroll-behavior:none}@media (prefers-reduced-motion:reduce){html:has(body>.yarll__portal)::view-transition-new(*),html:has(body>.yarll__portal)::view-transition-old(*){animation-duration:0s}}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll__fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}@media (prefers-reduced-motion:reduce){.yarll__portal{transition-duration:0s}}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,hsla(0,0%,100%,.4));cursor:default}.yarll__icon{display:block;fill:currentColor;height:var(--yarll__icon_size,32px);pointer-events:none;width:var(--yarll__icon_size,32px)}.yarll__selectable{-webkit-user-select:text;-moz-user-select:text;user-select:text}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",
@@ -12,10 +12,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./styles.css": {
-      "types": "./dist/styles.css.d.ts",
-      "default": "./dist/styles.css"
-    }
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
@@ -24,13 +21,12 @@
     "*.css"
   ],
   "homepage": "https://github.com/igordanchenko/yet-another-react-lightbox-lite",
+  "funding": "https://github.com/sponsors/igordanchenko",
+  "bugs": "https://github.com/igordanchenko/yet-another-react-lightbox-lite/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/igordanchenko/yet-another-react-lightbox-lite.git"
   },
-  "bugs": {
-    "url": "https://github.com/igordanchenko/yet-another-react-lightbox-lite/issues"
-  },
   "engines": {
     "node": ">=18"
   },

package/dist/styles.css.d.ts

@@ -1,2 +0,0 @@
-declare const styles: unknown;
-export default styles;