@escape-game-over/atlas 0.1.80 → 0.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.80",
+    "version": "0.1.81",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,

package/src/astro/Image.astro

@@ -8,7 +8,15 @@
  *   are made at standard device widths up to the source's own. A lazy image
  *   gets `auto` in front, so browsers that can measure the real width do.
  *
- * `zoom` opens the image larger in a dialog.
+ * `zoom` opens the image larger in a dialog. Its close button shows the `close`
+ * slot, the site's own icon, which `zoom` requires: a text `×` centres by the
+ * font's metrics, not the button's.
+ *
+ * ```astro
+ * <Image src={photo} alt={alt} sizes="33vw" zoom={{ closeLabel: t("close") }}>
+ *     <Icon slot="close" name="lucide:x" />
+ * </Image>
+ * ```
  */
 import { Picture } from "astro:assets";
 import type { ComponentProps } from "astro/types";
@@ -49,6 +57,12 @@ const DEVICE_WIDTHS = [640, 750, 828, 1080, 1280, 1668, 1920, 2048, 2560, 3840];
 const given = Astro.props;
 const { src, alt, priority = false, zoom } = given;
 
+if (zoom !== undefined && !Astro.slots.has("close")) {
+    throw new Error(
+        `Image: "${alt}" zooms but has no close icon. Pass one: <Icon slot="close" …>.`
+    );
+}
+
 const shape =
     given.sizes !== undefined
         ? (() => {
@@ -97,5 +111,9 @@ const picture: ComponentProps<typeof Picture> = {
         closeLabel={zoom.closeLabel}
         class={zoom.class}>
         <Picture {...picture} />
+        <slot
+            name='close'
+            slot='close'
+        />
     </Zoom>
 )}

package/src/astro/Zoom.astro

@@ -2,7 +2,8 @@
 /**
  * Internal to `Image.astro`. No script: `command="show-modal"` opens the dialog
  * and `closedby="any"` lets a click outside close it. The large image is lazy
- * inside a closed dialog, so it is fetched on open.
+ * inside a closed dialog, so it is fetched on open. The close button shows the
+ * `close` slot.
  */
 
 import { getImage } from "astro:assets";
@@ -47,7 +48,7 @@ const id = `atlas-zoom${large.src.replace(/[^\w-]/g, "-")}`;
         command="close"
         aria-label={closeLabel}
     >
-        ×
+        <slot name="close" />
     </button>
     <img
         src={large.src}