kuinetic 0.2.3 → 0.2.4

package/dist/kuinetic.css

@@ -1600,6 +1600,12 @@
   html[data-kui-cloak] :is([data-kui~=bounce-in-up], [data-kui~="bounce-in-up,"], [data-kui~=",bounce-in-up"], [data-kui~=",bounce-in-up,"]):not([data-kui-state]),
   html[data-kui-cloak] :is([data-kui~=card-flip-x], [data-kui~="card-flip-x,"], [data-kui~=",card-flip-x"], [data-kui~=",card-flip-x,"]):not([data-kui-state]),
   html[data-kui-cloak] :is([data-kui~=card-flip-y], [data-kui~="card-flip-y,"], [data-kui~=",card-flip-y"], [data-kui~=",card-flip-y,"]):not([data-kui-state]),
+  html[data-kui-cloak] :is([data-kui~=carousel-3d], [data-kui~="carousel-3d,"], [data-kui~=",carousel-3d"], [data-kui~=",carousel-3d,"]):not([data-kui-state]),
+  html[data-kui-cloak] :is([data-kui~=carousel-3d-high], [data-kui~="carousel-3d-high,"], [data-kui~=",carousel-3d-high"], [data-kui~=",carousel-3d-high,"]):not([data-kui-state]),
+  html[data-kui-cloak] :is([data-kui~=carousel-3d-inside], [data-kui~="carousel-3d-inside,"], [data-kui~=",carousel-3d-inside"], [data-kui~=",carousel-3d-inside,"]):not([data-kui-state]),
+  html[data-kui-cloak] :is([data-kui~=carousel-3d-low], [data-kui~="carousel-3d-low,"], [data-kui~=",carousel-3d-low"], [data-kui~=",carousel-3d-low,"]):not([data-kui-state]),
+  html[data-kui-cloak] :is([data-kui~=carousel-orbit], [data-kui~="carousel-orbit,"], [data-kui~=",carousel-orbit"], [data-kui~=",carousel-orbit,"]):not([data-kui-state]),
+  html[data-kui-cloak] :is([data-kui~=carousel-stack], [data-kui~="carousel-stack,"], [data-kui~=",carousel-stack"], [data-kui~=",carousel-stack,"]):not([data-kui-state]),
   html[data-kui-cloak] :is([data-kui~=chart-bar-grow], [data-kui~="chart-bar-grow,"], [data-kui~=",chart-bar-grow"], [data-kui~=",chart-bar-grow,"]):not([data-kui-state]),
   html[data-kui-cloak] :is([data-kui~=curtain-reveal], [data-kui~="curtain-reveal,"], [data-kui~=",curtain-reveal"], [data-kui~=",curtain-reveal,"]):not([data-kui-state]),
   html[data-kui-cloak] :is([data-kui~=fade-blur-in], [data-kui~="fade-blur-in,"], [data-kui~=",fade-blur-in"], [data-kui~=",fade-blur-in,"]):not([data-kui-state]),
@@ -1663,6 +1669,12 @@
     html[data-kui-cloak] :is([data-kui~=bounce-in-up], [data-kui~="bounce-in-up,"], [data-kui~=",bounce-in-up"], [data-kui~=",bounce-in-up,"]):not([data-kui-state]),
     html[data-kui-cloak] :is([data-kui~=card-flip-x], [data-kui~="card-flip-x,"], [data-kui~=",card-flip-x"], [data-kui~=",card-flip-x,"]):not([data-kui-state]),
     html[data-kui-cloak] :is([data-kui~=card-flip-y], [data-kui~="card-flip-y,"], [data-kui~=",card-flip-y"], [data-kui~=",card-flip-y,"]):not([data-kui-state]),
+    html[data-kui-cloak] :is([data-kui~=carousel-3d], [data-kui~="carousel-3d,"], [data-kui~=",carousel-3d"], [data-kui~=",carousel-3d,"]):not([data-kui-state]),
+    html[data-kui-cloak] :is([data-kui~=carousel-3d-high], [data-kui~="carousel-3d-high,"], [data-kui~=",carousel-3d-high"], [data-kui~=",carousel-3d-high,"]):not([data-kui-state]),
+    html[data-kui-cloak] :is([data-kui~=carousel-3d-inside], [data-kui~="carousel-3d-inside,"], [data-kui~=",carousel-3d-inside"], [data-kui~=",carousel-3d-inside,"]):not([data-kui-state]),
+    html[data-kui-cloak] :is([data-kui~=carousel-3d-low], [data-kui~="carousel-3d-low,"], [data-kui~=",carousel-3d-low"], [data-kui~=",carousel-3d-low,"]):not([data-kui-state]),
+    html[data-kui-cloak] :is([data-kui~=carousel-orbit], [data-kui~="carousel-orbit,"], [data-kui~=",carousel-orbit"], [data-kui~=",carousel-orbit,"]):not([data-kui-state]),
+    html[data-kui-cloak] :is([data-kui~=carousel-stack], [data-kui~="carousel-stack,"], [data-kui~=",carousel-stack"], [data-kui~=",carousel-stack,"]):not([data-kui-state]),
     html[data-kui-cloak] :is([data-kui~=chart-bar-grow], [data-kui~="chart-bar-grow,"], [data-kui~=",chart-bar-grow"], [data-kui~=",chart-bar-grow,"]):not([data-kui-state]),
     html[data-kui-cloak] :is([data-kui~=curtain-reveal], [data-kui~="curtain-reveal,"], [data-kui~=",curtain-reveal"], [data-kui~=",curtain-reveal,"]):not([data-kui-state]),
     html[data-kui-cloak] :is([data-kui~=fade-blur-in], [data-kui~="fade-blur-in,"], [data-kui~=",fade-blur-in"], [data-kui~=",fade-blur-in,"]):not([data-kui-state]),
@@ -6222,7 +6234,11 @@
     box-sizing: border-box;
     margin: 0;
     border: 0;
-    padding: clamp(1rem, 4vw, 3rem);
+    --kui-lightbox-pad: clamp(1rem, 4vw, 3rem);
+    --kui-lightbox-edge: clamp(0.75rem, 2vw, 1.25rem);
+    --kui-lightbox-arrow-size: 44px;
+    --kui-lightbox-nav-room: max(0px, calc(var(--kui-lightbox-edge) + var(--kui-lightbox-arrow-size) + 0.5rem - var(--kui-lightbox-pad)));
+    padding: var(--kui-lightbox-pad);
     overflow: auto;
     overscroll-behavior: contain;
     display: grid;
@@ -6323,8 +6339,8 @@
   }
   .kui-lightbox-close {
     position: fixed;
-    inset-block-start: clamp(0.75rem, 2vw, 1.25rem);
-    inset-inline-end: clamp(0.75rem, 2vw, 1.25rem);
+    inset-block-start: calc(var(--kui-lightbox-edge) + env(safe-area-inset-top, 0px));
+    inset-inline-end: calc(var(--kui-lightbox-edge) + env(safe-area-inset-right, 0px));
     z-index: 1;
     inline-size: 40px;
     block-size: 40px;
@@ -6332,17 +6348,90 @@
   }
   .kui-lightbox-prev,
   .kui-lightbox-next {
+    display: grid;
+    place-items: center;
+    padding: 0;
+    inline-size: var(--kui-lightbox-arrow-size);
+    block-size: var(--kui-lightbox-arrow-size);
+    border-color: rgb(255 255 255 / 0.18);
+    color: var(--kui-lightbox-arrow-fg, #e4f222);
+    background: var(--kui-lightbox-arrow-bg, #000);
+    transition: transform 160ms ease;
+  }
+  .kui-lightbox-prev svg,
+  .kui-lightbox-next svg {
+    inline-size: 22px;
+    block-size: 22px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .kui-lightbox-prev:hover,
+  .kui-lightbox-next:hover {
+    transform: scale(1.08);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kui-lightbox-prev,
+    .kui-lightbox-next {
+      transition: none;
+    }
+  }
+  .kui-lightbox-nav {
     position: fixed;
-    inset-block-start: 50%;
-    inline-size: 40px;
-    block-size: 40px;
-    font-size: 2rem;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    direction: ltr;
+    gap: var(--kui-lightbox-arrow-gap, 0.5rem);
+    inset: var(--kui-lightbox-nav-top, auto) var(--kui-lightbox-nav-right, auto) var(--kui-lightbox-nav-bottom, auto) var(--kui-lightbox-nav-left, auto);
   }
-  .kui-lightbox-prev {
-    inset-inline-start: 0.75rem;
+  .kui-lightbox-nav--bottom-right {
+    bottom: var(--kui-lightbox-nav-bottom, calc(var(--kui-lightbox-edge) + env(safe-area-inset-bottom, 0px)));
+    right: var(--kui-lightbox-nav-right, calc(var(--kui-lightbox-edge) + env(safe-area-inset-right, 0px)));
   }
-  .kui-lightbox-next {
-    inset-inline-end: 0.75rem;
+  .kui-lightbox-nav--bottom-left {
+    bottom: var(--kui-lightbox-nav-bottom, calc(var(--kui-lightbox-edge) + env(safe-area-inset-bottom, 0px)));
+    left: var(--kui-lightbox-nav-left, calc(var(--kui-lightbox-edge) + env(safe-area-inset-left, 0px)));
+  }
+  .kui-lightbox-nav--bottom {
+    bottom: var(--kui-lightbox-nav-bottom, calc(var(--kui-lightbox-edge) + env(safe-area-inset-bottom, 0px)));
+    left: 50%;
+    translate: -50% 0;
+  }
+  .kui-lightbox-nav--bottom-apart {
+    bottom: var(--kui-lightbox-nav-bottom, calc(var(--kui-lightbox-edge) + env(safe-area-inset-bottom, 0px)));
+    left: var(--kui-lightbox-nav-left, calc(var(--kui-lightbox-edge) + env(safe-area-inset-left, 0px)));
+    right: var(--kui-lightbox-nav-right, calc(var(--kui-lightbox-edge) + env(safe-area-inset-right, 0px)));
+    justify-content: space-between;
+    pointer-events: none;
+  }
+  .kui-lightbox-nav--top-left {
+    top: var(--kui-lightbox-nav-top, calc(var(--kui-lightbox-edge) + env(safe-area-inset-top, 0px) - 2px));
+    left: var(--kui-lightbox-nav-left, calc(var(--kui-lightbox-edge) + env(safe-area-inset-left, 0px)));
+  }
+  .kui-lightbox-nav--top-right {
+    top: var(--kui-lightbox-nav-top, calc(var(--kui-lightbox-edge) + env(safe-area-inset-top, 0px) - 2px));
+    right: var(--kui-lightbox-nav-right, calc(var(--kui-lightbox-edge) + env(safe-area-inset-right, 0px) + 40px + 0.5rem));
+  }
+  .kui-lightbox-nav--sides {
+    top: 50%;
+    translate: 0 -50%;
+    left: var(--kui-lightbox-nav-left, calc(var(--kui-lightbox-edge) + env(safe-area-inset-left, 0px)));
+    right: var(--kui-lightbox-nav-right, calc(var(--kui-lightbox-edge) + env(safe-area-inset-right, 0px)));
+    justify-content: space-between;
+    pointer-events: none;
+  }
+  .kui-lightbox-nav--bottom-apart > button,
+  .kui-lightbox-nav--sides > button {
+    pointer-events: auto;
+  }
+  .kui-lightbox-gallery:has(> [class*=kui-lightbox-nav--bottom]) {
+    padding-block-end: calc(var(--kui-lightbox-nav-room) + env(safe-area-inset-bottom, 0px));
+  }
+  .kui-lightbox-gallery:has(> [class*=kui-lightbox-nav--top]) {
+    padding-block-start: calc(var(--kui-lightbox-nav-room) + env(safe-area-inset-top, 0px));
   }
   .kui-lightbox-counter {
     font-size: 0.85rem;

package/dist/kuinetic.js

@@ -15117,7 +15117,8 @@ var kuinetic = (() => {
       name: "carousel-stack",
       primitive: "spatial-stack",
       requiresOwnSubtree: true,
-      phase: "idle"
+      phase: "idle",
+      cloak: true
     }
   ];
 
@@ -15343,21 +15344,24 @@ var kuinetic = (() => {
       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
@@ -15372,7 +15376,8 @@ var kuinetic = (() => {
       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
@@ -15393,7 +15398,8 @@ var kuinetic = (() => {
       primitive: "spatial-ring",
       params: { plane: "screen", facing: "camera" },
       requiresOwnSubtree: true,
-      phase: "idle"
+      phase: "idle",
+      cloak: true
     }
   ];
   function registerCarousel(registry) {
@@ -16174,7 +16180,14 @@ var kuinetic = (() => {
     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];
@@ -16389,6 +16402,17 @@ var kuinetic = (() => {
     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");
@@ -16405,8 +16429,8 @@ var kuinetic = (() => {
     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}`);
@@ -16426,7 +16450,11 @@ var kuinetic = (() => {
       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));
     }
@@ -16440,8 +16468,9 @@ var kuinetic = (() => {
       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);
@@ -16507,7 +16536,9 @@ var kuinetic = (() => {
       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) => {
@@ -16570,7 +16601,13 @@ var kuinetic = (() => {
     };
     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,