@solid-design-system/components 1.17.0 → 1.18.1

package/dist/versioned-package/components/accordion-group/accordion-group.js

@@ -48,16 +48,16 @@ let SdAccordionGroup = class extends SolidElement {
 SdAccordionGroup.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:block}::slotted(sd-1-17-0-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`:host{display:block}::slotted(sd-1-18-1-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-1-17-0-accordion" })
+  queryAssignedElements({ selector: "sd-1-18-1-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-1-17-0-accordion-group")
+  customElement("sd-1-18-1-accordion-group")
 ], SdAccordionGroup);
 export {
   SdAccordionGroup as default

package/dist/versioned-package/components/badge/badge.d.ts

@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-17-0-badge': SdBadge;
+        'sd-1-18-1-badge': SdBadge;
     }
 }

package/dist/versioned-package/components/badge/badge.js

@@ -53,7 +53,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-1-17-0-badge")
+  customElement("sd-1-18-1-badge")
 ], SdBadge);
 export {
   SdBadge as default

package/dist/versioned-package/components/brandshape/brandshape.d.ts

@@ -22,6 +22,6 @@ export default class SdBrandshape extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-17-0-brandshape': SdBrandshape;
+        'sd-1-18-1-brandshape': SdBrandshape;
     }
 }

package/dist/versioned-package/components/brandshape/brandshape.js

@@ -123,7 +123,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-1-17-0-brandshape")
+  customElement("sd-1-18-1-brandshape")
 ], SdBrandshape);
 export {
   SdBrandshape as default

package/dist/versioned-package/components/button/button.d.ts

@@ -43,6 +43,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-17-0-button': SdButton;
+        'sd-1-18-1-button': SdButton;
     }
 }

package/dist/versioned-package/components/button/button.js

@@ -191,19 +191,19 @@ let SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-1-17-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-17-0-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-1-18-1-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-18-1-spinner>` : ""}</${tag}>`;
   }
 };
 SdButton.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-17-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-1-17-0-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-17-0-icon),sd-1-17-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
+  css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-18-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-1-18-1-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-18-1-icon),sd-1-18-1-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-1-17-0-icon" })
+  queryAssignedElements({ selector: "sd-1-18-1-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -266,7 +266,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-1-17-0-button")
+  customElement("sd-1-18-1-button")
 ], SdButton);
 export {
   SdButton as default

package/dist/versioned-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/versioned-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/versioned-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-1-18-1-carousel': SdCarousel;
+    }
+}

package/dist/versioned-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-1-18-1-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-1-18-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-1-18-1-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-1-18-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-1-18-1-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-1-18-1-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-1-18-1-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-1-18-1-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-1-18-1-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-1-18-1-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-1-18-1-carousel")
+], SdCarousel);
+export {
+  SdCarousel as default
+};

package/dist/versioned-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 {};