astro-image-zoom 0.1.0-beta.0

package/overlay.css

@@ -0,0 +1,512 @@
+/**
+ * Styles of the zoom overlay, applied inside its shadow root: the CSS of the page cannot reach
+ * them, and they cannot leak out. zoom.ts imports this file with ?inline, so Vite hands it over
+ * as a string, minified in production builds. Sites customize the overlay through the --zoom-* custom
+ * properties, which cross the shadow boundary, and through the parts exposed with ::part().
+ *
+ * Lengths are in px, not rem: rem follows the font size of the page's <html>.
+ */
+/*
+ * The host resets every inherited property, so the page cannot change the overlay through
+ * inheritance either. Only the font family comes through: the caption uses the site's font.
+ */
+:host {
+  all: initial;
+  display: contents;
+  font-family: inherit;
+}
+
+/* Overlay container: a modal <dialog>, so it lives in the top layer */
+.astro-image-zoom-overlay {
+  color-scheme: var(--zoom-color-scheme, light dark);
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.astro-image-zoom-overlay[open] {
+  display: flex;
+}
+
+/* Native backdrop - make transparent to use our custom one */
+.astro-image-zoom-overlay::backdrop {
+  background: transparent;
+}
+
+/* Backdrop */
+.astro-image-zoom-backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--zoom-bg, light-dark(rgba(255, 255, 255, 0.98), rgba(0, 0, 0, 0.95)));
+  opacity: 0;
+  will-change: opacity;
+}
+
+/* The slides cover the backdrop, so they show its cursor: default when closing is disabled */
+.astro-image-zoom-overlay[data-close-backdrop="false"] .astro-image-zoom-slide,
+.astro-image-zoom-overlay[data-close-image="false"] .astro-image-zoom-image {
+  cursor: default;
+}
+
+/* Nothing can be swiped or clicked while the overlay closes */
+.astro-image-zoom-overlay.is-closing {
+  pointer-events: none;
+}
+
+.astro-image-zoom-overlay.is-opening .astro-image-zoom-backdrop {
+  animation: astro-image-zoom-backdrop-in var(--zoom-animation-duration, 300ms) ease-out forwards;
+}
+
+.astro-image-zoom-overlay.is-open .astro-image-zoom-backdrop {
+  opacity: 1;
+}
+
+.astro-image-zoom-overlay.is-closing .astro-image-zoom-backdrop {
+  animation: astro-image-zoom-backdrop-out calc(var(--zoom-animation-duration, 300ms) * 0.75) ease-out forwards;
+}
+
+@keyframes astro-image-zoom-backdrop-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes astro-image-zoom-backdrop-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+/* Content container: lets clicks reach the backdrop, interactive children opt back in */
+.astro-image-zoom-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.astro-image-zoom-content>* {
+  pointer-events: auto;
+}
+
+/*
+ * Carousel: one slide per image, scrolled and snapped natively, so touchpad and touch swipes
+ * come with inertia for free. overscroll-behavior-x stops the browser's swipe-back gesture.
+ * The vertical axis stays free: a vertical swipe closes the overlay (closeOnScroll) and the
+ * same gesture, inertia included, must go on scrolling the page. Containing it would hold the
+ * page still until the next gesture.
+ */
+.astro-image-zoom-track {
+  /* Scrolls from left to right whatever the page direction, like the nav buttons */
+  direction: ltr;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  touch-action: pan-x pan-y pinch-zoom;
+  /* The arrows and keys glide to the next slide; swipes keep their own inertia */
+  scroll-behavior: smooth;
+}
+
+/* The track scrolls, so keyboard users can focus it (WCAG 2.1.1); the ring sits inside the edges */
+.astro-image-zoom-track:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -4px;
+}
+
+.astro-image-zoom-track::-webkit-scrollbar {
+  display: none;
+}
+
+.astro-image-zoom-slide {
+  position: relative;
+  flex: 0 0 100%;
+  height: 100%;
+  /* Border box: the padding must not widen the slide, or the carousel loses its step */
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--zoom-padding, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+  scroll-snap-align: center;
+  /* A fast swipe cannot skip images */
+  scroll-snap-stop: always;
+}
+
+/* Image - animated from the thumbnail position */
+.astro-image-zoom-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--zoom-image-radius, 0);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  cursor: zoom-out;
+  transition: opacity 0.15s ease;
+  will-change: transform, opacity;
+}
+
+/* Loading state: after 200ms, the partly loaded image is hidden and the spinner shows */
+.astro-image-zoom-slide.is-loading .astro-image-zoom-image {
+  animation: astro-image-zoom-hide 0s 200ms forwards;
+}
+
+@keyframes astro-image-zoom-hide {
+  to {
+    opacity: 0;
+  }
+}
+
+.astro-image-zoom-slide.is-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 48px;
+  height: 48px;
+  border: 4px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  border-left-color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.9));
+  border-radius: 50%;
+  visibility: hidden;
+  animation:
+    astro-image-zoom-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite,
+    astro-image-zoom-reveal 0s 200ms forwards;
+}
+
+@keyframes astro-image-zoom-reveal {
+  to {
+    visibility: visible;
+  }
+}
+
+@keyframes astro-image-zoom-spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* Opening animation - zoom in from thumbnail */
+.astro-image-zoom-overlay.is-opening .astro-image-zoom-slide.is-active .astro-image-zoom-image {
+  animation: astro-image-zoom-in var(--zoom-animation-duration, 300ms) cubic-bezier(0.2, 0, 0.2, 1) forwards;
+}
+
+/* Closing animation - zoom out to thumbnail */
+.astro-image-zoom-overlay.is-closing .astro-image-zoom-slide.is-active .astro-image-zoom-image {
+  animation: astro-image-zoom-out calc(var(--zoom-animation-duration, 300ms) * 0.75) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/*
+ * Closed by a scroll: the image leaves the dialog for the shadow root, positioned on the page
+ * (zoom.ts sets its box), so it scrolls away with the page while it shrinks to the thumbnail
+ */
+.astro-image-zoom-image.is-detached {
+  position: absolute;
+  z-index: 9999999;
+  margin: 0;
+  animation: astro-image-zoom-out calc(var(--zoom-animation-duration, 300ms) * 0.75) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes astro-image-zoom-in {
+  from {
+    transform: translate(var(--tx-from, 0), var(--ty-from, 0)) scale(var(--scale-from, 0.5));
+    clip-path: var(--clip-from, inset(0));
+  }
+
+  to {
+    transform: translate(0, 0) scale(1);
+    clip-path: var(--clip-to, inset(0));
+  }
+}
+
+@keyframes astro-image-zoom-out {
+  from {
+    transform: translate(0, 0) scale(1);
+    clip-path: var(--clip-to, inset(0));
+  }
+
+  to {
+    transform: translate(var(--tx-from, 0), var(--ty-from, 0)) scale(var(--scale-from, 0.5));
+    clip-path: var(--clip-from, inset(0));
+  }
+}
+
+/*
+ * Bottom stack: the caption and, below it, the navigation bar. Clicks beside them reach the
+ * slides, so they still close the zoom.
+ */
+.astro-image-zoom-bottom {
+  position: fixed;
+  inset-inline: 0;
+  bottom: var(--zoom-controls-offset, 20px);
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding-inline: 16px;
+  pointer-events: none;
+}
+
+.astro-image-zoom-bottom > * {
+  pointer-events: auto;
+}
+
+/* Caption - above the navigation bar, or at the top of the screen; hidden while empty */
+.astro-image-zoom-caption {
+  max-width: var(--zoom-caption-max-width, 70%);
+  margin: 0;
+  padding: 14px 20px;
+  color: var(--zoom-caption-color, #fff);
+  font-family: var(--zoom-caption-font, inherit);
+  font-size: var(--zoom-caption-font-size, 13px);
+  font-weight: 500;
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+  text-align: center;
+  background-color: var(--zoom-caption-bg, rgba(0, 0, 0, 0.9));
+  border-radius: var(--zoom-caption-radius, 6px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  animation: astro-image-zoom-caption-in 0.3s ease 0.1s forwards;
+}
+
+.astro-image-zoom-caption:empty,
+.astro-image-zoom-overlay[data-show-caption="false"] .astro-image-zoom-caption {
+  display: none;
+}
+
+/* At the top, the caption stays clear of the close button in the corner */
+.astro-image-zoom-overlay[data-caption-position="top"] .astro-image-zoom-caption {
+  position: fixed;
+  top: var(--zoom-controls-offset, 20px);
+  inset-inline: 0;
+  width: fit-content;
+  max-width: min(
+    var(--zoom-caption-max-width, 70%),
+    100% - 2 * (var(--zoom-button-size, 44px) + 2 * var(--zoom-controls-offset, 20px))
+  );
+  margin-inline: auto;
+}
+
+@keyframes astro-image-zoom-caption-in {
+  from {
+    opacity: 0;
+    translate: 0 10px;
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+/*
+ * Controls: the close button in the corner, and the navigation bar (previous, counter, next).
+ * Every color, size and shape comes from a --zoom-* variable.
+ */
+.astro-image-zoom-close,
+.astro-image-zoom-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--zoom-button-size, 44px);
+  height: var(--zoom-button-size, 44px);
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--zoom-button-radius, 999px);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.astro-image-zoom-close svg,
+.astro-image-zoom-nav svg {
+  display: block;
+  width: 22px;
+  height: 22px;
+}
+
+.astro-image-zoom-close:focus-visible,
+.astro-image-zoom-nav:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* The surfaces: the close button, the bar, and in "sides" layout each arrow and the counter */
+.astro-image-zoom-close,
+.astro-image-zoom-toolbar,
+.astro-image-zoom-overlay[data-navigation-layout="sides"] :is(.astro-image-zoom-nav, .astro-image-zoom-counter) {
+  border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.14));
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+.astro-image-zoom-close {
+  position: absolute;
+  top: var(--zoom-controls-offset, 20px);
+  right: var(--zoom-controls-offset, 20px);
+  z-index: 11;
+  color: var(--zoom-close-color, light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.92)));
+  background-color: var(--zoom-close-bg, light-dark(rgba(255, 255, 255, 0.9), rgba(30, 30, 32, 0.85)));
+}
+
+.astro-image-zoom-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  color: var(--zoom-nav-color, light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.92)));
+  background-color: var(--zoom-nav-bg, light-dark(rgba(255, 255, 255, 0.9), rgba(30, 30, 32, 0.85)));
+  border-radius: calc(var(--zoom-button-radius, 999px) + 4px);
+}
+
+/* display: flex above would beat the [hidden] of the user agent */
+.astro-image-zoom-toolbar[hidden] {
+  display: none;
+}
+
+/* Hover tints whatever background the button has, so custom colors keep working */
+.astro-image-zoom-close:hover,
+.astro-image-zoom-nav:hover {
+  --astro-image-zoom-tint: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.16));
+  background-image: linear-gradient(var(--astro-image-zoom-tint), var(--astro-image-zoom-tint));
+}
+
+.astro-image-zoom-nav[aria-disabled="true"] {
+  opacity: 0.35;
+  pointer-events: none;
+  cursor: default;
+}
+
+.astro-image-zoom-counter {
+  min-width: 4.5ch;
+  padding-inline: 6px;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.astro-image-zoom-overlay[data-show-counter="false"] .astro-image-zoom-counter {
+  display: none;
+}
+
+/* "sides" layout: the arrows move to the screen edges, the counter stays at the bottom */
+.astro-image-zoom-overlay[data-navigation-layout="sides"] .astro-image-zoom-toolbar {
+  display: contents;
+}
+
+.astro-image-zoom-overlay[data-navigation-layout="sides"] .astro-image-zoom-toolbar[hidden] {
+  display: none;
+}
+
+.astro-image-zoom-overlay[data-navigation-layout="sides"] .astro-image-zoom-nav {
+  position: fixed;
+  top: 50%;
+  translate: 0 -50%;
+  color: var(--zoom-nav-color, light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.92)));
+  background-color: var(--zoom-nav-bg, light-dark(rgba(255, 255, 255, 0.9), rgba(30, 30, 32, 0.85)));
+}
+
+.astro-image-zoom-overlay[data-navigation-layout="sides"] .astro-image-zoom-prev {
+  left: var(--zoom-controls-offset, 20px);
+}
+
+.astro-image-zoom-overlay[data-navigation-layout="sides"] .astro-image-zoom-next {
+  right: var(--zoom-controls-offset, 20px);
+}
+
+.astro-image-zoom-overlay[data-navigation-layout="sides"] .astro-image-zoom-counter {
+  padding: 8px 12px;
+  color: var(--zoom-nav-color, light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.92)));
+  background-color: var(--zoom-nav-bg, light-dark(rgba(255, 255, 255, 0.9), rgba(30, 30, 32, 0.85)));
+  border-radius: var(--zoom-button-radius, 999px);
+}
+
+/* Windows high contrast: the surfaces lose their backgrounds, so they get an outline */
+@media (forced-colors: active) {
+  .astro-image-zoom-close,
+  .astro-image-zoom-toolbar,
+  .astro-image-zoom-caption {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .astro-image-zoom-caption {
+    max-width: var(--zoom-caption-max-width, 90%);
+    padding: 12px 16px;
+  }
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+
+  .astro-image-zoom-overlay,
+  .astro-image-zoom-image {
+    transition: none;
+  }
+
+  /* The zoom animations run in no time: zoom.ts still waits for their end, which comes at once */
+  .astro-image-zoom-backdrop,
+  .astro-image-zoom-image {
+    animation-duration: 0s !important;
+  }
+
+  .astro-image-zoom-track {
+    scroll-behavior: auto;
+  }
+
+  /* The entrance animation is off, so show the caption in its final state */
+  .astro-image-zoom-caption {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* Print - hide zoom */
+@media print {
+  .astro-image-zoom-overlay {
+    display: none !important;
+  }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "astro-image-zoom",
+  "version": "0.1.0-beta.0",
+  "description": "Medium-style image zoom for Astro: accessible, animated from the page, with swipeable galleries",
+  "type": "module",
+  "author": "Antonio (https://antoniohg.com)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antoniohg/astro-image-zoom.git",
+    "directory": "packages/astro-image-zoom"
+  },
+  "homepage": "https://github.com/antoniohg/astro-image-zoom#readme",
+  "bugs": {
+    "url": "https://github.com/antoniohg/astro-image-zoom/issues"
+  },
+  "keywords": [
+    "astro-component",
+    "withastro",
+    "zoom",
+    "image-zoom",
+    "image-gallery",
+    "a11y",
+    "performance"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./ImageZoom.astro": "./ImageZoom.astro",
+    "./zoom.css": "./zoom.css"
+  },
+  "files": [
+    "index.js",
+    "ImageZoom.astro",
+    "zoom.ts",
+    "overlay.css",
+    "env.d.ts",
+    "wrapImages.ts",
+    "zoom.css",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "astro": "^7.3.3"
+  }
+}

package/wrapImages.ts

@@ -0,0 +1,104 @@
+/**
+ * Wraps the images of a rendered HTML string in accessible zoom links.
+ * Runs on the server, so without JavaScript the links still open the full-size image.
+ */
+
+// Comments (skipped) or tags; quoted attribute values may contain ">"
+const TOKEN = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^'">])*)>/g;
+const ATTRIBUTE = /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+
+type Attributes = Map<string, string>;
+
+function parseAttributes(source: string): Attributes {
+  const attributes: Attributes = new Map();
+  for (const [, name, double, single, bare] of source.matchAll(ATTRIBUTE)) {
+    // First occurrence wins, like in a browser
+    const key = name.toLowerCase();
+    if (!attributes.has(key)) attributes.set(key, double ?? single ?? bare ?? '');
+  }
+  return attributes;
+}
+
+// Values keep their original entities; only the quote that delimits the new attribute needs escaping
+const escapeQuotes = (value: string): string => value.replaceAll('"', '&quot;');
+
+// The image URL becomes a link href, so only schemes that cannot run code are allowed:
+// relative URLs, http(s), blob: and data:image/. javascript:, vbscript: and the like are dropped.
+function isSafeUrl(url: string): boolean {
+  try {
+    // The URL parser strips the whitespace and control characters browsers ignore in schemes
+    const { protocol } = new URL(url, 'https://astro-image-zoom.invalid/');
+    if (protocol === 'data:') return /^[\s\0-\x1f]*data:image\//i.test(url);
+    return protocol === 'http:' || protocol === 'https:' || protocol === 'blob:';
+  } catch {
+    return false;
+  }
+}
+
+// The zoom URL of an image: data-zoom-src wins over src, and unsafe URLs are ignored
+const getSource = (image: Attributes): string | undefined => {
+  const src = image.get('data-zoom-src') || image.get('src');
+  return src && isSafeUrl(src) ? src : undefined;
+};
+
+// The link is named after the image so screen readers announce what opens
+function wrap(html: string, image: Attributes): string {
+  const src = getSource(image);
+  if (!src) return html;
+
+  const caption = image.get('data-zoom-caption');
+  const alt = image.get('alt');
+
+  const captionAttribute = caption ? ` data-zoom-caption="${escapeQuotes(caption)}"` : '';
+  const label = alt ? `Enlarge image: ${alt}` : 'Enlarge image';
+
+  return `<a href="${escapeQuotes(src)}" data-zoom-generated${captionAttribute} aria-label="${escapeQuotes(label)}">${html}</a>`;
+}
+
+export function wrapImages(html: string): string {
+  let output = '';
+  let cursor = 0;
+  let anchorDepth = 0;
+  // A <picture> is wrapped as a whole: <a> is not valid inside it
+  let picture: { start: number; image?: Attributes } | null = null;
+
+  for (const match of html.matchAll(TOKEN)) {
+    const [tag, closing, rawName, rawAttributes] = match;
+    if (!rawName) continue; // comment
+
+    const name = rawName.toLowerCase();
+    const start = match.index;
+    const end = start + tag.length;
+
+    if (name === 'a') {
+      anchorDepth = Math.max(0, anchorDepth + (closing ? -1 : 1));
+      continue;
+    }
+
+    // Images that already live inside a link are left alone
+    if (anchorDepth > 0) continue;
+
+    if (name === 'picture') {
+      if (!closing) {
+        picture = { start };
+      } else if (picture) {
+        const { start: pictureStart, image } = picture;
+        picture = null;
+        if (image && getSource(image)) {
+          output += html.slice(cursor, pictureStart) + wrap(html.slice(pictureStart, end), image);
+          cursor = end;
+        }
+      }
+    } else if (name === 'img' && !closing) {
+      const image = parseAttributes(rawAttributes);
+      if (picture) {
+        picture.image ??= image;
+      } else if (getSource(image)) {
+        output += html.slice(cursor, start) + wrap(tag, image);
+        cursor = end;
+      }
+    }
+  }
+
+  return output + html.slice(cursor);
+}

package/zoom.css

@@ -0,0 +1,36 @@
+/*
+ * astro-image-zoom page styles: the images on the page, not the zoom overlay.
+ *
+ * The overlay lives in a shadow root and brings its own styles (overlay.css), so no CSS of
+ * the page can reach it. Style it with the --zoom-* custom properties or with ::part().
+ *
+ * These page styles live in the `astro-image-zoom` cascade layer, so any unlayered CSS on the page
+ * overrides them without specificity fights. To control their priority among your own layers,
+ * name the layer in your layer order, e.g. `@layer reset, astro-image-zoom, components;`.
+ */
+@layer astro-image-zoom {
+  /* The element only groups its content, it must not add a box */
+  astro-image-zoom {
+    display: contents;
+  }
+
+  /* Links wrapping images: the image is the click target */
+  .astro-image-zoom-wrapper a img {
+    cursor: zoom-in;
+  }
+
+  /*
+   * Focus ring on the image, not on the generated link: the link is inline, so when the image
+   * is display: block its outline does not wrap the image. Customize it with
+   * --zoom-focus-outline and --zoom-focus-offset (a negative offset draws it inside the image,
+   * useful when a parent with overflow: hidden would clip it).
+   */
+  .astro-image-zoom-wrapper a[data-zoom-generated]:focus-visible {
+    outline: none;
+
+    img {
+      outline: var(--zoom-focus-outline, 2px solid currentColor);
+      outline-offset: var(--zoom-focus-offset, 3px);
+    }
+  }
+}