@k2b/ui 0.18.0 → 0.20.0

package/dist/browser/content/Lightbox.js

@@ -1,9 +1,10 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
@@ -15,12 +16,16 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-content-lightbox__counter
   _tmpl$4 = /*#__PURE__*/_$template(`<button type=button class=k2b-content-lightbox__nav data-direction=previous><i class="ti ti-chevron-left"aria-hidden=true>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class=k2b-content-lightbox__nav data-direction=next><i class="ti ti-chevron-right"aria-hidden=true>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-content-lightbox__dots role=group>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<dialog class=k2b-content-lightbox><div class=k2b-content-lightbox__bar><div class=k2b-content-lightbox__meta><!$><!/><!$><!/></div><div class=k2b-content-lightbox__actions><!$><!/><button type=button class=k2b-content-lightbox__button><i class="ti ti-x"aria-hidden=true></i><span class=k2b-content-lightbox__button-label></span></button></div></div><div class=k2b-content-lightbox__stage></div><!$><!/><!$><!/>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<img class=k2b-content-lightbox__image>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<button type=button class=k2b-content-lightbox__dot>`);
+  _tmpl$7 = /*#__PURE__*/_$template(`<dialog class=k2b-content-lightbox><div class=k2b-content-lightbox__bar><div class=k2b-content-lightbox__meta><!$><!/><!$><!/></div><div class=k2b-content-lightbox__actions><!$><!/><!$><!/><button type=button class=k2b-content-lightbox__button><i class="ti ti-x"aria-hidden=true></i><span class=k2b-content-lightbox__button-label></span></button></div></div><div class=k2b-content-lightbox__stage></div><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button class=k2b-content-lightbox__button><i aria-hidden=true></i><span class=k2b-content-lightbox__button-label>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<img class=k2b-content-lightbox__image>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button class=k2b-content-lightbox__dot>`);
 import { createEffect, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
 import { useUiMessages } from "../intl/messages";
+
+/** One more thing to do with the shown image, beside Download: a short label, its icon class, and what it does. */
+
 /**
  * Minimal, accessible lightbox using native <dialog>.
  * Supports keyboard navigation, touch swipe gestures, and screen readers.
@@ -70,8 +75,13 @@ export default function Lightbox(props) {
     props.onClose();
   };
 
+  // A key belongs to the Lightbox while focus is inside it, or on the page with no other dialog open. A dialog opened
+  // from one of its actions keeps its own keys: Escape closes that dialog, and arrows stay in its fields.
+  const ownsKey = target => target instanceof Node && (dialogRef.contains(target) || target === document.body && Array.from(document.querySelectorAll("dialog[open]")).every(dialog => dialog === dialogRef));
+
   // Keyboard navigation
   const handleKeyDown = e => {
+    if (!ownsKey(e.target)) return;
     switch (e.key) {
       case "Escape":
         // Handled here, so WebKit does not light the returned focus for this key.
@@ -147,14 +157,16 @@ export default function Lightbox(props) {
       _el$14 = _el$3.nextSibling,
       _el$21 = _el$14.firstChild,
       [_el$22, _co$5] = _$getNextMarker(_el$21.nextSibling),
-      _el$18 = _el$22.nextSibling,
+      _el$23 = _el$22.nextSibling,
+      [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
+      _el$18 = _el$24.nextSibling,
       _el$19 = _el$18.firstChild,
       _el$20 = _el$19.nextSibling,
-      _el$23 = _el$2.nextSibling,
-      _el$27 = _el$23.nextSibling,
-      [_el$28, _co$6] = _$getNextMarker(_el$27.nextSibling),
-      _el$29 = _el$28.nextSibling,
-      [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling);
+      _el$25 = _el$2.nextSibling,
+      _el$29 = _el$25.nextSibling,
+      [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling),
+      _el$31 = _el$30.nextSibling,
+      [_el$32, _co$8] = _$getNextMarker(_el$31.nextSibling);
     _el$.$$touchend = handleTouchEnd;
     _el$.$$touchstart = handleTouchStart;
     _el$.addEventListener("cancel", handleCancel);
@@ -188,6 +200,30 @@ export default function Lightbox(props) {
         return _el$0;
       }
     }), _el$13, _co$4);
+    _$insert(_el$14, _$createComponent(For, {
+      get each() {
+        return current()?.actions ?? [];
+      },
+      children: action => (() => {
+        var _el$33 = _$getNextElement(_tmpl$8),
+          _el$34 = _el$33.firstChild,
+          _el$35 = _el$34.nextSibling;
+        _el$33.$$click = () => action.onClick();
+        _$insert(_el$35, () => action.label);
+        _$effect(_p$ => {
+          var _v$5 = action.label,
+            _v$6 = action.icon;
+          _v$5 !== _p$.e && _$setAttribute(_el$33, "aria-label", _p$.e = _v$5);
+          _v$6 !== _p$.t && _$className(_el$34, _p$.t = _v$6);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$runHydrationEvents();
+        return _el$33;
+      })()
+    }), _el$22, _co$5);
     _$insert(_el$14, _$createComponent(Show, {
       get when() {
         return current()?.downloadUrl;
@@ -209,27 +245,27 @@ export default function Lightbox(props) {
         });
         return _el$15;
       }
-    }), _el$22, _co$5);
+    }), _el$24, _co$6);
     _el$18.$$click = close;
     _$insert(_el$20, () => messages().close);
-    _$insert(_el$23, _$createComponent(Show, {
+    _$insert(_el$25, _$createComponent(Show, {
       get when() {
         return current();
       },
       children: image => (() => {
-        var _el$31 = _$getNextElement(_tmpl$8);
-        _$setAttribute(_el$31, "draggable", false);
+        var _el$36 = _$getNextElement(_tmpl$9);
+        _$setAttribute(_el$36, "draggable", false);
         _$effect(_p$ => {
-          var _v$5 = image().src,
-            _v$6 = image().alt ?? "";
-          _v$5 !== _p$.e && _$setAttribute(_el$31, "src", _p$.e = _v$5);
-          _v$6 !== _p$.t && _$setAttribute(_el$31, "alt", _p$.t = _v$6);
+          var _v$7 = image().src,
+            _v$8 = image().alt ?? "";
+          _v$7 !== _p$.e && _$setAttribute(_el$36, "src", _p$.e = _v$7);
+          _v$8 !== _p$.t && _$setAttribute(_el$36, "alt", _p$.t = _v$8);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$31;
+        return _el$36;
       })()
     }));
     _$insert(_el$, _$createComponent(Show, {
@@ -238,53 +274,53 @@ export default function Lightbox(props) {
       },
       get children() {
         return [(() => {
-          var _el$24 = _$getNextElement(_tmpl$4);
-          _el$24.$$click = prev;
-          _$effect(() => _$setAttribute(_el$24, "aria-label", messages().previousImage));
+          var _el$26 = _$getNextElement(_tmpl$4);
+          _el$26.$$click = prev;
+          _$effect(() => _$setAttribute(_el$26, "aria-label", messages().previousImage));
           _$runHydrationEvents();
-          return _el$24;
+          return _el$26;
         })(), (() => {
-          var _el$25 = _$getNextElement(_tmpl$5);
-          _el$25.$$click = next;
-          _$effect(() => _$setAttribute(_el$25, "aria-label", messages().nextImage));
+          var _el$27 = _$getNextElement(_tmpl$5);
+          _el$27.$$click = next;
+          _$effect(() => _$setAttribute(_el$27, "aria-label", messages().nextImage));
           _$runHydrationEvents();
-          return _el$25;
+          return _el$27;
         })()];
       }
-    }), _el$28, _co$6);
+    }), _el$30, _co$7);
     _$insert(_el$, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!isMultiple())() && props.images.length <= 10;
       },
       get children() {
-        var _el$26 = _$getNextElement(_tmpl$6);
-        _$insert(_el$26, _$createComponent(For, {
+        var _el$28 = _$getNextElement(_tmpl$6);
+        _$insert(_el$28, _$createComponent(For, {
           get each() {
             return props.images;
           },
           children: (_, i) => (() => {
-            var _el$32 = _$getNextElement(_tmpl$9);
-            _el$32.$$click = () => setIndex(i());
+            var _el$37 = _$getNextElement(_tmpl$0);
+            _el$37.$$click = () => setIndex(i());
             _$effect(_p$ => {
-              var _v$7 = index() === i() ? "true" : undefined,
-                _v$8 = messages().goToImage({
+              var _v$9 = index() === i() ? "true" : undefined,
+                _v$0 = messages().goToImage({
                   index: i() + 1
                 });
-              _v$7 !== _p$.e && _$setAttribute(_el$32, "aria-current", _p$.e = _v$7);
-              _v$8 !== _p$.t && _$setAttribute(_el$32, "aria-label", _p$.t = _v$8);
+              _v$9 !== _p$.e && _$setAttribute(_el$37, "aria-current", _p$.e = _v$9);
+              _v$0 !== _p$.t && _$setAttribute(_el$37, "aria-label", _p$.t = _v$0);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
             _$runHydrationEvents();
-            return _el$32;
+            return _el$37;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$26, "aria-label", messages().imageNavigation));
-        return _el$26;
+        _$effect(() => _$setAttribute(_el$28, "aria-label", messages().imageNavigation));
+        return _el$28;
       }
-    }), _el$30, _co$7);
+    }), _el$32, _co$8);
     _$effect(_p$ => {
       var _v$3 = messages().imageLightbox,
         _v$4 = messages().closeLightbox;

package/dist/browser/content/Lightbox.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/Lightbox.tsx"],"sourcesContent":["import { createEffect, createSignal, For, onCleanup, onMount, Show } from \"solid-js\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\n\nexport type LightboxImage = {\n  src: string;\n  alt?: string;\n  downloadUrl?: string;\n};\n\ntype LightboxProps = {\n  images: LightboxImage[];\n  initialIndex?: number;\n  onClose: () => void;\n};\n\n/**\n * Minimal, accessible lightbox using native <dialog>.\n * Supports keyboard navigation, touch swipe gestures, and screen readers.\n */\nexport default function Lightbox(props: LightboxProps) {\n  const messages = useUiMessages();\n  const clampIndex = (value: number, images = props.images): number =>\n    images.length === 0 ? 0 : Math.max(0, Math.min(value, images.length - 1));\n  const [index, setIndex] = createSignal(clampIndex(props.initialIndex ?? 0));\n  let dialogRef!: HTMLDialogElement;\n  let opener: HTMLElement | null = null;\n  let openerRing = true;\n\n  createEffect(\n    (previous: { images: LightboxImage[]; initialIndex: number | undefined }) => {\n      const images = props.images;\n      const initialIndex = props.initialIndex;\n      setIndex((currentIndex) => {\n        if (initialIndex !== previous.initialIndex) return clampIndex(initialIndex ?? 0, images);\n        const previousImage = previous.images[currentIndex];\n        const retained = previousImage ? images.findIndex((image) => image === previousImage || image.src === previousImage.src) : -1;\n        return retained >= 0 ? retained : clampIndex(currentIndex, images);\n      });\n      return { images, initialIndex };\n    },\n    { images: props.images, initialIndex: props.initialIndex },\n  );\n\n  // Touch gesture tracking\n  let touchStartX = 0;\n  let touchStartY = 0;\n  const SWIPE_THRESHOLD = 50;\n\n  const current = () => props.images[index()];\n  const isMultiple = () => props.images.length > 1;\n  const prev = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i - 1 + props.images.length) % props.images.length);\n  };\n  const next = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i + 1) % props.images.length);\n  };\n\n  const close = () => {\n    dialogRef.close();\n    returnFocus(opener, openerRing);\n    props.onClose();\n  };\n\n  // Keyboard navigation\n  const handleKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Escape\":\n        // Handled here, so WebKit does not light the returned focus for this key.\n        e.preventDefault();\n        close();\n        break;\n      case \"ArrowLeft\":\n        prev();\n        break;\n      case \"ArrowRight\":\n        next();\n        break;\n    }\n  };\n\n  // Touch handlers for swipe gestures\n  const handleTouchStart = (e: TouchEvent) => {\n    const touch = e.touches[0];\n    if (touch) {\n      touchStartX = touch.clientX;\n      touchStartY = touch.clientY;\n    }\n  };\n\n  const handleTouchEnd = (e: TouchEvent) => {\n    const touch = e.changedTouches[0];\n    if (!touch) return;\n\n    const deltaX = touch.clientX - touchStartX;\n    const deltaY = touch.clientY - touchStartY;\n\n    // Only trigger swipe if horizontal movement is dominant\n    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > SWIPE_THRESHOLD) {\n      if (deltaX > 0) {\n        prev();\n      } else {\n        next();\n      }\n    }\n  };\n\n  // Click on backdrop closes lightbox\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === dialogRef) {\n      close();\n    }\n  };\n\n  // The browser cancels the dialog itself, as on the Android back gesture;\n  // closing here still returns focus and tells the owner.\n  const handleCancel = (e: Event) => {\n    e.preventDefault();\n    close();\n  };\n\n  // Registration and teardown both live in onMount: onCleanup also runs when an\n  // SSR render is disposed, where `document` does not exist.\n  onMount(() => {\n    opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    openerRing = ringOnReturn(opener);\n    // The native dialog would return focus with a ring of the browser's choosing.\n    opener?.blur();\n    dialogRef.showModal();\n    document.addEventListener(\"keydown\", handleKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", handleKeyDown));\n  });\n\n  return (\n    <dialog\n      ref={dialogRef}\n      class=\"k2b-content-lightbox\"\n      onMouseDown={handleBackdropClick}\n      onCancel={handleCancel}\n      onTouchStart={handleTouchStart}\n      onTouchEnd={handleTouchEnd}\n      aria-label={messages().imageLightbox}\n    >\n      {/* Top bar */}\n      <div class=\"k2b-content-lightbox__bar\">\n        <div class=\"k2b-content-lightbox__meta\">\n          <Show when={isMultiple()}>\n            <span class=\"k2b-content-lightbox__counter\" aria-live=\"polite\">\n              {index() + 1} / {props.images.length}\n            </span>\n          </Show>\n          <Show when={current()?.alt}>\n            <div class=\"k2b-content-lightbox__caption\">\n              <div class=\"k2b-content-lightbox__caption-text\">{current()?.alt}</div>\n            </div>\n          </Show>\n        </div>\n\n        <div class=\"k2b-content-lightbox__actions\">\n          <Show when={current()?.downloadUrl}>\n            <a href={current()!.downloadUrl} download=\"\" class=\"k2b-content-lightbox__button\" aria-label={messages().downloadImage}>\n              <i class=\"ti ti-download\" aria-hidden=\"true\" />\n              <span class=\"k2b-content-lightbox__button-label\">{messages().download}</span>\n            </a>\n          </Show>\n          <button type=\"button\" onClick={close} class=\"k2b-content-lightbox__button\" aria-label={messages().closeLightbox}>\n            <i class=\"ti ti-x\" aria-hidden=\"true\" />\n            <span class=\"k2b-content-lightbox__button-label\">{messages().close}</span>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"k2b-content-lightbox__stage\">\n        <Show when={current()}>\n          {(image) => <img src={image().src} alt={image().alt ?? \"\"} class=\"k2b-content-lightbox__image\" draggable={false} />}\n        </Show>\n      </div>\n\n      <Show when={isMultiple()}>\n        <button\n          type=\"button\"\n          onClick={prev}\n          class=\"k2b-content-lightbox__nav\"\n          data-direction=\"previous\"\n          aria-label={messages().previousImage}\n        >\n          <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <button type=\"button\" onClick={next} class=\"k2b-content-lightbox__nav\" data-direction=\"next\" aria-label={messages().nextImage}>\n          <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n\n      <Show when={isMultiple() && props.images.length <= 10}>\n        <div class=\"k2b-content-lightbox__dots\" role=\"group\" aria-label={messages().imageNavigation}>\n          <For each={props.images}>\n            {(_, i) => (\n              <button\n                type=\"button\"\n                onClick={() => setIndex(i())}\n                class=\"k2b-content-lightbox__dot\"\n                aria-current={index() === i() ? \"true\" : undefined}\n                aria-label={messages().goToImage({ index: i() + 1 })}\n              />\n            )}\n          </For>\n        </div>\n      </Show>\n    </dialog>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/Lightbox.tsx"],"sourcesContent":["import { createEffect, createSignal, For, onCleanup, onMount, Show } from \"solid-js\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\n\n/** One more thing to do with the shown image, beside Download: a short label, its icon class, and what it does. */\nexport type LightboxAction = {\n  label: string;\n  icon: string;\n  onClick: () => void;\n};\n\nexport type LightboxImage = {\n  src: string;\n  alt?: string;\n  downloadUrl?: string;\n  /** Actions for this image, shown before Download in the same style. */\n  actions?: readonly LightboxAction[];\n};\n\ntype LightboxProps = {\n  images: LightboxImage[];\n  initialIndex?: number;\n  onClose: () => void;\n};\n\n/**\n * Minimal, accessible lightbox using native <dialog>.\n * Supports keyboard navigation, touch swipe gestures, and screen readers.\n */\nexport default function Lightbox(props: LightboxProps) {\n  const messages = useUiMessages();\n  const clampIndex = (value: number, images = props.images): number =>\n    images.length === 0 ? 0 : Math.max(0, Math.min(value, images.length - 1));\n  const [index, setIndex] = createSignal(clampIndex(props.initialIndex ?? 0));\n  let dialogRef!: HTMLDialogElement;\n  let opener: HTMLElement | null = null;\n  let openerRing = true;\n\n  createEffect(\n    (previous: { images: LightboxImage[]; initialIndex: number | undefined }) => {\n      const images = props.images;\n      const initialIndex = props.initialIndex;\n      setIndex((currentIndex) => {\n        if (initialIndex !== previous.initialIndex) return clampIndex(initialIndex ?? 0, images);\n        const previousImage = previous.images[currentIndex];\n        const retained = previousImage ? images.findIndex((image) => image === previousImage || image.src === previousImage.src) : -1;\n        return retained >= 0 ? retained : clampIndex(currentIndex, images);\n      });\n      return { images, initialIndex };\n    },\n    { images: props.images, initialIndex: props.initialIndex },\n  );\n\n  // Touch gesture tracking\n  let touchStartX = 0;\n  let touchStartY = 0;\n  const SWIPE_THRESHOLD = 50;\n\n  const current = () => props.images[index()];\n  const isMultiple = () => props.images.length > 1;\n  const prev = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i - 1 + props.images.length) % props.images.length);\n  };\n  const next = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i + 1) % props.images.length);\n  };\n\n  const close = () => {\n    dialogRef.close();\n    returnFocus(opener, openerRing);\n    props.onClose();\n  };\n\n  // A key belongs to the Lightbox while focus is inside it, or on the page with no other dialog open. A dialog opened\n  // from one of its actions keeps its own keys: Escape closes that dialog, and arrows stay in its fields.\n  const ownsKey = (target: EventTarget | null) =>\n    target instanceof Node &&\n    (dialogRef.contains(target) ||\n      (target === document.body && Array.from(document.querySelectorAll(\"dialog[open]\")).every((dialog) => dialog === dialogRef)));\n\n  // Keyboard navigation\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (!ownsKey(e.target)) return;\n    switch (e.key) {\n      case \"Escape\":\n        // Handled here, so WebKit does not light the returned focus for this key.\n        e.preventDefault();\n        close();\n        break;\n      case \"ArrowLeft\":\n        prev();\n        break;\n      case \"ArrowRight\":\n        next();\n        break;\n    }\n  };\n\n  // Touch handlers for swipe gestures\n  const handleTouchStart = (e: TouchEvent) => {\n    const touch = e.touches[0];\n    if (touch) {\n      touchStartX = touch.clientX;\n      touchStartY = touch.clientY;\n    }\n  };\n\n  const handleTouchEnd = (e: TouchEvent) => {\n    const touch = e.changedTouches[0];\n    if (!touch) return;\n\n    const deltaX = touch.clientX - touchStartX;\n    const deltaY = touch.clientY - touchStartY;\n\n    // Only trigger swipe if horizontal movement is dominant\n    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > SWIPE_THRESHOLD) {\n      if (deltaX > 0) {\n        prev();\n      } else {\n        next();\n      }\n    }\n  };\n\n  // Click on backdrop closes lightbox\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === dialogRef) {\n      close();\n    }\n  };\n\n  // The browser cancels the dialog itself, as on the Android back gesture;\n  // closing here still returns focus and tells the owner.\n  const handleCancel = (e: Event) => {\n    e.preventDefault();\n    close();\n  };\n\n  // Registration and teardown both live in onMount: onCleanup also runs when an\n  // SSR render is disposed, where `document` does not exist.\n  onMount(() => {\n    opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    openerRing = ringOnReturn(opener);\n    // The native dialog would return focus with a ring of the browser's choosing.\n    opener?.blur();\n    dialogRef.showModal();\n    document.addEventListener(\"keydown\", handleKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", handleKeyDown));\n  });\n\n  return (\n    <dialog\n      ref={dialogRef}\n      class=\"k2b-content-lightbox\"\n      onMouseDown={handleBackdropClick}\n      onCancel={handleCancel}\n      onTouchStart={handleTouchStart}\n      onTouchEnd={handleTouchEnd}\n      aria-label={messages().imageLightbox}\n    >\n      {/* Top bar */}\n      <div class=\"k2b-content-lightbox__bar\">\n        <div class=\"k2b-content-lightbox__meta\">\n          <Show when={isMultiple()}>\n            <span class=\"k2b-content-lightbox__counter\" aria-live=\"polite\">\n              {index() + 1} / {props.images.length}\n            </span>\n          </Show>\n          <Show when={current()?.alt}>\n            <div class=\"k2b-content-lightbox__caption\">\n              <div class=\"k2b-content-lightbox__caption-text\">{current()?.alt}</div>\n            </div>\n          </Show>\n        </div>\n\n        <div class=\"k2b-content-lightbox__actions\">\n          <For each={current()?.actions ?? []}>\n            {(action) => (\n              <button type=\"button\" onClick={() => action.onClick()} class=\"k2b-content-lightbox__button\" aria-label={action.label}>\n                <i class={action.icon} aria-hidden=\"true\" />\n                <span class=\"k2b-content-lightbox__button-label\">{action.label}</span>\n              </button>\n            )}\n          </For>\n          <Show when={current()?.downloadUrl}>\n            <a href={current()!.downloadUrl} download=\"\" class=\"k2b-content-lightbox__button\" aria-label={messages().downloadImage}>\n              <i class=\"ti ti-download\" aria-hidden=\"true\" />\n              <span class=\"k2b-content-lightbox__button-label\">{messages().download}</span>\n            </a>\n          </Show>\n          <button type=\"button\" onClick={close} class=\"k2b-content-lightbox__button\" aria-label={messages().closeLightbox}>\n            <i class=\"ti ti-x\" aria-hidden=\"true\" />\n            <span class=\"k2b-content-lightbox__button-label\">{messages().close}</span>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"k2b-content-lightbox__stage\">\n        <Show when={current()}>\n          {(image) => <img src={image().src} alt={image().alt ?? \"\"} class=\"k2b-content-lightbox__image\" draggable={false} />}\n        </Show>\n      </div>\n\n      <Show when={isMultiple()}>\n        <button\n          type=\"button\"\n          onClick={prev}\n          class=\"k2b-content-lightbox__nav\"\n          data-direction=\"previous\"\n          aria-label={messages().previousImage}\n        >\n          <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <button type=\"button\" onClick={next} class=\"k2b-content-lightbox__nav\" data-direction=\"next\" aria-label={messages().nextImage}>\n          <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n\n      <Show when={isMultiple() && props.images.length <= 10}>\n        <div class=\"k2b-content-lightbox__dots\" role=\"group\" aria-label={messages().imageNavigation}>\n          <For each={props.images}>\n            {(_, i) => (\n              <button\n                type=\"button\"\n                onClick={() => setIndex(i())}\n                class=\"k2b-content-lightbox__dot\"\n                aria-current={index() === i() ? \"true\" : undefined}\n                aria-label={messages().goToImage({ index: i() + 1 })}\n              />\n            )}\n          </For>\n        </div>\n      </Show>\n    </dialog>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/MessageRow.js

@@ -38,7 +38,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span>`),
   _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-message-row__marker><i class="ti ti-pencil"aria-hidden=true></i><span class=k2b-message-row__edited>`),
   _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-message-row__media role=group>`),
   _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-message-row__files>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-message-row__slot>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-message-row__slot data-gesture-ignore>`),
   _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-message-row__line>`),
   _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-message-row__footer><!$><!/><!$><!/>`),
   _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-message-row__actions role=group>`),
@@ -329,7 +329,7 @@ const renderMessage = (text, locale, messages, edited) => {
   renderer.code = token => {
     const language = token.lang?.match(/^\S{1,24}/)?.[0];
     const block = renderCode(token).replace(/^<pre>/, '<pre tabindex="0">');
-    return '<div class="k2b-message-row__code"><div class="k2b-message-row__code-bar">' + `<span class="k2b-message-row__code-label">${escapeHtml(language ?? messages.code)}</span>` + '<button type="button" class="k2b-message-row__copy">' + `<span class="k2b-message-row__copy-idle"><i class="ti ti-copy" aria-hidden="true"></i>${escapeHtml(messages.copy)}</span>` + `<span class="k2b-message-row__copy-done"><i class="ti ti-check" aria-hidden="true"></i>${escapeHtml(messages.copied)}</span>` + `</button></div>${block}</div>`;
+    return '<div class="k2b-message-row__code" data-gesture-ignore><div class="k2b-message-row__code-bar">' + `<span class="k2b-message-row__code-label">${escapeHtml(language ?? messages.code)}</span>` + '<button type="button" class="k2b-message-row__copy">' + `<span class="k2b-message-row__copy-idle"><i class="ti ti-copy" aria-hidden="true"></i>${escapeHtml(messages.copy)}</span>` + `<span class="k2b-message-row__copy-done"><i class="ti ti-check" aria-hidden="true"></i>${escapeHtml(messages.copied)}</span>` + `</button></div>${block}</div>`;
   };
   const marked = createSafeMarked(locale).setOptions({
     breaks: true,