@solid-design-system/components 1.17.0 → 1.18.0

package/dist/package/components/carousel/autoplay-controller.d.ts

@@ -0,0 +1,18 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export declare class AutoplayController implements ReactiveController {
+    private host;
+    private timerId;
+    private tickCallback;
+    private activeInteractions;
+    paused: boolean;
+    stopped: boolean;
+    constructor(host: ReactiveElement, tickCallback: () => void);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    start(interval: number): void;
+    stop(): void;
+    pause: () => void;
+    resume: () => void;
+    controlledPause: () => void;
+    controlledResume: () => void;
+}

package/dist/package/components/carousel/autoplay-controller.js

@@ -0,0 +1,65 @@
+class AutoplayController {
+  constructor(host, tickCallback) {
+    this.timerId = 0;
+    this.activeInteractions = 0;
+    this.paused = false;
+    this.stopped = true;
+    this.pause = () => {
+      if (!this.activeInteractions++) {
+        this.paused = true;
+        this.host.requestUpdate();
+      }
+    };
+    this.resume = () => {
+      if (!--this.activeInteractions) {
+        this.paused = false;
+        this.host.requestUpdate();
+      }
+    };
+    this.controlledPause = () => {
+      this.paused = true;
+      this.host.requestUpdate();
+    };
+    this.controlledResume = () => {
+      this.paused = false;
+      this.host.requestUpdate();
+    };
+    host.addController(this);
+    this.host = host;
+    this.tickCallback = tickCallback;
+  }
+  hostConnected() {
+    this.host.addEventListener("mouseenter", this.pause);
+    this.host.addEventListener("mouseleave", this.resume);
+    this.host.addEventListener("focusin", this.pause);
+    this.host.addEventListener("focusout", this.resume);
+    this.host.addEventListener("touchstart", this.pause, { passive: true });
+    this.host.addEventListener("touchend", this.resume);
+  }
+  hostDisconnected() {
+    this.stop();
+    this.host.removeEventListener("mouseenter", this.pause);
+    this.host.removeEventListener("mouseleave", this.resume);
+    this.host.removeEventListener("focusin", this.pause);
+    this.host.removeEventListener("focusout", this.resume);
+    this.host.removeEventListener("touchstart", this.pause);
+    this.host.removeEventListener("touchend", this.resume);
+  }
+  start(interval) {
+    this.stop();
+    this.stopped = false;
+    this.timerId = window.setInterval(() => {
+      if (!this.paused) {
+        this.tickCallback();
+      }
+    }, interval);
+  }
+  stop() {
+    clearInterval(this.timerId);
+    this.stopped = true;
+    this.host.requestUpdate();
+  }
+}
+export {
+  AutoplayController
+};

package/dist/package/components/carousel/carousel.d.ts

@@ -0,0 +1,46 @@
+import '../icon/icon.js';
+import SolidElement from '../../internal/solid-element.js';
+export default class SdCarousel extends SolidElement {
+    variant: 'dot' | 'number';
+    inverted: boolean;
+    loop: boolean;
+    autoplay: boolean;
+    slidesPerPage: number;
+    slidesPerMove: number;
+    defaultSlot: HTMLSlotElement;
+    scrollContainer: HTMLElement;
+    paginationContainer: HTMLElement;
+    activeSlide: number;
+    pausedAutoplay: boolean;
+    private autoplayController;
+    private scrollController;
+    private readonly slides;
+    private intersectionObserver;
+    private readonly intersectionObserverEntries;
+    private readonly localize;
+    private mutationObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    private getPageCount;
+    private getCurrentPage;
+    private getSlides;
+    private handleKeyDown;
+    private handleScrollEnd;
+    private handleSlotChange;
+    handlePausedAutoplay(): void;
+    initializeSlides(): void;
+    handelSlideChange(): void;
+    handleSlidesPerMoveChange(): void;
+    handleAutoplayChange(): void;
+    previous(behavior?: ScrollBehavior): void;
+    next(behavior?: ScrollBehavior): void;
+    goToSlide(index: number, behavior?: ScrollBehavior): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-carousel': SdCarousel;
+    }
+}

package/dist/package/components/carousel/carousel.js

@@ -0,0 +1,366 @@
+import "../icon/icon.js";
+import { AutoplayController } from "./autoplay-controller.js";
+import { clamp } from "../../internal/math.js";
+import { unsafeCSS, css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { LocalizeController } from "../../utilities/localize.js";
+import { map } from "lit/directives/map.js";
+import { prefersReducedMotion } from "../../internal/animate.js";
+import { property, query, state } from "lit/decorators.js";
+import { range } from "lit/directives/range.js";
+import { ScrollController } from "./scroll-controller.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import InteractiveStyles from "../../styles/interactive/interactive.css.js";
+import SdCarouselItem from "../carousel-item/carousel-item.js";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdCarousel = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "number";
+    this.inverted = false;
+    this.loop = false;
+    this.autoplay = false;
+    this.slidesPerPage = 1;
+    this.slidesPerMove = 1;
+    this.activeSlide = 0;
+    this.pausedAutoplay = false;
+    this.autoplayController = new AutoplayController(this, () => this.next());
+    this.scrollController = new ScrollController(this);
+    this.slides = this.getElementsByTagName("sd-carousel-item");
+    this.intersectionObserverEntries = /* @__PURE__ */ new Map();
+    this.localize = new LocalizeController(this);
+    this.handleSlotChange = (mutations) => {
+      const needsInitialization = mutations.some(
+        (mutation) => [...mutation.addedNodes, ...mutation.removedNodes].some(
+          (node) => SdCarouselItem.isCarouselItem(node) && !node.hasAttribute("data-clone")
+        )
+      );
+      if (needsInitialization) {
+        this.initializeSlides();
+      }
+      this.requestUpdate();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "region");
+    this.setAttribute("aria-label", this.localize.term("carousel"));
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          this.intersectionObserverEntries.set(entry.target, entry);
+          const slide = entry.target;
+          slide.toggleAttribute("inert", !entry.isIntersecting);
+          slide.classList.toggle("--in-view", entry.isIntersecting);
+          slide.setAttribute("aria-hidden", entry.isIntersecting ? "false" : "true");
+        });
+      },
+      {
+        root: this,
+        threshold: 0.6
+      }
+    );
+    this.intersectionObserver = intersectionObserver;
+    intersectionObserver.takeRecords().forEach((entry) => {
+      this.intersectionObserverEntries.set(entry.target, entry);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.intersectionObserver.disconnect();
+    this.mutationObserver.disconnect();
+  }
+  firstUpdated() {
+    this.initializeSlides();
+    this.mutationObserver = new MutationObserver(this.handleSlotChange);
+    this.mutationObserver.observe(this, { childList: true, subtree: false });
+  }
+  getPageCount() {
+    return Math.ceil(this.getSlides().length / this.slidesPerPage);
+  }
+  getCurrentPage() {
+    return Math.ceil(this.activeSlide / this.slidesPerPage);
+  }
+  getSlides({ excludeClones = true } = {}) {
+    return [...this.slides].filter((slide) => !excludeClones || !slide.hasAttribute("data-clone"));
+  }
+  handleKeyDown(event) {
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      const target = event.target;
+      const isRtl = this.localize.dir() === "rtl";
+      const isFocusInPagination = target.closest('[part~="pagination-item"]') !== null;
+      const isNext = event.key === "ArrowDown" || !isRtl && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft";
+      const isPrevious = event.key === "ArrowUp" || !isRtl && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight";
+      event.preventDefault();
+      if (isPrevious) {
+        this.previous();
+      }
+      if (isNext) {
+        this.next();
+      }
+      if (event.key === "Home") {
+        this.goToSlide(0);
+      }
+      if (event.key === "End") {
+        this.goToSlide(this.getSlides().length - 1);
+      }
+      if (isFocusInPagination) {
+        this.updateComplete.then(() => {
+          var _a;
+          const activePaginationItem = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+            '[part~="pagination-item--active"]'
+          );
+          if (activePaginationItem) {
+            activePaginationItem.focus();
+          }
+        });
+      }
+    }
+  }
+  handleScrollEnd() {
+    const slides = this.getSlides();
+    const entries = [...this.intersectionObserverEntries.values()];
+    const firstIntersecting = entries.find((entry) => entry.isIntersecting);
+    if (this.loop && (firstIntersecting == null ? void 0 : firstIntersecting.target.hasAttribute("data-clone"))) {
+      const clonePosition = Number(firstIntersecting.target.getAttribute("data-clone"));
+      this.goToSlide(clonePosition, "auto");
+      return;
+    }
+    if (firstIntersecting) {
+      this.activeSlide = slides.indexOf(firstIntersecting.target);
+    }
+  }
+  handlePausedAutoplay() {
+    if (this.pausedAutoplay) {
+      this.autoplayController.controlledPause();
+    } else if (this.autoplay) {
+      this.autoplayController.controlledResume();
+    }
+  }
+  initializeSlides() {
+    const slides = this.getSlides();
+    const intersectionObserver = this.intersectionObserver;
+    this.intersectionObserverEntries.clear();
+    this.getSlides({ excludeClones: false }).forEach((slide, index) => {
+      intersectionObserver.unobserve(slide);
+      slide.classList.remove("--in-view");
+      slide.classList.remove("--is-active");
+      slide.setAttribute("aria-label", this.localize.term("slideNum", index + 1));
+      if (slide.hasAttribute("data-clone")) {
+        slide.remove();
+      }
+    });
+    if (this.loop) {
+      const slidesPerPage = this.slidesPerPage;
+      const lastSlides = slides.slice(-slidesPerPage);
+      const firstSlides = slides.slice(0, slidesPerPage);
+      lastSlides.reverse().forEach((slide, i) => {
+        const clone = slide.cloneNode(true);
+        clone.setAttribute("data-clone", String(slides.length - i - 1));
+        this.prepend(clone);
+      });
+      firstSlides.forEach((slide, i) => {
+        const clone = slide.cloneNode(true);
+        clone.setAttribute("data-clone", String(i));
+        this.append(clone);
+      });
+    }
+    this.getSlides({ excludeClones: false }).forEach((slide) => {
+      intersectionObserver.observe(slide);
+    });
+    this.goToSlide(this.activeSlide, "auto");
+  }
+  handelSlideChange() {
+    const slides = this.getSlides();
+    slides.forEach((slide, i) => {
+      slide.classList.toggle("--is-active", i === this.activeSlide);
+    });
+    if (this.hasUpdated) {
+      this.emit("sd-slide-change", {
+        detail: {
+          index: this.activeSlide,
+          slide: slides[this.activeSlide]
+        }
+      });
+    }
+  }
+  handleSlidesPerMoveChange() {
+    const slides = this.getSlides({ excludeClones: false });
+    const slidesPerMove = this.slidesPerMove;
+    slides.forEach((slide, i) => {
+      const shouldSnap = Math.abs(i - slidesPerMove) % slidesPerMove === 0;
+      if (shouldSnap) {
+        slide.style.removeProperty("scroll-snap-align");
+      } else {
+        slide.style.setProperty("scroll-snap-align", "none");
+      }
+    });
+  }
+  handleAutoplayChange() {
+    this.autoplayController.stop();
+    if (this.autoplay && !this.pausedAutoplay) {
+      this.autoplayController.start(3e3);
+    }
+  }
+  /**
+   * Move the carousel backward by `slides-per-move` slides.
+   *
+   * @param behavior - The behavior used for scrolling.
+   */
+  previous(behavior = "smooth") {
+    let previousIndex = this.activeSlide || this.activeSlide - this.slidesPerMove;
+    let canSnap = false;
+    while (!canSnap && previousIndex > 0) {
+      previousIndex -= 1;
+      canSnap = Math.abs(previousIndex - this.slidesPerMove) % this.slidesPerMove === 0;
+    }
+    this.goToSlide(previousIndex, behavior);
+  }
+  /**
+   * Move the carousel forward by `slides-per-move` slides.
+   *
+   * @param behavior - The behavior used for scrolling.
+   */
+  next(behavior = "smooth") {
+    this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
+  }
+  /**
+   * Scrolls the carousel to the slide specified by `index`.
+   *
+   * @param index - The slide index.
+   * @param behavior - The behavior used for scrolling.
+   */
+  goToSlide(index, behavior = "smooth") {
+    const { slidesPerPage, loop, scrollContainer } = this;
+    const slides = this.getSlides();
+    const slidesWithClones = this.getSlides({ excludeClones: false });
+    const newActiveSlide = (index + slides.length) % slides.length;
+    this.activeSlide = newActiveSlide;
+    const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length - 1);
+    const nextSlide = slidesWithClones[nextSlideIndex];
+    const scrollContainerRect = scrollContainer.getBoundingClientRect();
+    const nextSlideRect = nextSlide.getBoundingClientRect();
+    scrollContainer.scrollTo({
+      left: nextSlideRect.left - scrollContainerRect.left + scrollContainer.scrollLeft,
+      top: nextSlideRect.top - scrollContainerRect.top + scrollContainer.scrollTop,
+      behavior: prefersReducedMotion() ? "auto" : behavior
+    });
+  }
+  render() {
+    const { scrollController, slidesPerPage } = this;
+    const pagesCount = this.getPageCount();
+    const currentPage = this.getCurrentPage();
+    const prevEnabled = this.loop || currentPage > 0;
+    const nextEnabled = this.loop || currentPage < pagesCount - 1;
+    const isLtr = this.localize.dir() === "ltr";
+    return html`<div part="base" class="${cx(`carousel h-full w-full`)}"><div id="scroll-container" part="scroll-container" class="${cx(
+      `carousel__slides mb-6
+            grid max-h-full w-full items-center justify-items-center overflow-auto`,
+      this.inverted ? "focus-visible:focus-outline-inverted" : "focus-visible:focus-outline",
+      `overscroll-x-contain grid-flow-col auto-rows-[100%]
+            snap-x snap-mandatory overflow-y-hidden`
+    )}" style="--slides-per-page:${this.slidesPerPage}" aria-busy="${scrollController.scrolling ? "true" : "false"}" aria-atomic="true" tabindex="0" @keydown="${this.handleKeyDown}" @scrollend="${this.handleScrollEnd}"><slot></slot></div><div part="controls" class="${cx("w-full flex items-center justify-center relative")}"><div part="navigation" class="${cx("carousel__navigation flex items-center justify-center")}"><button part="navigation-button navigation-button--previous" id="carousel__navigation-button--previous" ?disabled="${!prevEnabled ? true : false}" class="${cx(
+      "!mr-6 !rounded-sm sd-interactive",
+      !prevEnabled && "sd-interactive--disabled",
+      this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
+    )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
+      const isActive = index === currentPage;
+      return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
+        "carousel__pagination-item",
+        "block cursor-pointer bg-none border-0 rounded-full",
+        isActive ? "bg-accent" : "",
+        this.inverted ? "focus-within:focus-outline-inverted" : "focus-within:focus-outline"
+      )}" role="tab" tabindex="0" aria-selected="${isActive ? "true" : "false"}" aria-label="${this.localize.term("goToSlide", index + 1, pagesCount)}" @click="${() => this.goToSlide(index * slidesPerPage)}" @keydown="${this.handleKeyDown}"><span class="${cx(
+        "h-4 w-4 block border hover:border-primary-500 rounded-full",
+        this.inverted ? "border-white hover:border-primary-500" : "border-primary",
+        isActive && "bg-accent border-none",
+        isActive ? this.inverted ? "hover:bg-accent-300" : "hover:bg-accent-550" : ""
+      )}"></span></button>`;
+    })}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage + 1}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
+      "!ml-6 !rounded-sm sd-interactive ",
+      !nextEnabled && "sd-interactive--disabled",
+      this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
+    )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? () => {
+      console.log("click-next");
+      this.next();
+    } : null}"><slot name="next-icon"><sd-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-icon></slot></button></div><button class="${cx(
+      "ml-6 !rounded-sm",
+      "!absolute !right-0 sd-interactive",
+      this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
+      !this.autoplay && "!hidden"
+    )}" part="autoplay-controls" @click="${() => this.pausedAutoplay = !this.pausedAutoplay}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-icon></slot></button></div></div>`;
+  }
+};
+SdCarousel.styles = [
+  SolidElement.styles,
+  unsafeCSS(InteractiveStyles),
+  css`${componentStyles}:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__slides--dragging,.carousel__slides--dropping{scroll-snap-type:unset}.carousel__slides::-webkit-scrollbar{display:none}.carousel__navigation{grid-area:navigation}sd-button::part(label){display:flex;flex:1 1 auto;align-items:center;pointer-events:none}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdCarousel.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdCarousel.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdCarousel.prototype, "loop", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdCarousel.prototype, "autoplay", 2);
+__decorateClass([
+  property({ type: Number, attribute: "slides-per-page" })
+], SdCarousel.prototype, "slidesPerPage", 2);
+__decorateClass([
+  property({ type: Number, attribute: "slides-per-move" })
+], SdCarousel.prototype, "slidesPerMove", 2);
+__decorateClass([
+  query("slot:not([name])")
+], SdCarousel.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".carousel__slides")
+], SdCarousel.prototype, "scrollContainer", 2);
+__decorateClass([
+  query(".carousel__pagination")
+], SdCarousel.prototype, "paginationContainer", 2);
+__decorateClass([
+  state()
+], SdCarousel.prototype, "activeSlide", 2);
+__decorateClass([
+  state()
+], SdCarousel.prototype, "pausedAutoplay", 2);
+__decorateClass([
+  watch("pausedAutoplay")
+], SdCarousel.prototype, "handlePausedAutoplay", 1);
+__decorateClass([
+  watch("loop", { waitUntilFirstUpdate: true }),
+  watch("slidesPerPage", { waitUntilFirstUpdate: true })
+], SdCarousel.prototype, "initializeSlides", 1);
+__decorateClass([
+  watch("activeSlide")
+], SdCarousel.prototype, "handelSlideChange", 1);
+__decorateClass([
+  watch("slidesPerMove")
+], SdCarousel.prototype, "handleSlidesPerMoveChange", 1);
+__decorateClass([
+  watch("autoplay")
+], SdCarousel.prototype, "handleAutoplayChange", 1);
+SdCarousel = __decorateClass([
+  customElement("sd-carousel")
+], SdCarousel);
+export {
+  SdCarousel as default
+};

package/dist/package/components/carousel/scroll-controller.d.ts

@@ -0,0 +1,25 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+interface ScrollHost extends ReactiveElement {
+    scrollContainer: HTMLElement;
+}
+export declare class ScrollController<T extends ScrollHost> implements ReactiveController {
+    private host;
+    private pointers;
+    dragging: boolean;
+    scrolling: boolean;
+    mouseDragging: boolean;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+    hostDisconnected(): void;
+    handleScroll: () => void;
+    handleScrollEnd(): void;
+    handlePointerDown: (event: PointerEvent) => void;
+    handlePointerMove: (event: PointerEvent) => void;
+    handlePointerUp: (event: PointerEvent) => void;
+    handleTouchEnd: (event: TouchEvent) => void;
+    handleTouchStart: (event: TouchEvent) => void;
+    handleDragStart(): void;
+    handleDrag(event: PointerEvent): void;
+    handleDragEnd(): Promise<void>;
+}
+export {};

package/dist/package/components/carousel/scroll-controller.js

@@ -0,0 +1,141 @@
+import { debounce } from "../../internal/debounce.js";
+import { prefersReducedMotion } from "../../internal/animate.js";
+import { waitForEvent } from "../../internal/event.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class ScrollController {
+  constructor(host) {
+    this.pointers = /* @__PURE__ */ new Set();
+    this.dragging = false;
+    this.scrolling = false;
+    this.mouseDragging = false;
+    this.handleScroll = () => {
+      if (!this.scrolling) {
+        this.scrolling = true;
+        this.host.requestUpdate();
+      }
+      this.handleScrollEnd();
+    };
+    this.handlePointerDown = (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      this.pointers.add(event.pointerId);
+      const canDrag = this.mouseDragging && !this.dragging && event.button === 0;
+      if (canDrag) {
+        event.preventDefault();
+        this.host.scrollContainer.addEventListener("pointermove", this.handlePointerMove);
+      }
+    };
+    this.handlePointerMove = (event) => {
+      const scrollContainer = this.host.scrollContainer;
+      const hasMoved = !!event.movementX || !!event.movementY;
+      if (!this.dragging && hasMoved) {
+        scrollContainer.setPointerCapture(event.pointerId);
+        this.handleDragStart();
+      } else if (scrollContainer.hasPointerCapture(event.pointerId)) {
+        this.handleDrag(event);
+      }
+    };
+    this.handlePointerUp = (event) => {
+      this.pointers.delete(event.pointerId);
+      this.host.scrollContainer.releasePointerCapture(event.pointerId);
+      if (this.pointers.size === 0) {
+        this.handleDragEnd();
+      }
+    };
+    this.handleTouchEnd = (event) => {
+      for (const touch of event.changedTouches) {
+        this.pointers.delete(touch.identifier);
+      }
+    };
+    this.handleTouchStart = (event) => {
+      for (const touch of event.touches) {
+        this.pointers.add(touch.identifier);
+      }
+    };
+    this.host = host;
+    host.addController(this);
+  }
+  async hostConnected() {
+    const host = this.host;
+    await host.updateComplete;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.addEventListener("scroll", this.handleScroll, { passive: true });
+    scrollContainer.addEventListener("pointerdown", this.handlePointerDown);
+    scrollContainer.addEventListener("pointerup", this.handlePointerUp);
+    scrollContainer.addEventListener("pointercancel", this.handlePointerUp);
+    scrollContainer.addEventListener("touchstart", this.handleTouchStart, { passive: true });
+    scrollContainer.addEventListener("touchend", this.handleTouchEnd);
+  }
+  hostDisconnected() {
+    const host = this.host;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.removeEventListener("scroll", this.handleScroll);
+    scrollContainer.removeEventListener("pointerdown", this.handlePointerDown);
+    scrollContainer.removeEventListener("pointerup", this.handlePointerUp);
+    scrollContainer.removeEventListener("pointercancel", this.handlePointerUp);
+    scrollContainer.removeEventListener("touchstart", this.handleTouchStart);
+    scrollContainer.removeEventListener("touchend", this.handleTouchEnd);
+  }
+  handleScrollEnd() {
+    if (!this.pointers.size) {
+      this.scrolling = false;
+      this.host.scrollContainer.dispatchEvent(
+        new CustomEvent("scrollend", {
+          bubbles: false,
+          cancelable: false
+        })
+      );
+      this.host.requestUpdate();
+    } else {
+      this.handleScrollEnd();
+    }
+  }
+  handleDragStart() {
+    const host = this.host;
+    this.dragging = true;
+    host.scrollContainer.style.setProperty("scroll-snap-type", "unset");
+    host.requestUpdate();
+  }
+  handleDrag(event) {
+    this.host.scrollContainer.scrollBy({
+      left: -event.movementX,
+      top: -event.movementY
+    });
+  }
+  async handleDragEnd() {
+    const host = this.host;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.removeEventListener("pointermove", this.handlePointerMove);
+    this.dragging = false;
+    const startLeft = scrollContainer.scrollLeft;
+    const startTop = scrollContainer.scrollTop;
+    scrollContainer.style.removeProperty("scroll-snap-type");
+    const finalLeft = scrollContainer.scrollLeft;
+    const finalTop = scrollContainer.scrollTop;
+    scrollContainer.style.setProperty("scroll-snap-type", "unset");
+    scrollContainer.scrollTo({ left: startLeft, top: startTop, behavior: "auto" });
+    scrollContainer.scrollTo({ left: finalLeft, top: finalTop, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    if (this.scrolling) {
+      await waitForEvent(scrollContainer, "scrollend");
+    }
+    scrollContainer.style.removeProperty("scroll-snap-type");
+    host.requestUpdate();
+  }
+}
+__decorateClass([
+  debounce(100)
+], ScrollController.prototype, "handleScrollEnd", 1);
+export {
+  ScrollController
+};

package/dist/package/components/carousel-item/carousel-item.d.ts

@@ -0,0 +1,12 @@
+import SolidElement from '../../internal/solid-element.js';
+export default class SdCarouselItem extends SolidElement {
+    static isCarouselItem(node: Node): boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-carousel-item': SdCarouselItem;
+    }
+}