@k2b/ui 0.18.0 → 0.19.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/PdfPreview.js

@@ -16,11 +16,13 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-button data-
   _tmpl$3 = /*#__PURE__*/_$template(`<span role=alert class=k2b-content-pdf-preview__notice>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-content-pdf-preview__actions><!$><!/><!$><!/><!$><!/><!$><!/>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<a class=k2b-button data-variant=secondary data-size=sm target=_blank rel=noopener><i class="ti ti-external-link"aria-hidden=true></i><!$><!/>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<iframe class=k2b-content-pdf-preview__frame>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<button type=button class=k2b-button data-variant=secondary data-size=sm>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<h2 class=k2b-content-pdf-preview__title>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<section><div class=k2b-content-pdf-preview__toolbar><div class=k2b-content-pdf-preview__heading></div><!$><!/></div><!$><!/>`);
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-content-pdf-preview__viewer><!$><!/><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<iframe class=k2b-content-pdf-preview__frame>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button class=k2b-button data-variant=secondary data-size=sm>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<h2 class=k2b-content-pdf-preview__title>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<section><div class=k2b-content-pdf-preview__toolbar><div class=k2b-content-pdf-preview__heading></div><!$><!/></div><!$><!/>`);
 import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { announce } from "../feedback/announce";
 import { resolveUiMessages, useUiMessages } from "../intl/messages";
 import Placeholder from "../surfaces/Placeholder";
 const readErrorMessage = async response => {
@@ -44,15 +46,26 @@ export default function PdfPreview(props) {
   const [error, setError] = createSignal(null);
   const [failed, setFailed] = createSignal(false);
   const [tabBlocked, setTabBlocked] = createSignal(false);
+  // The frame has its document only once it fires `load`; until then the loading state covers it.
+  const [drawn, setDrawn] = createSignal(false);
   // An automatic preview shows one fixed document; the open action reuses it instead of requesting it again.
   let shownBlob = null;
   let openButton;
   let frame;
+  let viewer;
   let renderButton;
   let errorRetryButton;
   let disposed = false;
   let loadGeneration = 0;
   let openGeneration = 0;
+
+  // Without an inline PDF viewer (`navigator.pdfViewerEnabled === false`, as in Chrome on Android) a frame stays empty
+  // or downloads the file, so the viewer explains that instead and leaves the document to the open and download actions.
+  const inlineViewer = () => typeof navigator === "undefined" || navigator.pdfViewerEnabled !== false;
+  // There an automatic preview could show only that hint, so it requests nothing: the open action fetches the document
+  // when someone asks for it, and is also the retry after it fails. An on-demand preview still renders, because its
+  // request also checks the caller's input.
+  const openOnly = () => Boolean(props.autoLoad) && !inlineViewer();
   const revokeCurrent = () => {
     const current = url();
     if (current) URL.revokeObjectURL(current);
@@ -88,12 +101,18 @@ export default function PdfPreview(props) {
       const previousUrl = url();
       shownBlob = blob;
       setFailed(false);
+      setDrawn(false);
       setUrl(nextUrl);
       setLoading(false);
       if (previousUrl) URL.revokeObjectURL(previousUrl);
-      // The shown document removes the retry action; keep keyboard focus in the actions instead of the page, or on the
-      // document itself when the host shows only the content.
-      if (retryFocused && document.activeElement === document.body) (openButton?.isConnected ? openButton : frame)?.focus();
+      // The loading status turns into the missing-viewer hint in place and stops being a live region, so say it here.
+      if (!inlineViewer()) {
+        announce(messages().pdfPreviewNoViewer);
+        announce(messages().pdfPreviewNoViewerDescription);
+      }
+      // The shown document removes the retry action; keep keyboard focus in the actions instead of the page, or, when
+      // the host shows only the content, in the viewer, which hands it on to the document once the frame has loaded it.
+      if (retryFocused && document.activeElement === document.body) (openButton?.isConnected ? openButton : viewer)?.focus();
     } catch (e) {
       if (disposed || generation !== loadGeneration) return;
       shownBlob = null;
@@ -105,9 +124,10 @@ export default function PdfPreview(props) {
     }
   };
   onMount(() => {
-    // Hand the initial loading state to the request itself, which also covers a preview disabled by now.
+    // Hand the initial loading state to the request itself, which also covers a preview disabled by now or one that
+    // leaves the document to the open action.
     setLoading(false);
-    if (props.autoLoad) void load();
+    if (props.autoLoad && !openOnly()) void load();
   });
   const openInNewTab = async () => {
     if (loading() || opening() || props.disabled?.()) return;
@@ -140,7 +160,7 @@ export default function PdfPreview(props) {
 
   // With autoLoad, rendering again would show the same document: offer it only until one is shown. After a failure the
   // default error state carries it as the retry; beside a caller's error content it stays in place while a retry loads.
-  const renderable = () => !props.autoLoad || (failed() ? Boolean(props.renderError) : !url() && !loading());
+  const renderable = () => !openOnly() && (!props.autoLoad || (failed() ? Boolean(props.renderError) : !url() && !loading()));
   const actions = () => (() => {
     var _el$ = _$getNextElement(_tmpl$4),
       _el$1 = _el$.firstChild,
@@ -245,71 +265,118 @@ export default function PdfPreview(props) {
     }), _el$16, _co$6);
     return _el$;
   })();
-  // Every state before a document is shown uses one placeholder in the viewer's box, so loading changes no layout.
-  const content = () => _$createComponent(Show, {
-    get when() {
-      return error();
-    },
-    get fallback() {
-      return _$createComponent(Show, {
-        get when() {
-          return url();
-        },
-        get fallback() {
-          return _$createComponent(Placeholder, {
+  // Every state uses one placeholder in the viewer's box, so loading changes no layout: idle and loading before a
+  // document arrives, loading over the frame until it has loaded the document, and the hint where no frame can.
+  const status = () => {
+    if (error()) return null;
+    if (!inlineViewer() && (url() || openOnly() && !loading())) return "no-viewer";
+    if (!url()) return loading() ? "loading" : "idle";
+    return drawn() ? null : "loading";
+  };
+  const viewerBox = () => // While it shows a placeholder, the viewer itself holds keyboard focus that has nowhere else to go.
+  (() => {
+    var _el$25 = _$getNextElement(_tmpl$6),
+      _el$26 = _el$25.firstChild,
+      [_el$27, _co$9] = _$getNextMarker(_el$26.nextSibling),
+      _el$28 = _el$27.nextSibling,
+      [_el$29, _co$0] = _$getNextMarker(_el$28.nextSibling);
+    _$use(element => viewer = element, _el$25);
+    _$insert(_el$25, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(!error() && inlineViewer()))() && url();
+      },
+      children: currentUrl => (() => {
+        var _el$30 = _$getNextElement(_tmpl$7);
+        _el$30.addEventListener("load", () => {
+          const waiting = document.activeElement === viewer;
+          setDrawn(true);
+          if (waiting) frame?.focus();
+        });
+        _$use(element => {
+          frame = element;
+          // A new frame loads its document again, also one that was shown before a failed reload.
+          setDrawn(false);
+        }, _el$30);
+        _$effect(_p$ => {
+          var _v$5 = drawn() ? "" : undefined,
+            _v$6 = !drawn(),
+            _v$7 = currentUrl(),
+            _v$8 = props.title ?? messages().pdfPreview;
+          _v$5 !== _p$.e && _$setAttribute(_el$30, "data-drawn", _p$.e = _v$5);
+          _v$6 !== _p$.t && _$setProperty(_el$30, "inert", _p$.t = _v$6);
+          _v$7 !== _p$.a && _$setAttribute(_el$30, "src", _p$.a = _v$7);
+          _v$8 !== _p$.o && _$setAttribute(_el$30, "title", _p$.o = _v$8);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$30;
+      })()
+    }), _el$27, _co$9);
+    _$insert(_el$25, _$createComponent(Show, {
+      get when() {
+        return error();
+      },
+      get fallback() {
+        return _$createComponent(Show, {
+          get when() {
+            return status();
+          },
+          children: state => _$createComponent(Placeholder, {
             "class": "k2b-content-pdf-preview__placeholder",
             get state() {
-              return loading() ? "loading" : "empty";
+              return state() === "loading" ? "loading" : "empty";
             },
             get icon() {
-              return loading() ? undefined : "ti ti-file-type-pdf";
+              return state() === "loading" ? undefined : "ti ti-file-type-pdf";
             },
             get title() {
-              return _$memo(() => !!loading())() ? messages().loading : undefined;
+              return _$memo(() => state() === "loading")() ? messages().loading : _$memo(() => state() === "no-viewer")() ? messages().pdfPreviewNoViewer : undefined;
             },
             get description() {
-              return _$memo(() => !!loading())() ? undefined : props.emptyText ?? messages().renderPdfPreview;
+              return _$memo(() => state() === "idle")() ? props.emptyText ?? messages().renderPdfPreview : _$memo(() => state() === "no-viewer")() ? messages().pdfPreviewNoViewerDescription : undefined;
             }
-          });
+          })
+        });
+      },
+      children: message => _$createComponent(Placeholder, {
+        "class": "k2b-content-pdf-preview__placeholder",
+        state: "error",
+        get description() {
+          return message();
         },
-        children: currentUrl => (() => {
-          var _el$25 = _$getNextElement(_tmpl$6);
-          _$use(element => frame = element, _el$25);
-          _$effect(_p$ => {
-            var _v$5 = currentUrl(),
-              _v$6 = props.title ?? messages().pdfPreview;
-            _v$5 !== _p$.e && _$setAttribute(_el$25, "src", _p$.e = _v$5);
-            _v$6 !== _p$.t && _$setAttribute(_el$25, "title", _p$.t = _v$6);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$25;
-        })()
-      });
+        get action() {
+          return (
+            // One retry at a time: the render action moves here only where the toolbar no longer offers it, and the
+            // open action is the retry of a preview that leaves the document to it.
+            _$memo(() => !!(renderable() || openOnly()))() ? undefined : (() => {
+              var _el$31 = _$getNextElement(_tmpl$8);
+              _el$31.$$click = () => void load();
+              _$use(element => errorRetryButton = element, _el$31);
+              _$insert(_el$31, () => props.buttonLabel ?? messages().retry);
+              _$effect(() => _$setProperty(_el$31, "disabled", opening() || props.disabled?.()));
+              _$runHydrationEvents();
+              return _el$31;
+            })()
+          );
+        }
+      })
+    }), _el$29, _co$0);
+    _$effect(() => _$setAttribute(_el$25, "tabindex", status() ? -1 : undefined));
+    return _el$25;
+  })();
+  // A caller's error content replaces the whole viewer, as it brings its own layout.
+  const content = () => _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!props.renderError)() ? error() : null;
     },
-    children: message => props.renderError?.(message()) ?? _$createComponent(Placeholder, {
-      "class": "k2b-content-pdf-preview__placeholder",
-      state: "error",
-      get description() {
-        return message();
-      },
-      get action() {
-        return (
-          // One retry at a time: the render action moves here only where the toolbar no longer offers it.
-          _$memo(() => !!renderable())() ? undefined : (() => {
-            var _el$26 = _$getNextElement(_tmpl$7);
-            _el$26.$$click = () => void load();
-            _$use(element => errorRetryButton = element, _el$26);
-            _$insert(_el$26, () => props.buttonLabel ?? messages().retry);
-            _$effect(() => _$setProperty(_el$26, "disabled", opening() || props.disabled?.()));
-            _$runHydrationEvents();
-            return _el$26;
-          })()
-        );
-      }
-    })
+    get fallback() {
+      return viewerBox();
+    },
+    children: message => props.renderError?.(message())
   });
   if (props.children) return props.children({
     get actions() {
@@ -320,27 +387,27 @@ export default function PdfPreview(props) {
     }
   });
   return (() => {
-    var _el$27 = _$getNextElement(_tmpl$9),
-      _el$28 = _el$27.firstChild,
-      _el$29 = _el$28.firstChild,
-      _el$31 = _el$29.nextSibling,
-      [_el$32, _co$9] = _$getNextMarker(_el$31.nextSibling),
-      _el$33 = _el$28.nextSibling,
-      [_el$34, _co$0] = _$getNextMarker(_el$33.nextSibling);
-    _$insert(_el$29, _$createComponent(Show, {
+    var _el$32 = _$getNextElement(_tmpl$0),
+      _el$33 = _el$32.firstChild,
+      _el$34 = _el$33.firstChild,
+      _el$36 = _el$34.nextSibling,
+      [_el$37, _co$1] = _$getNextMarker(_el$36.nextSibling),
+      _el$38 = _el$33.nextSibling,
+      [_el$39, _co$10] = _$getNextMarker(_el$38.nextSibling);
+    _$insert(_el$34, _$createComponent(Show, {
       get when() {
         return props.title;
       },
       get children() {
-        var _el$30 = _$getNextElement(_tmpl$8);
-        _$insert(_el$30, () => props.title);
-        return _el$30;
+        var _el$35 = _$getNextElement(_tmpl$9);
+        _$insert(_el$35, () => props.title);
+        return _el$35;
       }
     }));
-    _$insert(_el$28, actions, _el$32, _co$9);
-    _$insert(_el$27, content, _el$34, _co$0);
-    _$effect(() => _$className(_el$27, `k2b-content-pdf-preview ${props.class ?? ""}`));
-    return _el$27;
+    _$insert(_el$33, actions, _el$37, _co$1);
+    _$insert(_el$32, content, _el$39, _co$10);
+    _$effect(() => _$className(_el$32, `k2b-content-pdf-preview ${props.class ?? ""}`));
+    return _el$32;
   })();
 }
 _$delegateEvents(["click"]);