@nordwerk/scroll-carousel 0.1.0

package/dist/shared/chunk-3THCBXDW.js

@@ -0,0 +1,78 @@
+// src/math.ts
+var EPS = 2;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var closest = (values, target) => {
+  let best = 0;
+  for (let i = 1; i < values.length; i++) {
+    if (Math.abs(values[i] - target) < Math.abs(values[best] - target) - 0.5) best = i;
+  }
+  return best;
+};
+var snapPositions = ({ starts, sizes, port, padStart, padEnd, max, align }) => starts.map(
+  (start, i) => clamp(
+    align === "center" ? start + sizes[i] / 2 - padStart - (port - padStart - padEnd) / 2 : align === "end" ? start + sizes[i] - port + padEnd : start - padStart,
+    0,
+    max
+  )
+);
+var pageStarts = (geo, snaps, group, anchor) => {
+  const count = snaps.length;
+  const firsts = /* @__PURE__ */ new Set([0, anchor]);
+  if (group === "page") {
+    const fits = (from, last) => geo.starts[last] + geo.sizes[last] <= snaps[from] + geo.port - geo.padEnd + EPS;
+    for (let i = anchor; i < count && snaps[i] < geo.max - EPS; ) {
+      let next = i + 1;
+      while (next < count && fits(i, next)) next++;
+      if (next >= count) break;
+      firsts.add(i = next);
+    }
+    for (let i = anchor; i > 0; ) {
+      let first = i - 1;
+      while (first > 0 && fits(first - 1, i - 1)) first--;
+      firsts.add(i = first);
+    }
+  } else {
+    for (let i = anchor % group; i < count; i += group) firsts.add(i);
+  }
+  return [...firsts].filter((i) => i >= 0 && i < count).sort((a, b) => a - b);
+};
+var buildPages = (geo, snaps, group, anchor) => {
+  const pages = [];
+  const add = (pos) => {
+    const first = snaps.findIndex((snap) => snap >= pos - EPS);
+    pages.push({ pos, first: first < 0 ? snaps.length - 1 : first });
+  };
+  for (const start of pageStarts(geo, snaps, group, anchor)) {
+    if (!pages.length || snaps[start] > pages[pages.length - 1].pos + EPS) add(snaps[start]);
+  }
+  if (pages.length && pages[pages.length - 1].pos < geo.max - EPS) add(geo.max);
+  return pages;
+};
+var pageOf = (pages, index) => {
+  let page = 0;
+  pages.forEach((candidate, i) => {
+    if (candidate.first <= index) page = i;
+  });
+  return page;
+};
+var visibleRange = (pos, { starts, sizes, port }) => {
+  let first = -1;
+  let last = -1;
+  starts.forEach((start, i) => {
+    if (Math.min(start + sizes[i], pos + port) - Math.max(start, pos) >= sizes[i] / 2 - 0.5) {
+      if (first < 0) first = i;
+      last = i;
+    }
+  });
+  return [first, last];
+};
+
+export {
+  EPS,
+  clamp,
+  closest,
+  snapPositions,
+  buildPages,
+  pageOf,
+  visibleRange
+};

package/dist/shared/chunk-5Q4YPVNK.js

@@ -0,0 +1,109 @@
+import {
+  attach
+} from "./chunk-HPGJKTV5.js";
+import {
+  PRE_POSITION,
+  baseVars,
+  responsiveCss
+} from "./chunk-I4ZMRKZV.js";
+
+// src/adapter.ts
+var chevron = (h, path) => h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { d: path }));
+function createAdapter(framework) {
+  const { createElement: h, Fragment, useState, useRef, useEffect, useLayoutEffect, useId, toChildArray } = framework;
+  const useBeforePaint = typeof window == "undefined" ? useEffect : useLayoutEffect;
+  function useCarousel(options = {}) {
+    const ref = useRef(null);
+    const latest = useRef(options);
+    latest.current = options;
+    const [carousel, setCarousel] = useState(null);
+    const [state, setState] = useState(null);
+    useBeforePaint(() => {
+      if (!ref.current) return;
+      const instance = attach(ref.current, {
+        ...latest.current,
+        onChange: (next) => {
+          setState(next);
+          latest.current.onChange?.(next);
+        }
+      });
+      setCarousel(instance);
+      setState(instance.state);
+      return () => {
+        instance.destroy();
+        setCarousel(null);
+      };
+    }, []);
+    return { ref, carousel, state };
+  }
+  function Carousel(props) {
+    const id = useId();
+    const { as = "div", label, children, className, style, slideClassName, slideRoles, centerFew } = props;
+    const { arrows = true, dots = true, playButton, labels = {}, initial = 0, carouselRef } = props;
+    const { ref, carousel } = useCarousel({
+      group: typeof props.group == "object" ? void 0 : props.group,
+      initial,
+      rewind: props.rewind,
+      labels,
+      plugins: props.plugins,
+      onChange: props.onChange
+    });
+    const handoff = useRef(carouselRef);
+    handoff.current = carouselRef;
+    useEffect(() => {
+      if (!carousel) return;
+      handoff.current?.(carousel);
+      return () => handoff.current?.(null);
+    }, [carousel]);
+    const slides = toChildArray(children);
+    const item = as == "ul" ? "li" : "div";
+    const css = responsiveCss(id, props);
+    const root = h(
+      "div",
+      {
+        ref,
+        className: ["sc", centerFew && "sc--center-few", className].filter(Boolean).join(" "),
+        "data-sc-id": id,
+        style: { ...baseVars(props), ...style }
+      },
+      // Raw, not as a text child: renderers may escape text inside <style>, which breaks the selectors.
+      css && h("style", { dangerouslySetInnerHTML: { __html: css } }),
+      h(
+        as,
+        { className: "sc-track", "data-sc-track": "", tabIndex: 0, "aria-label": label },
+        slides.map(
+          (child, i) => h(
+            item,
+            {
+              key: child?.key ?? i,
+              className: slideClassName,
+              "data-sc-initial": i == initial && i > 0 ? "" : void 0,
+              ...slideRoles && { role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${slides.length}` }
+            },
+            child
+          )
+        )
+      ),
+      arrows && h(
+        Fragment,
+        null,
+        h("button", { type: "button", className: "sc-nav sc-prev", "data-sc-prev": "", "aria-label": labels.prev || "Previous" }, chevron(h, "m15 18-6-6 6-6")),
+        h("button", { type: "button", className: "sc-nav sc-next", "data-sc-next": "", "aria-label": labels.next || "Next" }, chevron(h, "m9 6 6 6-6 6"))
+      ),
+      playButton && h(
+        "button",
+        { type: "button", className: "sc-play", "data-sc-play": "", "aria-label": "Stop automatic scrolling" },
+        h("svg", { className: "sc-icon-play", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M8 5v14l11-7z" })),
+        h("svg", { className: "sc-icon-pause", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" }))
+      ),
+      dots && h("div", { className: "sc-dots", "data-sc-dots": "" }),
+      h("p", { className: "sc-status", "data-sc-status": "", "aria-live": "polite" })
+    );
+    return initial > 0 ? h(Fragment, null, root, h("script", { dangerouslySetInnerHTML: { __html: PRE_POSITION } })) : root;
+  }
+  return { Carousel, useCarousel };
+}
+
+export {
+  createAdapter
+};

package/dist/shared/chunk-HPGJKTV5.js

@@ -0,0 +1,377 @@
+import {
+  EPS,
+  buildPages,
+  clamp,
+  closest,
+  pageOf,
+  snapPositions,
+  visibleRange
+} from "./chunk-3THCBXDW.js";
+
+// src/index.ts
+var LABELS = {
+  page: (n, count) => `Page ${n} of ${count}`,
+  status: (first, last, count) => first === last ? `Item ${first} of ${count}` : `Items ${first} to ${last} of ${count}`
+};
+var px = (value) => parseFloat(value) || 0;
+var lengthIn = (value, whole) => value.trim().endsWith("%") ? px(value) * whole / 100 : px(value);
+var instances = /* @__PURE__ */ new WeakMap();
+var getCarousel = (root) => instances.get(root);
+function attach(root, options = {}) {
+  const existing = instances.get(root);
+  if (existing) return existing;
+  const track = root.querySelector("[data-sc-track]");
+  const part = (name) => options[name] || root.querySelector(`[data-sc-${name}]`);
+  const prevButton = part("prev");
+  const nextButton = part("next");
+  const dots = part("dots");
+  const status = part("status");
+  const labels = { ...LABELS, ...options.labels };
+  const rewind = options.rewind === true ? "fade" : options.rewind || false;
+  const motion = matchMedia("(prefers-reduced-motion: reduce)");
+  const tabIndex = track.getAttribute("tabindex");
+  const listeners = new AbortController();
+  const listen = (target2, type, handler, opts) => target2?.addEventListener(type, handler, { signal: listeners.signal, ...opts });
+  const hooks = { control: [], settle: [], measure: [] };
+  const run = (name) => hooks[name].forEach((handler) => handler());
+  let slides = [...track.children];
+  const marked = slides.findIndex((slide) => slide.hasAttribute("data-sc-initial"));
+  let anchor = Math.max(0, options.initial ?? marked);
+  const anchorSlide = slides[anchor];
+  let needsInitial = anchor > 0;
+  let geo = { starts: [], sizes: [], port: 0, padStart: 0, padEnd: 0, max: 0, align: "start" };
+  let snaps = [];
+  let pages = [];
+  let snap = "mandatory";
+  let rtl = false;
+  let pos = 0;
+  let target = -1;
+  let scrolling = false;
+  let touching = false;
+  let busy = false;
+  let quiet = false;
+  let state;
+  let settled;
+  let frame = 0;
+  let measureFrame = 0;
+  let settleTimer = 0;
+  let fadeTimer = 0;
+  const readPos = () => Math.abs(track.scrollLeft);
+  const positions = () => pages.map((page) => page.pos);
+  const moveTo = (position, behavior) => track.scrollTo({ left: rtl ? -position : position, behavior });
+  function measure() {
+    slides = [...track.children];
+    const style = getComputedStyle(track);
+    rtl = style.direction == "rtl";
+    const configured = String(options.group ?? style.getPropertyValue("--sc-group")).trim();
+    const group = configured == "page" ? "page" : Math.max(1, parseInt(configured) || 1);
+    if (!track.hasAttribute("data-sc-dragging")) {
+      const type = style.scrollSnapType;
+      snap = type == "none" ? "none" : type.includes("mandatory") ? "mandatory" : "proximity";
+    }
+    const box = track.getBoundingClientRect();
+    const edge = rtl ? box.right - px(style.borderRightWidth) : box.left + px(style.borderLeftWidth);
+    const offset = readPos();
+    const port = track.clientWidth;
+    geo = {
+      starts: [],
+      sizes: [],
+      port,
+      padStart: lengthIn(style.scrollPaddingInlineStart, port),
+      padEnd: lengthIn(style.scrollPaddingInlineEnd, port),
+      max: Math.max(0, track.scrollWidth - port),
+      align: style.getPropertyValue("--sc-align").trim() || "start"
+    };
+    for (const slide of slides) {
+      const rect = slide.getBoundingClientRect();
+      geo.starts.push((rtl ? edge - rect.right : rect.left - edge) + offset);
+      geo.sizes.push(rect.width);
+    }
+    snaps = snapPositions(geo);
+    if (anchorSlide?.parentNode == track) anchor = slides.indexOf(anchorSlide);
+    anchor = Math.max(0, Math.min(anchor, slides.length - 1));
+    pages = buildPages(geo, snaps, group, anchor);
+    if (target >= pages.length) target = -1;
+    const firsts = new Set(pages.map((page) => page.first));
+    slides.forEach((slide, i) => slide.toggleAttribute("data-sc-snap-off", group != 1 && !firsts.has(i)));
+    if (dots) {
+      while (dots.children.length > pages.length) dots.lastElementChild.remove();
+      while (dots.children.length < pages.length) {
+        const dot = document.createElement("button");
+        dot.type = "button";
+        dot.className = "sc-dot";
+        dots.append(dot);
+      }
+      [...dots.children].forEach((dot, i) => dot.setAttribute("aria-label", labels.page(i + 1, pages.length)));
+    }
+    if (needsInitial && port && pages.length) {
+      needsInitial = false;
+      const initial = pages[pageOf(pages, anchor)].pos;
+      if (Math.abs(readPos() - initial) > 1) moveTo(initial, "instant");
+    }
+    pos = readPos();
+    run("measure");
+  }
+  function update(isSettled, silent) {
+    const moving = target >= 0;
+    const here = moving ? pages[target].pos : pos;
+    const page = moving ? target : closest(positions(), pos);
+    state = {
+      index: moving ? pages[target].first : closest(snaps, pos),
+      page,
+      pageCount: pages.length,
+      isBeginning: here <= EPS,
+      isEnd: here >= geo.max - EPS,
+      overflow: geo.max > EPS
+    };
+    for (const [name, on] of [["overflow", state.overflow], ["start", state.isBeginning], ["end", state.isEnd]]) {
+      root.toggleAttribute("data-sc-" + name, on);
+    }
+    if (tabIndex == "0") track.tabIndex = state.overflow ? 0 : -1;
+    prevButton?.setAttribute("aria-disabled", String(state.isBeginning && !rewind));
+    nextButton?.setAttribute("aria-disabled", String(state.isEnd && !rewind));
+    if (dots) {
+      [...dots.children].forEach((dot, i) => i == page ? dot.setAttribute("aria-current", "true") : dot.removeAttribute("aria-current"));
+    }
+    if (!isSettled) return;
+    if (settled && ["index", "page", "pageCount"].every((key) => settled[key] == state[key])) return;
+    const first = !settled;
+    settled = state;
+    if (first) return;
+    root.dispatchEvent(new CustomEvent("sc:change", { detail: { ...state } }));
+    options.onChange?.({ ...state });
+    if (status && !silent && !quiet) {
+      const [from, to] = visibleRange(pos, geo);
+      if (from >= 0) status.textContent = labels.status(from + 1, to + 1, slides.length, slides);
+    }
+    quiet = false;
+  }
+  function armSettle() {
+    clearTimeout(settleTimer);
+    settleTimer = setTimeout(settle, "onscrollend" in window ? 400 : 120);
+  }
+  function settle() {
+    clearTimeout(settleTimer);
+    if (touching || busy) return;
+    scrolling = false;
+    target = -1;
+    pos = readPos();
+    run("settle");
+    update(true);
+  }
+  function cancelFade() {
+    clearTimeout(fadeTimer);
+    track.removeAttribute("data-sc-fading");
+  }
+  function scrollToPos(position, how) {
+    cancelFade();
+    if (Math.abs(readPos() - position) < 1) return settle();
+    if (how == "fade" && !motion.matches) {
+      track.setAttribute("data-sc-fading", "");
+      fadeTimer = setTimeout(() => {
+        moveTo(position, "instant");
+        track.removeAttribute("data-sc-fading");
+      }, 160);
+      return;
+    }
+    moveTo(position, how == "instant" || motion.matches ? "instant" : "smooth");
+    armSettle();
+  }
+  function toPage(page, how) {
+    if (!pages[page]) return;
+    target = page;
+    update();
+    scrollToPos(pages[page].pos, how);
+  }
+  function step(direction, wrap, silent) {
+    if (pages.length < 2) return;
+    if (silent) quiet = true;
+    const from = target >= 0 ? pages[target].pos : readPos();
+    let next = -1;
+    pages.forEach((page, i) => {
+      if (direction > 0 ? next < 0 && page.pos > from + EPS : page.pos < from - EPS) next = i;
+    });
+    if (next >= 0) toPage(next);
+    else if (wrap) toPage(direction > 0 ? 0 : pages.length - 1, rewind == "fade" ? "fade" : void 0);
+  }
+  function takeControl() {
+    quiet = false;
+    run("control");
+  }
+  function grab() {
+    takeControl();
+    cancelFade();
+    target = -1;
+  }
+  const click = (button, direction) => listen(button, "click", () => {
+    if (button.getAttribute("aria-disabled") == "true") return;
+    takeControl();
+    step(direction, !!rewind);
+  });
+  click(prevButton, -1);
+  click(nextButton, 1);
+  listen(dots, "click", (event) => {
+    const dot = event.target.closest(".sc-dot");
+    if (!dot) return;
+    takeControl();
+    toPage([...dots.children].indexOf(dot));
+  });
+  listen(track, "keydown", (event) => {
+    if (event.target != track || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const key = event.key;
+    const forward = rtl ? "ArrowLeft" : "ArrowRight";
+    if (![forward, rtl ? "ArrowRight" : "ArrowLeft", "Home", "End"].includes(key)) return;
+    event.preventDefault();
+    takeControl();
+    if (key == "Home") toPage(0);
+    else if (key == "End") toPage(pages.length - 1);
+    else step(key == forward ? 1 : -1, false);
+  });
+  listen(
+    track,
+    "scroll",
+    () => {
+      scrolling = true;
+      frame ||= requestAnimationFrame(() => {
+        frame = 0;
+        pos = readPos();
+        update();
+      });
+      armSettle();
+    },
+    { passive: true }
+  );
+  listen(track, "scrollend", settle);
+  listen(
+    track,
+    "touchstart",
+    () => {
+      touching = true;
+      grab();
+    },
+    { passive: true }
+  );
+  for (const type of ["touchend", "touchcancel"]) {
+    listen(
+      track,
+      type,
+      () => {
+        touching = false;
+        armSettle();
+      },
+      { passive: true }
+    );
+  }
+  listen(
+    track,
+    "wheel",
+    (event) => {
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) grab();
+    },
+    { passive: true }
+  );
+  const resizes = new ResizeObserver(() => {
+    measureFrame ||= requestAnimationFrame(() => {
+      measureFrame = 0;
+      measure();
+      update(!scrolling, true);
+    });
+  });
+  const observeSlides = () => {
+    resizes.disconnect();
+    for (const element of [track, ...slides]) resizes.observe(element);
+  };
+  const mutations = new MutationObserver(() => {
+    const keep = !scrolling && target < 0 && !busy ? slides[state.index] : void 0;
+    const seen = keep ? geo.starts[state.index] - pos : 0;
+    measure();
+    if (keep?.parentNode == track) {
+      const wanted = clamp(geo.starts[slides.indexOf(keep)] - seen, 0, geo.max);
+      if (Math.abs(readPos() - wanted) > 1) {
+        moveTo(wanted, "instant");
+        pos = readPos();
+      }
+    }
+    observeSlides();
+    update(!scrolling, true);
+  });
+  const context = {
+    root,
+    track,
+    listen,
+    layout: () => ({ pages, max: geo.max, rtl, snap, state }),
+    toPage,
+    scrollTo: scrollToPos,
+    step,
+    grab,
+    hold: (on) => busy = on,
+    on: (event, handler) => hooks[event].push(handler)
+  };
+  const api = {
+    root,
+    track,
+    get slides() {
+      return slides;
+    },
+    get state() {
+      return { ...state };
+    },
+    next() {
+      takeControl();
+      step(1, !!rewind);
+    },
+    prev() {
+      takeControl();
+      step(-1, !!rewind);
+    },
+    slideTo(index, { instant } = {}) {
+      takeControl();
+      toPage(pageOf(pages, clamp(index, 0, slides.length - 1)), instant ? "instant" : void 0);
+    },
+    goToPage(page, { instant } = {}) {
+      takeControl();
+      toPage(clamp(page, 0, pages.length - 1), instant ? "instant" : void 0);
+    },
+    update() {
+      measure();
+      update(!scrolling, true);
+    },
+    destroy() {
+      listeners.abort();
+      resizes.disconnect();
+      mutations.disconnect();
+      cancelAnimationFrame(frame);
+      cancelAnimationFrame(measureFrame);
+      clearTimeout(settleTimer);
+      cancelFade();
+      cleanups.forEach((cleanup) => cleanup?.());
+      for (const name of ["ready", "overflow", "start", "end"]) root.removeAttribute(`data-sc-${name}`);
+      for (const slide of track.children) slide.removeAttribute("data-sc-snap-off");
+      if (tabIndex != null) track.setAttribute("tabindex", tabIndex);
+      prevButton?.removeAttribute("aria-disabled");
+      nextButton?.removeAttribute("aria-disabled");
+      dots?.replaceChildren();
+      instances.delete(root);
+    }
+  };
+  for (const key of ["index", "page", "pageCount", "isBeginning", "isEnd"]) {
+    Object.defineProperty(api, key, { get: () => state[key] });
+  }
+  measure();
+  update(true, true);
+  observeSlides();
+  mutations.observe(track, { childList: true });
+  const cleanups = (options.plugins || []).map((plugin) => {
+    const { destroy, ...extra } = plugin(context) || {};
+    Object.assign(api, extra);
+    return destroy;
+  });
+  instances.set(root, api);
+  root.setAttribute("data-sc-ready", "");
+  return api;
+}
+
+export {
+  getCarousel,
+  attach
+};

package/dist/shared/chunk-I4ZMRKZV.js

@@ -0,0 +1,60 @@
+// src/markup.ts
+var PROPERTIES = {
+  perView: "per-view",
+  slideSize: "slide-size",
+  gap: "gap",
+  offsetBefore: "offset-before",
+  offsetAfter: "offset-after",
+  snap: "snap",
+  align: "align",
+  group: "group",
+  controls: "controls"
+};
+var LENGTHS = /* @__PURE__ */ new Set(["gap", "offsetBefore", "offsetAfter"]);
+function value(key, raw) {
+  if (key == "controls") return raw ? "initial" : "none";
+  return typeof raw == "number" && LENGTHS.has(key) ? `${raw}px` : String(raw).replace(/[<>]/g, "");
+}
+var isResponsive = (raw) => typeof raw == "object" && raw != null;
+function baseVars(props) {
+  const vars = {};
+  for (const [key, name] of Object.entries(PROPERTIES)) {
+    const raw = props[key];
+    const base = isResponsive(raw) ? raw[0] : raw;
+    if (base !== void 0 && !(key == "controls" && base)) vars[`--sc-${name}`] = value(key, base);
+  }
+  if (props.centered) vars["--sc-centered"] = "1";
+  return vars;
+}
+var baseStyle = (props) => Object.entries(baseVars(props)).map(([name, val]) => `${name}:${val}`).join(";");
+function responsiveCss(id, props) {
+  const rules = /* @__PURE__ */ new Map();
+  for (const [key, name] of Object.entries(PROPERTIES)) {
+    const raw = props[key];
+    if (!isResponsive(raw)) continue;
+    for (const [width, val] of Object.entries(raw)) {
+      if (+width <= 0) continue;
+      if (!rules.has(+width)) rules.set(+width, []);
+      rules.get(+width).push(`--sc-${name}:${value(key, val)}`);
+    }
+  }
+  return [...rules].sort(([a], [b]) => a - b).map(([width, decls]) => `@container sc (min-width:${width}px){[data-sc-id="${id}"]>*{${decls.join(";")}}}`).join("");
+}
+var PRE_POSITION = "(function(r){var t=r.querySelector('[data-sc-track]'),s=t&&t.querySelector('[data-sc-initial]'),f=t&&t.firstElementChild;if(!s||s==f)return;var a=s.getBoundingClientRect(),b=f.getBoundingClientRect();t.scrollLeft=getComputedStyle(t).direction=='rtl'?a.right-b.right:a.left-b.left})(document.currentScript.previousElementSibling)";
+function templateLabels(templates = {}) {
+  const fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+  return {
+    ...templates.page && { page: (n, count) => fill(templates.page, { n, count }) },
+    ...templates.status && {
+      status: (first, last, count) => fill(templates.status, { first, last, count })
+    }
+  };
+}
+
+export {
+  baseVars,
+  baseStyle,
+  responsiveCss,
+  PRE_POSITION,
+  templateLabels
+};