kuinetic 0.2.3 → 0.2.4

package/dist/esm/{chunk-FYMZW5N2.mjs → chunk-EHS45PIK.mjs}

@@ -8374,7 +8374,8 @@ var STACK_PRESETS = [
     name: "carousel-stack",
     primitive: "spatial-stack",
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   }
 ];
 
@@ -8600,21 +8601,24 @@ var CAROUSEL_PRESETS = [
     primitive: "spatial-ring",
     params: { tilt: "12deg" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   },
   {
     name: "carousel-3d-high",
     primitive: "spatial-ring",
     params: { tilt: "30deg", perspective: "1200px" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   },
   {
     name: "carousel-3d-low",
     primitive: "spatial-ring",
     params: { tilt: "-18deg", perspective: "1800px" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   },
   /*
    * The concave name. `arc:120deg` is the default the outside names cannot want and this one cannot
@@ -8629,7 +8633,8 @@ var CAROUSEL_PRESETS = [
     primitive: "spatial-ring",
     params: { arc: "120deg", facing: "camera", perspective: "900px" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   },
   /*
    * The flat ring: cards on a clock face around whatever sits in the middle of the host (a word, a
@@ -8650,7 +8655,8 @@ var CAROUSEL_PRESETS = [
     primitive: "spatial-ring",
     params: { plane: "screen", facing: "camera" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   }
 ];
 function registerCarousel(registry) {
@@ -9431,7 +9437,14 @@ var paramsSchema = {
   ease: { type: "easing", default: DEFAULT_EASE, cssProperty: "--kui-lightbox-ease" },
   loop: { type: "keyword", default: "true", cssProperty: "--kui-lightbox-loop", keywords: ["true", "false"] },
   aspect: { type: "keyword", default: "", cssProperty: "--kui-lightbox-aspect", keywords: ["wide", "tall", "square"] },
-  caption: { type: "keyword", default: "figcaption", cssProperty: "--kui-lightbox-caption", keywords: ["figcaption", "alt", "title", "none"] }
+  caption: { type: "keyword", default: "figcaption", cssProperty: "--kui-lightbox-caption", keywords: ["figcaption", "alt", "title", "none"] },
+  arrows: {
+    type: "keyword",
+    default: "bottom-right",
+    cssProperty: "--kui-lightbox-arrows",
+    keywords: ["bottom-right", "bottom-left", "bottom", "bottom-apart", "top-right", "top-left", "sides"]
+  },
+  "arrow-gap": { type: "length", default: "", cssProperty: "--kui-lightbox-arrow-gap" }
 };
 function defaultTargets(el, media) {
   if (el.matches("a[href]") || media !== "video" && el.matches("img")) return [el];
@@ -9646,6 +9659,17 @@ function vocabulary(items) {
   if (kinds.size > 1) return { noun: "item", label: "Media viewer" };
   return kinds.has("video") ? { noun: "video", label: "Video viewer" } : { noun: "image", label: "Image viewer" };
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+function chevron(doc, path2) {
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const stroke = doc.createElementNS(SVG_NS, "path");
+  stroke.setAttribute("d", path2);
+  svg.append(stroke);
+  return svg;
+}
 function galleryContent(items, initial, options) {
   const doc = items[initial].trigger.ownerDocument;
   const box = doc.createElement("div");
@@ -9662,8 +9686,8 @@ function galleryContent(items, initial, options) {
   const previous = doc.createElement("button");
   const next = doc.createElement("button");
   previous.type = next.type = "button";
-  previous.textContent = "\u2039";
-  next.textContent = "\u203A";
+  previous.append(chevron(doc, "M15 5l-7 7 7 7"));
+  next.append(chevron(doc, "M9 5l7 7-7 7"));
   const { noun, label } = vocabulary(items);
   previous.setAttribute("aria-label", `Previous ${noun}`);
   next.setAttribute("aria-label", `Next ${noun}`);
@@ -9683,7 +9707,11 @@ function galleryContent(items, initial, options) {
     players: /* @__PURE__ */ new Map()
   };
   if (items.length > 1) {
-    box.append(previous, next, counter);
+    const nav = doc.createElement("div");
+    nav.className = `kui-lightbox-nav kui-lightbox-nav--${options.arrows}`;
+    if (options.arrowGap) nav.style.setProperty("--kui-lightbox-arrow-gap", options.arrowGap);
+    nav.append(previous, next);
+    box.append(nav, counter);
     previous.addEventListener("click", () => clickGallery(state, -1, previous));
     next.addEventListener("click", () => clickGallery(state, 1, next));
   }
@@ -9697,8 +9725,9 @@ function galleryContent(items, initial, options) {
     reducedMotion,
     node: box,
     label,
-    // The media and the controls keep the viewer open; the empty figure around them closes it.
-    inside: (target) => box.contains(target) && target.closest("img, video, iframe, button") !== null,
+    // The media and the controls (the arrow group included, so a click in the gap between the
+    // arrows is not a close) keep the viewer open; the empty figure around them closes it.
+    inside: (target) => box.contains(target) && target.closest("img, video, iframe, button, .kui-lightbox-nav") !== null,
     onClose: () => {
       unswipe?.();
       closeViewer(state);
@@ -9764,7 +9793,9 @@ function attachDeckLightbox(request) {
     ease: DEFAULT_EASE,
     reducedMotion,
     loop: true,
-    aspect: ""
+    aspect: "",
+    arrows: "bottom-right",
+    arrowGap: ""
   };
   const turnedAway = (card) => card.getAttribute("data-kui-ring-face") === "back";
   const openAt2 = (pick, faceChecked = false) => {
@@ -9827,7 +9858,13 @@ function prepareLightbox(el, params, ctx) {
   };
   const controller = new AbortController();
   const shell = acquireModalShell(ctx.doc);
-  const options = { ...modalOptions(params, ctx), loop: params.is("loop"), aspect: params.text("aspect") };
+  const options = {
+    ...modalOptions(params, ctx),
+    loop: params.is("loop"),
+    aspect: params.text("aspect"),
+    arrows: params.text("arrows", "bottom-right"),
+    arrowGap: params.text("arrow-gap")
+  };
   const restore = wireTriggers(triggers, {
     shell,
     options,

package/dist/esm/effects/index.mjs

@@ -17,7 +17,7 @@ import {
   registerThreeD,
   registerTween,
   registerViewTransitions
-} from "../chunk-FYMZW5N2.mjs";
+} from "../chunk-EHS45PIK.mjs";
 import "../chunk-FASAEQDR.mjs";
 import "../chunk-AEQGC2KM.mjs";
 export {

package/dist/esm/index.mjs

@@ -17,7 +17,7 @@ import {
   PRESETS,
   PRIMITIVES,
   createRegistry
-} from "./chunk-FYMZW5N2.mjs";
+} from "./chunk-EHS45PIK.mjs";
 import {
   ATTR,
   CHANNEL,

package/dist/esm/notes/index.mjs

@@ -795,6 +795,14 @@ var SHOWCASE_NOTES = {
     whenOmitted: "Tall for a YouTube Shorts link, wide for every other video."
   },
   "lightbox.caption": "Where the line under each item comes from, or none to hide it.",
+  "lightbox.arrows": {
+    why: "Where the previous and next arrows sit: a corner, top or bottom, apart, or on the sides.",
+    whenOmitted: "Bottom right, side by side, clear of the picture."
+  },
+  "lightbox.arrow-gap": {
+    why: "The space between the two arrows when they sit together.",
+    whenOmitted: "Half a line of space."
+  },
   "scroll-story.target": {
     why: "Which elements are the pictures or clips that change as you scroll.",
     whenOmitted: "Uses the children of its first child."